钉钉微应用的开发——主前端

2024-02-15 14:57:54

钉钉微应用的开发——主前端

经济基础决定上层建筑。

第一步，这个地方如果当做一般的数据请求来看，没有什么要说的，用jquery或者zepto的ajax请求都可以很快速实现。就说一下我在这个踩的坑，我在使用ajax异步请求的时候，忽略了异步加载然而同步加载不停止的问题。深入这个话题我也还需要去学去实践，所以只是简单说明我的问题，后面会提供链接去深入学习。下面的代码，由于我没实现手机电脑联调，所以只能退而其次用alert测试，见谅。js在加载的时候，会先全部同步顺序加载，但是ajax请求不会影响同步加载，因而，会按照123的alert弹出，而非顺序弹出312。由于的我浅薄理解，导致我后面还没拿到ajax请求到的_config，就开始执行函数DDConfig(_config)配置钉钉，所以一直不弹出任何弹窗。这个问题我开始解决的方案是将这段ajax单独放在一个script标签里面，最先引入，然后再配置钉钉鉴权信息，这个在Android上测试时正常的，然而只是侥幸，iOS不买这个账。所以使用ajax的complete函数，在这里面执行DDConfig(_config)，可看源代码。

var _config = null; // 定义全局变量_config，初始值为null，用来接收API获取到的签名信息

var getConfig = $.ajax({

type: 'POST',

url: '获取企业签名的API，后台提供',

data: {

agentId: 109243825,

url: '这是你开发微应用页面的线上地址，一般是由钉钉管理员配置的。',

},

dataType: 'json',

success: function(data){

console.log('---success-post-dingInfo---');

if(data.status){

_config = data.data;

alert('3. API获取签名信息：'+JSON.stringify(_config));

// 开始配置钉钉

DDConfig(_config);

}else{

alert('请求信息出错');

}

},

error: function(data){

console.log(---error-post-dingInfo---);

}

});

alert('1. API请求开始：'+JSON.stringify(getConfig));

alert('2. 全局输出_config：'+JSON.stringify(_config));

第二步，这里官方给出很详细的步骤钉钉移动jsapi开发，你需要使用的api放进dd.config的jsApiList里面即可。其实钉钉的jsapi思路是这样的。引入dingtalk.js(官方文档有提供)这个js会给你提供一个全局变量dd，你可以在Chrome的控制台打印出来看看是个什么东西，里面可以识别钉钉版本，手机系统，以及提供一个个api。钉钉移动jsapi里面介绍所有的api，分为无需鉴权api和需要鉴权api，无需鉴权api可以再引入dingtalk.js之后全局使用；鉴权api就需要走后端接口以保证安全性，且鉴权通过才可以使用这部分api。思路就是这样。

问题1：如果你发现你的dd.ready/dd.error都没执行，那可能是我上一步遇见的问题，即没开始配置dd.config，却执行了dd.ready和dd.error，因为dd是全局变量，不受函数和异步限制，所以写法上面没有错，但是就是什么都不反应，很痛苦。还有一个很粗暴的方法去review你的代码，那就是清空js代码，不做ajax请求，直接开始钉钉鉴权，即dd.config、dd.ready、dd.error，这个时候你可以先用固定的鉴权信息(agentId，corpId，timeStamp，nonceStr，signature)去配置，这个时候因为不是实时的鉴权信息，所以肯定要直接进dd.error来提示校验失败，那么你就应该知道怎么一点点去排查你的错误了。

问题2：如果你发现dd.error被执行了，先恭喜你一下，至少你进入钉钉的api了，哈哈哈哈哈哈哈哈。。。

这个时候报错，说明你的dd.config里面有信息是错误的。那就去一个个打印出来检查。

还有可能是上一步中的url的问题，比如说我的微应用的链接是https://open-doc.dingtalk.com/；那么url也必须完全一样，注意https也不能错的哦。可看前辈们的问题集锦钉钉开放平台“常见问题常见问题常见问题

第三步，应该不用说了，只要鉴权通过，就可以直接用钉钉api获取用户的信息，只是这个信息很简单，不怎么涉及安全问题。可看源码。

第四步，题外话。这个免登，是需要你在通过钉钉api拿到authcode之后再去找后端API请求，告诉他你需要免登获取更多用户的信息钉钉免登，这些都是涉及到安全性的了，所有涉及安全的问题都要走后端API。这个我也没做，暂时还没用到，以后若是开发有坑还会继续说。钉钉的生态说不上很稳定，但是由于公司用的多，所以很多东西不管是官方还是前辈们都写的有详细文档和代码，可以多搜搜。

提交操作，可看源码。
————————————————
版权声明：本文为CSDN博主「藍色珊瑚礁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34125336/article/details/112018023

创建钉钉H5应用
顾名思义，钉钉H5应用，和微信WEB应用一样，本质都是一个有前端有后端的网站，由平台本身对网站基础功能进行扩充，提供专用接口满足开发者各式各样的和平台相关的需求。开发者平台：https://open-dev.dingtalk.com/ 先决条件：公司管理员和子管理员权限创建应用的流程很简单，开发者平台里新建一个应用，再为应用配置域名、IP白名单、接口权限等信息即可。

9665d57e2bc1c00e18ef11e94bed182f.png

fd142ce6d3235529cdcb881e761ac659.png

2dffb4e8cae7e854dad13d255a916441.png

0f194304aea209b71f39702581b77daf.png

75d686bcb60a76bbba5350b529b64102.png

关于免登
免登的关键在于如何识别用户，微信网页也好，微信小程序也好，钉钉也好，都开放了获取用户信息的接口，在这基础上做免登的流程是：向平台获取用户信息 -> 为用户登录。微信网页获取用户信息的流程是：用户同意授权(scope=snsapi_userinfo时) -> 获取code -> 通过code换取网页授权access_token -> 拉取用户信息。在获取code时，本质是由微信客户端刷新页面，并在URL中添加CODE参数；此外，获取access_token时，scope参数如果是snsapi_base，可以进行无感知获取用户openid，所以只有当需要获取详细信息时，才会用scope=snsapi_userinfo来显示请求授权，其它场景中(不需要获取用户信息，或已经获取了对应openid的用户信息)只要使用snsapi_base即可。(官方文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html) 钉钉流程与之类似，区别如下：

    微信通过URL传递code，钉钉通过JSAPI的dd.runtime.permission.requestAuthCode接口获取code；

    不需要用户授权(真正意义上的无感知)；

    直接获取用户信息而不需要scope字段。

此外，因为平台性质的差异，钉钉的用户字段包含了丰富的真实个人信息。签名校验

微信的wx.config参数配置，和钉钉H5的dd.config参数配置，不管是校验流程、签名参数的参数名和，还是校验算法都完全一样。

在整个过程中(包括其它开发步骤里)，有一个非常重要的原则需要格外留意：敏感参数绝对不能出现在前端(比如jsapi_ticket、access_token)。

流程如下：

    获取access_token

    获取jsapi_ticket

    计算签名(微信和钉钉均为jsapi_ticket, nonceStr, timeStamp, url)

    将生成签名的参数nonceStr，timeStamp, url和最终生成的签名Signature传到前端，供config接口配置和注册权限；除了这几个参数，dd.config还需要用到agentId(即应用ID)、corpId(即公司ID)，wx.config需要用到appId，本质上都是用来标识一个应用。

TOKEN的维护

钉钉的Token有一个服务端缓存刷新机制，只要在失效前请求接口，access_token的过期时间会恢复为7200秒，借由这个机制，可以在后台跑一个定时任务，隔一段时间请求一下，就可以保证当前access_token一直有效。
开发、部署流程(与微信WEB应用一样)：

    开发阶段

        可以用自己熟悉的环境、熟悉的框架按普通的WEB开发过程进行前后端开发；

        在需要使用功能的前端页面引入核心JS-SDK；

        通过dd.config接口注入权限验证配置；

        调用钉钉JSAPI接口时，需要发起者的IP存在于H5应用后台配置的服务器出口IP列表中。

    部署阶段

        常规：把网站部署到服务器，配置DNS解析指向网站；

        登入开发者平台，为应用配置应用首页地址。

关于H5 DEMO
页面和微信WEB版完全一样，只有接口调用方式不一样。为了便于解析Token、Ticket、GetUser接口的结果，创建专门的类用于反序列化HTTPResponse。

    public class BaseResponse    {        public int errcode { get; set; }        public string errmsg { get; set; }    }    public class TokenResponse : BaseResponse    {        public string access_token { get; set; }    }    public class TicketResponse : BaseResponse    {        public string ticket { get; set; }        public int expires_in { get; set; }    }    public class GetUserBase : BaseResponse    {//多余的属性用不到        public string userid { get; set; }    }

新增DDUser类，并创建一个对应的WxUser对象，作为网站用户。出于隐私考虑，Nickname由userid取Hash而来，避免暴露真实ID。

//DDHelper的GetUserInfo方法        public static DDUser GetUserInfo(string code)        {//先借code取userid，再借userid取详细信息            try            {                string userid = JsonConvert.DeserializeObject(                    ApiGet($"https://oapi.dingtalk.com/user/getuserinfo?access_token={Token}&code={code}")).userid;                string res = ApiGet($"https://oapi.dingtalk.com/user/get?access_token={Token}&userid={userid}");                return JsonConvert.DeserializeObject(res);            }            catch (Exception)            {                return null;            }        }            public class DDUser    {//删掉了一大堆用不到的属性        public string userid { get; set; }        public string errmsg { get; set; }        public string avatar { get; set; }        public string name { get; set; }        public WxUser WxUser => new WxUser()        {            Avatar = string.IsNullOrEmpty(avatar) ? "/ding.png" : avatar,            Created = DateTime.Now,            LastUpdate = DateTime.Now,            Message = 0,            Nickname = "Ding-" + (Convert.ToInt64(userid.GetHashCode()) + int.MaxValue).ToString("x2"),            Openid = userid,            X = 10000,            Y = 0        };    }

与微信项目类似，为了方便生成统一的ConfigData，创建一个专门的类，自动生成nonceStr和timeStamp，并在构造函数里直接计算签名。

//DDHelper的GetTicket方法，获取jsapi_ticket        static string _ticket = "";        static DateTime ticket_exp;        public static string GetTicket()        {            if (ticket_exp < DateTime.Now || string.IsNullOrEmpty(_ticket))            {                TicketResponse res =                    JsonConvert.DeserializeObject(                        ApiGet($"https://oapi.dingtalk.com/get_jsapi_ticket?access_token={Token}"));                _ticket = res.ticket;                ticket_exp = DateTime.Now.AddSeconds(res.expires_in);            }            return _ticket;        }            public class DDConfigData    {        public string TimeStamp;        public string NonceStr;        public string Signature;        public string Url;        public DDConfigData(string url = "")        {//参数生成以后，直接计算结果            Url = url;            NonceStr = Guid.NewGuid().ToString("N").Substring(0, 16);            TimeStamp = Convert.ToInt64((DateTime.Now - new DateTime(1970, 1, 1, 0, 0, 0, 0)).TotalSeconds).ToString();            var data = $"jsapi_ticket={DDHelper.GetTicket()}&noncestr={NonceStr}&timestamp={TimeStamp}&url={url}";            Console.WriteLine(data);            Signature = General.SHA1(data).ToLower();        }    }

DDHelper.GetToken()，定时任务，用于access_token有效期刷新，需要手动触发一次(比如放到Startup.cs)：

        public static void GetToken()        {            //后台任务无限刷新Token            Task.Run(() =>            {                while (true)                {                    try                    {                        string res = ApiGet($"https://oapi.dingtalk.com/gettoken?appkey={AppKey}&appsecret={AppSecret}");                        Token = JsonConvert.DeserializeObject(res).access_token;                        Thread.Sleep(600000);                    }                    catch (Exception ex)                    {                        Console.WriteLine("GETTOKEN ERROR: " + ex.ToString());                        GetToken();                        break;                    }                }            });        }

DDHelper剩余部分

        public static string ApiGet(string url)        {            using WebClient client = new WebClient();            try            {                string res = client.DownloadString(url);                Console.WriteLine($"【APIGET:\r\n{url}\r\nRESULT:\t{res}】");                return res;            }            catch (Exception) { throw; }        }        public static string ApiPost(string url, string content)        {            using WebClient client = new WebClient();            client.Headers["Content-Type"] = "application/json;charset=utf8";            string res =                 Encoding.UTF8.GetString(client.UploadData(url, Encoding.UTF8.GetBytes(content)));            Console.WriteLine($"【APIPOST:\r\n{url}\r\n{content}\r\nRESULT:\t{res}】");            return res;        }

首页做微调，识别不同浏览器并调用不同视图进行渲染

        public async Task Index()        {            WxUser user = General.GetUser(HttpContext);            if (General.Users.Count(u => u.Openid == user?.Openid) == 0 &&                HttpContext.User.Identity.IsAuthenticated)            {                //用户登录状态还在，但用户列表里不存在该用户，直接登出并刷新                //原因是demo环境用户列表没有做持久化+开发环境用户状态未清空，                //正式环境不会出现这种问题。                await HttpContext.SignOutAsync();                return RedirectToAction("Index");            }            ViewBag.User = user;            switch (General.UA(Request.Headers["User-Agent"]))            {                case UserAgents.Dingtalk:                    return View("IndexDingtalk");                case UserAgents.Wechat:                    return View("IndexWx");                default:                    return Content("BROWSER_NOT_SUPPORTED");            }        }

Action - DDAuth，作为接口使用，前端页面调用后，通过钉钉接口获取用户信息，并在成功后自动登录。

        public async TaskDDAuth(string code = "")        {            DDUser user = DDHelper.GetUserInfo(code);            if (user.userid is null)            {                return Content("登录失败");            }            var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);            WxUser wxuser = user.WxUser;            identity.AddClaim(new Claim(ClaimTypes.Sid, wxuser.Openid));            await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(identity)).ConfigureAwait(false);            General.Users.Add(wxuser);            return Content("succ");        }

Action - DDConfig，mime类型为text/javascript，验证用户登录状态，生成dd.config参数并返回dd.config配置js到前端。

        public ContentResult DDConfig(string url)        {            ContentResult js = new ContentResult            {                ContentType = "text/javascript"            };            if (HttpContext.User.Identity.IsAuthenticated)            {                //string url = Request.Headers["Referer"].FirstOrDefault();                DDConfigData config = new DDConfigData(url);                Console.WriteLine(JsonConvert.SerializeObject(config));                js.Content = "dd.config({" +$"    agentId: '{DDHelper.AgentId}'," +$"    corpId: '{DDHelper.CorpId}'," +$"    timeStamp: '{config.TimeStamp}'," +$"    nonceStr: '{config.NonceStr}'," +$"    signature: '{config.Signature}'," +"    type: 0," +"    jsApiList: [ 'device.geolocation.get' ]" +"});";            }            else            {                js.Content = "var result='BAD_REQUEST.'";            }            return js;        }

前端部分和微信WEB应用几乎一样

    <script>        var words=@Html.Raw(JsonConvert.SerializeObject(General.Words))        $.getScript("/Home/DDConfig?url="+encodeURIComponent(window.location.href));        dd.ready(function () {            if ('@(login?"Y":"N")' == 'N')            {                dd.runtime.permission.requestAuthCode({                    corpId: '@DDHelper.CorpId',                    onSuccess: function (result) {                        $.get("/Home/DDAuth?code=" + result.code, function (e) {                            if (e == "succ") {                                window.location.reload();                            }                         });                    },                    onFail: function (err) {                    }                });}        });        dd.error(function (error) {        });        var userlist =@Html.Raw(JsonConvert.SerializeObject(General.Users));        function getusers() {            $.get("/Home/Nearby", function (e) {                $("#users li").remove();                $.each(e, function (i, val) {                    $("#users").append('

' + '
' + ' ' + ' + val.nickname + '">' + ' ' + '
' + '
' + '
'
+ val.nickname + ' (' + val.distance + ')' + '

'
+ words[val.message] + '' + '
' + '
'); }); }); } function upload(msg) { dd.device.geolocation.get({ targetAccuracy: 200, coordinate: 0, withReGeocode: Boolean, useCache: false, onSuccess: function (res) { $.post("/Home/Upload", { X: res.latitude, Y: res.longitude, Message: msg }, function (e) { if (e == "succ") { window.location.reload(); } }); }, onFail: function (err) { dd.device.notification.alert({ message: JSON.stringify(err), title: "UPLOAD ERROR", buttonName: "OK", onSuccess: function () { }, onFail: function (err) { } }); } }); } getusers();script> 最终效果钉钉版：

02cb768a13ee109f6837862729ba6280.png
微信版：
————————————————
版权声明：本文为CSDN博主「宋梦寒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42527178/article/details/112205479

开发环境

Chrome Latest Version
iOS钉钉最新版、Android钉钉开发最新版
其实我一直想实现电脑Chrome可以调试手机内部APP，苦于尝试多次没有成功，所以还是电脑和手机同时测试，为了开发时间，只能先委屈一下自己了。因为舒适的测试环境也是开发的一个重要先决条件。

开发目的

企业微应用。
产品需求是在手机端钉钉上开发一个微应用，用来给公司员工填写反馈信息。
产品要求nickname是通过钉钉接口获取用户的昵称，获取之后不允许用户修改。这便涉及到钉钉的接口用需要鉴权的dd.config。
目的具体至实现钉钉企业微应用的鉴权，获取简单的用户信息，顺便提一下免登陆。
看完页面图会发现，这个需求简直算是前端开发里面最简单的需求了吧。实际上也是很简单，如果不是去第一次开发钉钉微应用的话。哈哈哈哈哈哈哈哈哈。。。。。

开发进度

页面布局、样式按下不表。
页面需要后端人员接进钉钉页面，即进度从打开钉钉微应用能够进来这个页面开始。

开发思路

首先，借用公司的agentId和微应用的url（一般由你司企业钉钉管理员提供）通过后台提供的API接口获取到实时的鉴权信息（agentId，corpId，timeStamp，nonceStr，signature）；
然后，用这个鉴权信息区配置钉钉api接口的dd.config，然后去操作钉钉部分需要安全鉴定的api;
之后，用钉钉api的biz.user.get获取用户信息；
（题外）免登需要dd.runtime.permission.requestAuthCode先获取authCode，然后去请求后台提供的API，由后台返回更加安全的用户信息；
最后，拿到用户信息之后，将nickname赋值进输入框，然后提交给后台即可。

嘿嘿，借用官方爸爸的微应用开发思路图，真的很一目了然，从五个鉴权信息开始都是前端的操作了哦。

DEMO

GITHUB

开发步骤

第一步，这个地方如果当做一般的数据请求来看，没有什么要说的，用jquery或者zepto的ajax请求都可以很快速实现。就说一下我在这个踩的坑，我在使用ajax异步请求的时候，忽略了异步加载然而同步加载不停止的问题。深入这个话题我也还需要去学去实践，所以只是简单说明我的问题，后面会提供链接去深入学习。下面的代码，由于我没实现手机电脑联调，所以只能退而其次用alert测试，见谅。js在加载的时候，会先全部同步顺序加载，但是ajax请求不会影响同步加载，因而，会按照123的alert弹出，而非顺序弹出312。由于的我浅薄理解，导致我后面还没拿到ajax请求到的_config，就开始执行函数DDConfig(_config)配置钉钉，所以一直不弹出任何弹窗。这个问题我开始解决的方案是将这段ajax单独放在一个script标签里面，最先引入，然后再配置钉钉鉴权信息，这个在Android上测试时正常的，然而只是侥幸，iOS不买这个账。所以使用ajax的complete函数，在这里面执行DDConfig(_config)，可看源代码。
```
var _config = null; // 定义全局变量_config，初始值为null，用来接收API获取到的签名信息
var getConfig = $.ajax({
    type: 'POST',
    url: '获取企业签名的API，后台提供',
    data: {
        agentId: 109243825,
        url: '这是你开发微应用页面的线上地址，一般是由钉钉管理员配置的。',
    },
    dataType: 'json',
    success: function(data){
        console.log('---success-post-dingInfo---');
        if(data.status){
            _config = data.data;
            alert('3. API获取签名信息：'+JSON.stringify(_config));
            // 开始配置钉钉
            DDConfig(_config);
        }else{
            alert('请求信息出错');
        }
    },
    error: function(data){
        console.log(---error-post-dingInfo---);
    }
});
alert('1. API请求开始：'+JSON.stringify(getConfig));
alert('2. 全局输出_config：'+JSON.stringify(_config));
```
第二步，这里官方给出很详细的步骤钉钉移动jsapi开发，你需要使用的api放进dd.config的jsApiList里面即可。其实钉钉的jsapi思路是这样的。引入dingtalk.js（官方文档有提供）这个js会给你提供一个全局变量dd，你可以在Chrome的控制台打印出来看看是个什么东西，里面可以识别钉钉版本，手机系统，以及提供一个个api。钉钉移动jsapi里面介绍所有的api，分为无需鉴权api和需要鉴权api，无需鉴权api可以再引入dingtalk.js之后全局使用；鉴权api就需要走后端接口以保证安全性，且鉴权通过才可以使用这部分api。思路就是这样。
- 问题1：如果你发现你的dd.ready/dd.error都没执行，那可能是我上一步遇见的问题，即没开始配置dd.config，却执行了dd.ready和dd.error，因为dd是全局变量，不受函数和异步限制，所以写法上面没有错，但是就是什么都不反应，很痛苦。还有一个很粗暴的方法去review你的代码，那就是清空js代码，不做ajax请求，直接开始钉钉鉴权，即dd.config、dd.ready、dd.error，这个时候你可以先用固定的鉴权信息（agentId，corpId，timeStamp，nonceStr，signature）去配置，这个时候因为不是实时的鉴权信息，所以肯定要直接进dd.error来提示校验失败，那么你就应该知道怎么一点点去排查你的错误了。
- 问题2：如果你发现dd.error被执行了，先恭喜你一下，至少你进入钉钉的api了，哈哈哈哈哈哈哈哈。。。
  - 这个时候报错，说明你的dd.config里面有信息是错误的。那就去一个个打印出来检查。
  - 还有可能是上一步中的url的问题，比如说我的微应用的链接是https://open-doc.dingtalk.com/；那么url也必须完全一样，注意https也不能错的哦。可看前辈们的问题集锦钉钉开放平台“常见问题常见问题常见问题
第三步，应该不用说了，只要鉴权通过，就可以直接用钉钉api获取用户的信息，只是这个信息很简单，不怎么涉及安全问题。可看源码。
第四步，题外话。这个免登，是需要你在通过钉钉api拿到authcode之后再去找后端API请求，告诉他你需要免登获取更多用户的信息钉钉免登，这些都是涉及到安全性的了，所有涉及安全的问题都要走后端API。这个我也没做，暂时还没用到，以后若是开发有坑还会继续说。钉钉的生态说不上很稳定，但是由于公司用的多，所以很多东西不管是官方还是前辈们都写的有详细文档和代码，可以多搜搜。
提交操作，可看源码。

最最最坑

这次最大的坑是我对异步同步的理解不够到位；
说实话，所有的坑，都还是源于基础。开篇即说“经济基础决定上层建筑”，尤其是技术上，基础决定你未来的路可以走多宽多远多一马平川而不至于坑坑洼洼。

码农公寓

钉钉微应用的开发——主前端

钉钉微应用的开发——主前端

经济基础决定上层建筑。

开发环境

开发目的

开发进度

开发思路

DEMO

开发步骤

最最最坑

推荐知识

码农公寓

钉钉微应用的开发——主前端

经济基础决定上层建筑。

开发环境

开发目的

开发进度

开发思路

DEMO

开发步骤

最最最坑

推荐知识

相关文章