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

I will.874

已于 2024-02-03 18:05:15 修改

阅读量936

点赞数 1

文章标签：钉钉

于 2024-02-03 17:59:09 首次发布

本文链接：https://blog.csdn.net/qq_60754128/article/details/136011490

版权

为实验室做的钉钉智能机器人后台管理系统，最近在使用 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") || "";
}