本文链接： https://blog.csdn.net/cxh6863/article/details/102537649

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

流程图

在这里插入图片描述

实现流程

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

钉钉里微应用免登录的实现过程

流程图