vue 钉钉授权第三方WEB网站扫码登录功能

文章目录

1. 钉钉扫码登录开发文档
2. 注册钉钉账号（已经注册了直接跳过）
3 获取APPID和appSecret
- 3.1 登录钉钉开发者后台
- 3.2 创建应用
4. vue实现扫码登录
- 4.1 html 代码
- 4.2 js代码
- 4.3 操作扫码效果
5. 获取钉钉的用户信息
- 5.1 通过后端提供的接口获取信息
- 5.2 通过前端调用钉钉的API查询信息

1. 钉钉扫码登录开发文档

首先阅读钉钉官方的开发文档，扫码登录其实用的是官方文档描述的第二种方式，即将钉钉登录二维码内嵌到自己页面中，用户使用钉钉扫码登录第三方网站，网站可以拿到钉钉的用户信息。

钉钉扫码登录比微信扫码登录坑少很多。可以看下我的微信扫码登录实现 vue 微信扫码登录嵌入方式及开发踩的坑点

2. 注册钉钉账号（已经注册了直接跳过）

需要一个注册钉钉的账号，用来获取APPID

3 获取APPID和appSecret

3.1 登录钉钉开发者后台

点击登录后台：开发者后台
注意：只有管理员和子管理员可登录开发者后台。否则你会看下如果提示没有权限需要去联系你的上级给你开通

3.2 创建应用

①：在开发者后台页面应用开发，选择企业内部开发，然后单击创建应用。

②：在弹出的创建应用页面中填写基本信息，然后单击确定创建。

应用类型：选择H5微应用。
开发方式：选择企业自助开发。
还需要你要登录的第三方网站的网址，以及一张网站logo图片的地址。

③：应用创建完成后，在基础信息页面，复制应用的AppKey和AppSecret备用。先放着。appSecret后面拿取钉钉的用户信息会用到

4. vue实现扫码登录

4.1 html 代码

创建一个div，设置id为 login_container

<template><div id="app"><div id="login_container"></div></div>
</template>

4.2 js代码

<script>
export default {name: "App",components: {},data() {return {appid: "dingoajfp9uov6uonxxxxxx",//自己申请的appidappsecret:"V6m2FeU_Ex0HMKmCfA5hV2edZCO_MMsWfWP8ZoCdH4-cTTqkoOIElwhxxxxxxxx",//自己申请的appsecretredirectUrl: "http://192.168.1.76:8080/#/login",//这里是扫码成功后跳转的回调地址dingCodeConfig: {id: "login_container",//匹配到设置的html的idstyle: "border:none;background-color:#FFFFFF;",width: "400",height: "400",},//生成二维码样式的配置};},computed: {getRedirectUrl() {return encodeURIComponent(this.redirectUrl);},getAuthUrl() {return `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`;},getGoto() {return encodeURIComponent(this.getAuthUrl);},getDingCodeConfig() {return { ...this.dingCodeConfig, goto: this.getGoto };},},created() {// 初始化钉钉的二维码加载this.initDingJs();},mounted() {this.addDingListener();this.initDingLogin();},methods: {initDingJs() {!(function (window, document) {function d(a) {var e,c = document.createElement("iframe"),d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto;(d += a.style ? "&style=" + encodeURIComponent(a.style) : ""),(d += a.href ? "&href=" + a.href : ""),(c.src = d),(c.frameBorder = "0"),(c.allowTransparency = "true"),(c.scrolling = "no"),(c.width = a.width ? a.width + "px" : "400px"),(c.height = a.height ? a.height + "px" : "400px"),(e = document.getElementById(a.id)),(e.innerHTML = ""),e.appendChild(c);}window.DDLogin = d;})(window, document);},addDingListener() {let self = this;let handleLoginTmpCode = (loginTmpCode) => {window.location.href =self.getAuthUrl + `&loginTmpCode=${loginTmpCode}`;};let handleMessage = (event) => {if (event.origin == "https://login.dingtalk.com") {handleLoginTmpCode(event.data);}};if (typeof window.addEventListener != "undefined") {window.addEventListener("message", handleMessage, false);} else if (typeof window.attachEvent != "undefined") {window.attachEvent("onmessage", handleMessage);}},initDingLogin() {window.DDLogin(this.getDingCodeConfig);},},async mounted() {if (this.$route.query.code) {let code = this.$route.query.codeconsole.log("扫码登录成功后请求后返回的code：" + code) //if (code !== null) {// 执行下一步操作}}}
};
</script>

4.3 操作扫码效果

电脑端url的变化：可以看到扫码之前是 http://192.168.1.76:8080/#/login 的地址（默认访问登录页面的地址）
回调地址设置的地址：http://192.168.1.76:8080/#/login。
通过扫码成功后，返回的回调地址
http://192.168.1.76:8080/#/login?code=d06e0c4255c93213ab425aac556e563a&state=STATE（返回了code和state参数键值回来）

手机钉钉扫码确认截图

5. 获取钉钉的用户信息

5.1 通过后端提供的接口获取信息

一般情况走到这一步了，可以直接把回调返回的 code 给后端，后端去写接口返回钉钉的用户信息。比下(我们后端提供的)：

根据钉钉回调返回的code，调用后端的接口拿取钉钉的用户信息。

async mounted() {if (this.$route.query.code) {let code = this.$route.query.codeconsole.log('扫码登录成功后请求后返回的code：' + code)let res = await base.thirdPartyLoginCheck({code,linkType: 1})console.log(res)}
}

5.2 通过前端调用钉钉的API查询信息

这种情况就是前端去调用api，然后获取钉钉用户信息，调用的api比较繁琐，建议还是让后端提供接口，当前这种也是可以的。下面是具体的步骤

1.get请求的方式，请求这个地址。

get 请求方式
https://oapi.dingtalk.com/sns/gettoken?appid=APPID&appsecret=APPSECRET

2.请求成功时应该返回如下，access_token 的值放好，我们会拿它接着获取永久授权码。还记得我们扫码成功后，跳转登录到第三方网站的url吗，它后面追加了临时授权码code，这个code和access_token 一起就可以获得永久的授权码了。

{"errcode": 0,"access_token": "7155d0dca6fa3a489462e4407699c339","errmsg": "ok"
}

3.获取永久授权码。以post请求，请求这个地址

post 请求方式
https://oapi.dingtalk.com/sns/get_persistent_code?access_token=ACCESS_TOKEN
参数如下：
{
“tmp_auth_code”: “9282c00fed0a3e2a88fea069a9fe5be4”
}

请求成功返回如下，拿到tmp_auth_code 的值，就是追加到url上的code参数的值。请求成功返回如下

{"errcode": 0,"errmsg": "ok","unionid": "0wiiEFPtAF09FWcBg2iiygPwiEiE","openid": "EmuvN1jpiPwiipLtiSHBUmvcwiEiE" ,"persistent_code": "oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX"
}

请求成功返回如下，拿到openid和persistent_code的值，接下来要用来去获取用户授权的SNS_TOKEN

4.获取用户授权的SNS_TOKEN。以post请求，请求这个地址，这个 ACCESS_TOKEN 第一步的时候已经取到过了

post 请求方式
https://oapi.dingtalk.com/sns/get_sns_token?access_token=ACCESS_TOKEN
参数如下：
{
“openid”: “EmuvN1jpiPwiipLtiSHBUmvcwiEiE”,
“persistent_code”: “oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX”
}

请求成功返回如下，拿到 sns_token

{"errcode": 0,"errmsg": "ok","sns_token": "ea1e12af6ac23a2080178bb9a452b312","expires_in": 7200
}

5.最后一步了，用获取到的 sns_token 去拿用户信息，鸡冻~

get 方式请求
https://oapi.dingtalk.com/sns/getuserinfo?sns_token=SNS_TOKEN

请求成功返回如下，拿到用户信息

{"errcode": 0,"errmsg": "ok","user_info":{"nike":"张三","unionid":".......................","dingId":".......................","openid":".......................","......":"....."}
}