自己的微应用嵌入到钉钉里,怎样实现使用钉钉账号直接登录到自己的系统,从而省去总是使用账户密码的方式登录,这样方便用户快捷登录。
流程图
实现流程
1、引入dingtalk.open.js
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.8.5/dingtalk.open.js"></script>
2、获取免登授权码code
dd.ready(function() {
dd.runtime.permission.requestAuthCode({
corpId: _config.corpId, // 企业id
onSuccess: function (info) {
code = info.code // 通过该免登授权码可以获取用户身份
}});
});
这里的企业id(corpId)是公司注册钉钉的id,从钉钉后台管理员可查看到
3、通过appkey和appsecret获取access_token
其中appkey和appsecret可以从钉钉管理员后台查看,每个微应用都有appkey和appsecret
appkey是应用的唯一标识key
appsecret是应用的秘钥
请求地址:
https://oapi.dingtalk.com/gettoken?corpid=XXX&corpsecret=XXX
返回值示例:
Vue代码实现:
getToken().then(ResponseToken=>{
authToken=ResponseToken.access_token
})
其中getToken来自于:
在user.js里写对应路径,封装请求地址
在当前页面引入这个封装请求地址的方法
4、通过免登授权码code和access_token获取用户的userid
请求地址
https://oapi.dingtalk.com//user/getuserinfo?access_token=XXX&code=XXX
Vue代码实现
getDingUser(authToken,authCode).then(ResponseDingUser=>{
authDingId=ResponseDingUser.userid
})
其中getDingUser来自于:
在user.js里写对应路径,封装请求地址
在当前页面引入这个封装请求地址的方法
5、通过获取到的钉钉的userid登录
6、登录成功后直接进入系统页面
注意:这里的vm其实就是this,但是由于域的不同,在调用完钉钉接口后就不能再找到this了,所以在调用钉钉接口前先将this引入进来,声明变量vm代表this,这样在里边就可以找到this了。
7、由于前端直接访问https://oapi.dingtalk.com/这样的地址会出现跨域问题,在本地测试和发布分别用不同的方式解决跨域的问题
1)本地访问跨域的解决方法
在vue.config.js文件中进行配置
(2)发布后访问跨域的解决方法
发布后的使用Nginx解决跨域
修改nginx.conf文件
配置如下:
location /gettoken/ {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass https://oapi.dingtalk.com;
}
location /user/getuserinfo/ {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass https://oapi.dingtalk.com;
}
注意这里的“/gettoken/”和“/user/getuserinfo”与我们代码中访问路径要对应。