1：准备工作

        1.1：进入钉钉开放平台创建开发者应用。应用创建和类型介绍，参考下方。

应用类型介绍 - 钉钉开放平台 (dingtalk.com)

应用能力介绍 - 钉钉开放平台 (dingtalk.com)

扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com)

        1.2：创建好的应用，给对应权限。

      我开通了个人权限和通讯录管理所有权限，建议是全部员工，因为这个权限只能api的权限，不会影响钉钉的权限

2:扫码登录具体实现和效果

2.1 前端和后端代码展示（前端不是很会）

工作流程介绍

用户扫码-->授权之后重定向给钉钉处理返回一个code--->钉钉处理之后执行回调域名并且携带code-->调用getBycodeResponse接口返回unionid --> 然后调用scanCodeLogin 登录接口---->成功之后进入首页。

先在 index.html 内引入一段脚本：

再编写如下代码：
const redirect_uri = 'http://192.168.0.137:3000/';
onMounted(()=>{
const url = encodeURIComponent(redirect_uri);
const goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + url);
const obj = window.DDLogin({
id:"ddLogin",
goto,
style: "border: none",
width : "350",
height: "350"
});
});
const handleMessage = function (event: any) {
const origin = event.origin;
if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
// 下面这个连接会在钉钉那边处理完毕之后直接让浏览器的URL变成 redirect_uri
location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ encodeURIComponent(redirect_uri) + '&loginTmpCode=' + event.data;
}
};收起链接预览无权限https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingtalk.com无权限https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingtalk.com

@ApiOperation(value = "根据sns临时授权码获取用户信息", notes = "根据sns临时授权码获取用户信息") @RequestMapping(value = "/getBycodeResponse", method = RequestMethod.GET) public OapiSnsGetuserinfoBycodeResponse getBycodeResponse(@RequestParam(value = "authCode")String authCode) throws JsonProcessingException, ApiException {     OapiSnsGetuserinfoBycodeResponse bycodeResponse = sampleUtlis.getBycodeResponse(authCode, AppKey, appSecret);     return  bycodeResponse;  }

/**  * 退出登录  * @return  */ @ApiOperation(value = "扫码登录验证", notes = "扫码登录验证") @GetMapping(value = "/scanCodeLogin") public Result