如何实现钉钉实现扫码登录

为实验室做的钉钉智能机器人后台管理系统,最近在使用 React+TS 技术进行重构,重构时,取消了原本的账号密码登录,扫码登录与账号密码登录的目的都是为了获取用户Token,只不过是过程不一样,取而代之的便是扫码登录,具体如何实现扫码登录功能前的配置相关,钉钉平台比较重要的一点就是需要在后台配置相关的重定向地址,这个需要前端来兴提供,具体可以参考官方文档

参考文档:实现登录第三方网站 - 钉钉开放平台 (dingtalk.com)

可以先按照官方文档进行一些配置,配置好后台以后,以下为前端主要逻辑:
在这里插入图片描述
这个是一个登录按钮,里边内嵌了一个a链接,链接的重定向地址为扫码登录成功后自己项目中的一个页面,重定向地址主要看自己需求,进行相关的配置

重定向地址后会拼接一个关键的字段authCode ,前端这边需要拿到这个字段中的信息,发给后端,然后后端返回该用户对应的Token,扫码登录的结果便已经达到,当然这个字段的值是临时的,只会在短时间内有效

前端拿到Token后会给本地存储一份,在二次封装的axios的请求头中,需要携带相关的Token,如下是我的二次封装的axios

if (localStorage.getItem("ddToken")) {
    console.log("Bearer" + localStorage.getItem("ddToken"));
    config.headers.Authorization =
        "Bearer" + " " + localStorage.getItem("ddToken") || "";
}

这样以来,每次发送的请求都会带上相关的Token,与账号密码登录效果一致,扫码登录的功能已实现

你可能感兴趣的:(钉钉)