第三方平台接入钉钉扫码登录功能

第三方平台接入钉钉扫码登录功能

• 钉钉开放平台
• 首先肯定是需要登录到开发者后台了，这个就不多说了，这里主要说一下如何接入钉钉扫码登录功能
• 最近也亲身接入过一下，这里总结下遇到的问题

1. 引入钉钉 JS-SDK.js

<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>

2. 在HTML中添加包裹容器元素

<div id="self_defined_element" class="self-defined-classname"></div>

• 注意，需要设置这个元素的宽高

3. 在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。

window.DTFrameLogin(
	{
		id: 'self_defined_element',
        width: 300,
        height: 300,
	},
	{
		redirect_url: encodeURIComponent('http://www.aaaaa.com/a/b/'), // 登录成功后的回调地址
        client_id: 'dingxxxxxxxxxxxx', // 服务端给你
        scope: 'openid', // 这里一般是openid
        response_type: 'code', 
        state: 'xxxxxxxxx',
        prompt: 'consent',
	},
	(loginResult) => {
        const {redirectUrl, authCode, state} = loginResult;
        // 这里可以直接进行重定向
        window.location.href = redirectUrl;
        // 也可以在不跳转页面的情况下，使用code进行授权
        console.log(authCode);
    },
    (errorMsg) => {
        // 这里一般需要展示登录失败的具体原因
        alert(`Login Error: ${errorMsg}`);
    },
);

interface IDTLoginLoginParams {
  redirect_uri: string;     // 必传，注意url需要encode
  response_type: string;    // 必传，值固定为code
  client_id: string;        // 必传
  scope: string;            // 必传，如果值为openid+corpid，则下面的org_type和corpId参数必传，否则无法成功登录
  prompt: string;           // 必传，值为consent。
  state?: string;           // 选传
  org_type?: string;        // 选传，当scope值为openid+corpid时必传
  corpId?: string;          // 选传，当scope值为openid+corpid时必传
  exclusiveLogin?: string;  // 选传，如需生成专属组织专用二维码时，可指定为true，可以限制非组织帐号的扫码
  exclusiveCorpId?: string; // 选传，当exclusiveLogin为true时必传，指定专属组织的corpId
}

• 注意1. 这个地方最重要的就是这个redirect_url，首先这个地方的是扫码成功的重定向地址，但是这个地址域名必须和钉钉开发平台后面配置的域名要相同，否则不会报错，但是也不会跳转，这个地方一定要注意
• 注意2. 测试的时候可以用本地的http: 127.x.x.x这种地址，但是钉钉开发平台后面配置的域名也要是这个，不能使用localhost

4. 处理扫码成功后用authCode给到服务端进行接下来的操作了

5. 个人总结

• 这种方式你会发现生成一个二维码，然后扫码成功后会重定向到你的地址，上面携带的authCode，这个authCode需要给到服务端，此时并没有在我们的平台上成功的，所以扫码跳转回来的地址
  还是需要根据地址栏的参数做接下来的逻辑判断
• 最后这里其实还有另一个方式，这里是内嵌生成二维码的，还有一种是直接跳转到钉钉的扫码页面，这个地方可以根据自己的需求来选择
• 直接跳转到钉钉的扫码页面

window.location.replace(`https://login.dingtalk.com/login/qrcode.htm?redirect_uri=${encodeURIComponent('http:xxxxxxxxx')}&client_id=dingoaxxxxxxx&scope=openid&response_type=code&state=xxxxxx&prompt=consent`);