自己的微应用嵌入到钉钉里,怎样实现使用钉钉账号直接登录到自己的系统,从而省去总是使用账户密码的方式登录,这样方便用户快捷登录。

流程图

java对接钉钉获取用户标识 钉钉获取corpid_钉钉

实现流程

1、引入dingtalk.open.js

<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.8.5/dingtalk.open.js"></script>

java对接钉钉获取用户标识 钉钉获取corpid_java对接钉钉获取用户标识_02

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

返回值示例:

java对接钉钉获取用户标识 钉钉获取corpid_微应用_03


Vue代码实现:

getToken().then(ResponseToken=>{
      authToken=ResponseToken.access_token
})

其中getToken来自于:

在user.js里写对应路径,封装请求地址

java对接钉钉获取用户标识 钉钉获取corpid_钉钉_04


在当前页面引入这个封装请求地址的方法

java对接钉钉获取用户标识 钉钉获取corpid_java对接钉钉获取用户标识_05

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里写对应路径,封装请求地址

java对接钉钉获取用户标识 钉钉获取corpid_微应用_06


在当前页面引入这个封装请求地址的方法

java对接钉钉获取用户标识 钉钉获取corpid_免登录_07

5、通过获取到的钉钉的userid登录

6、登录成功后直接进入系统页面

java对接钉钉获取用户标识 钉钉获取corpid_java对接钉钉获取用户标识_08


注意:这里的vm其实就是this,但是由于域的不同,在调用完钉钉接口后就不能再找到this了,所以在调用钉钉接口前先将this引入进来,声明变量vm代表this,这样在里边就可以找到this了。

7、由于前端直接访问https://oapi.dingtalk.com/这样的地址会出现跨域问题,在本地测试和发布分别用不同的方式解决跨域的问题

1)本地访问跨域的解决方法

在vue.config.js文件中进行配置

java对接钉钉获取用户标识 钉钉获取corpid_跨域_09

(2)发布后访问跨域的解决方法

发布后的使用Nginx解决跨域

修改nginx.conf文件

java对接钉钉获取用户标识 钉钉获取corpid_钉钉_10


配置如下:

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”与我们代码中访问路径要对应。