钉钉第三方企业微应用开发与部署（三）

介绍

本文介绍基于钉钉应用开发第三方企业微应用（网页）的前端，可以对照官方文档地址

钉钉应用登录

如果你不需要获取用户的手机号等敏感信息，那么可以使用静默登录，根据这个授权码code调用钉钉服务端api获取用户信息。静默登录获取的授权码和授权登录获取的授权码不能混用，调用根据授权码获取用户信息的钉钉api接口也是不一样的。

<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.46/dingtalk.open.js"></script>
<script>
// 通过钉钉提供的jsapi可以直接调用获取，不需要dd.config的配置
dd.requestAuthCode({
    corpId: corpId,
    onSuccess: function (result) {
        var code = result.code;
    }
});
</script>

如果需要获取用户的手机号登敏感信息，就必须使用授权登录。钉钉授权登录可以使用钉钉的oauth登录。oauth登录的redirect_uri必须要使用钉钉安全域名，且redirect_uri上不能携带参数，授权码只会回调到钉钉安全域名上。具体的申请流程参考钉钉第三方企业微应用开发与部署#申请钉钉安全域名

授权登录

为了方便展示使用js+html编写，还可以使用 npm install dingtalk-jsapi --save 安装dingtalk

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.46/dingtalk.open.js"></script>
<script>
    const domain = "****填写你的应用后端地址****";
    const dingDomain = "******填写你的钉钉安全域名*******";


    const queryString = new URLSearchParams(new URL(location.href).search);
    let corpId = queryString.get('corpId');
    const authCode = queryString.get('authCode');
    const state = queryString.get('state');
    if (state && !corpId) {
      corpId = state;
    }
    const userInfo = localStorage.getItem('userInfo');

    
    getApiInfo();
    if (authCode) {
        dingLogin();
    } 

    

   function getApiInfo() {
      let that = this
      $.ajax({
        url: `${domain}/api/public/ding/jsapi?corpId=${corpId}&url=${location.href}`,
        method: "GET",
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          if (!authCode) {
            const url =
                `https://login.dingtalk.com/oauth2/auth?redirect_uri=${dingDomain}/&response_type=code&client_id=${res.data.data.clientId}&scope=openid&state=${res.data.data.corpId}&prompt=consent`;
            location.href=url;
          }

          dd.config({
            appId: res.data.data.appId, // 必填，授权应用的agentid
            agentId: res.data.data.appId, // 必填，授权应用的agentid
            corpId: res.data.data.corpId, //必填，企业ID
            timeStamp: res.data.data.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，自定义固定字符串。
            signature: res.data.data.signature, // 必填，签名
            type: 0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
            jsApiList: [] // 必填，需要使用的jsapi列表，注意：不要带dd。
          });
          dd.error(function (err) {
            console.log('dd error: ' + JSON.stringify(err));
          }) //该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
        },
        fail: function (err) { // 失败回调（网络错误或超时）
          
        },
      })
    }


   function dingLogin() {
      let that = this;
      $.ajax({
        url: `${domain}/api/public/ding/login?code=${authCode}&corpId=${corpId}`,
        type: "POST",
        dataType: "json",
        success: function (res) {
          if (res.data.code === 200) {
            localStorage.setItem('userInfo', JSON.stringify(res.data.data);
          } 
        },
        fail: function (err) { // 失败回调
        },
      })
    }


    function isDingTalkEnvironment() {
        const userAgent = navigator.userAgent.toLowerCase();
        return /dingtalk/.test(userAgent);
    }

域名重定向

由于钉钉安全域名和应用后端域名不一致，前端保存的用户信息一般是需要保存到应用后端域名下的localStorage或者cookie，而发布的微应用首页地址必须是钉钉安全域名的url，所以需要增加从钉钉安全域名到应用后端域名的重定向，以nginx配置为例：

server {
    listen 80; #这里由于钉钉安全域名，一般是80
    server_name *******应用后端服务器ip****;
    return 302 *****应用后端域名******$request_uri;  
}

接入监控中心

在微应用需要上架应用市场之前，需要接入监控中心，将下面的应用id替换成你得微应用id，复制粘贴到微应用<header></header>标签中。当然你可以按照钉钉第三方企业微应用开发与部署#应用上架#2来处理

		<meta name="wpk-bid" content="dta_2_应用id">
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
				CSS.supports('top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')


			var isDingtalk = navigator && /DingTalk/.test(navigator.userAgent);
			var isProductEnv = window && window.location && window.location.host && window.location.host.indexOf('127.0.0.1') ===
				-1 && window.location.host.indexOf('localhost') === -1 && window.location.host.indexOf('192.168.') === -1
			if (isProductEnv) {
				!(function(c, i, e, b) {
					var h = i.createElement("script");
					var f = i.getElementsByTagName("script")[0];
					h.type = "text/javascript";
					h.crossorigin = true;
					h.onload = function() {
						c[b] || (c[b] = new c.wpkReporter({
							bid: "dta_2_应用id"
						}));
						c[b].installAll()
					};
					f.parentNode.insertBefore(h, f);
					h.src = e
				})(window, document, "https://g.alicdn.com/woodpeckerx/jssdk??wpkReporter.js", "__wpk");
			}
		</script>