JustAuth实现多个钉钉扫码登录

最新推荐文章于 2025-03-28 19:07:49 发布

myskybeyond

最新推荐文章于 2025-03-28 19:07:49 发布

阅读量1.5k

点赞数 35

分类专栏：工作分享文章标签：钉钉 java vue.js

本文链接：https://blog.csdn.net/jieyanqulaopo123/article/details/140296664

版权

工作分享专栏收录该内容

10 篇文章

订阅专栏

需求：

实现多个钉钉组织的用户绑定和扫码登录。

JustAuth框架实现钉钉扫码登录用到的dingTalk接口：

https://oapi.dingtalk.com/connect/qrconnect
https://oapi.dingtalk.com/connect/oauth2/sns_authorize
根据sns临时授权码获取用户信息 https://oapi.dingtalk.com/sns/getuserinfo_bycode
根据unionid获取用户userid https://oapi.dingtalk.com/topapi/user/getbyunionid
根据userid获取用户详情 https://oapi.dingtalk.com/topapi/v2/user/get

实现原理：

1. 加载多个钉钉组织的账号信息并缓存(appKey，appSecret，agentId)；

可参考RuoYi的ruoyi-common-social模块的实现，用一个map存储多个钉钉的配置信息；

public class SocialProperties {

    /**
     * 是否启用
     */
    private Boolean enabled;

    /**
     * 授权类型
     */
    private Map<String, SocialLoginConfigProperties> type;
    /**
     * 前端外网访问地址
     */
    private String address;

}

扩展：

钉钉可做到页面维护，入库保存，服务启动时可从数据库加载至缓存，有修改时更新缓存，类似下图：

登录应用系统绑定钉钉：

1. 钉钉扫码，二维码为“钉钉认证二维码”部分的内嵌二维码方式登录授权；
2. 授权成功后钉钉回调回调地址并追加code和state;
3. 拿到code后调用根据sns临时授权码获取用户信息；
4. 保存openId或unionId和userId的关系；

扫码登录应用系统：

1. 创建钉钉认证二维码见下文(钉钉认证二维码部分，2种方式都可以)；
2. 钉钉扫码后会追加code和state至回调地址；
3. 拿到code后调用根据sns临时授权码获取用户信息；
4. 比对用户信息的openId或unionId，匹配则登录成功跳转至应用系统首页，不匹配则跳转至登录页并做出失败提醒；

钉钉认证二维码：

使用钉钉提供的页面登录授权：

1. 构造认证请求：

AuthRequest authRequest = new AuthDingTalkRequest(AuthConfig.builder()
                .clientId("Client ID")
                .clientSecret("Client Secret")
                .redirectUri("应用回调地址")
                .build());

1. 生成授权地址：

String authorizeUrl = authRequest.authorize(AuthStateUtils.createState());

1. 访问授权地址：

这个链接我们可以直接后台重定向跳转，也可以返回到前端后，前端控制跳转。前端控制的好处就是，可以将第三方的授权页嵌入到iframe中，适配网站设计。

1. 效果图：

内嵌二维码方式登录授权：

1. 页面中引入钉钉扫码登录JSSDK

<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>

1. 在需要扫码登录的地方，调用如下方法：

<!-- STEP1：在HTML中添加包裹容器元素 -->
<div id="self_defined_element" class="self-defined-classname"></div>
<style>
    /* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
    .self-defined-classname {
        width: 300px;
        height: 300px;
    }
</style>
<script>
    // STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
    window.DTFrameLogin(
        {
            id: 'self_defined_element',
            width: 300,
            height: 300,
        },
        {
            redirect_uri: encodeURIComponent('http://www.aaaaa.com/a/b/'),
            client_id: 'dingxxxxxxxxxxxx',
            scope: 'openid',
            response_type: 'code',
            state: 'xxxxxxxxx',
            prompt: 'consent',
        },
        (loginResult) => {
            const {redirectUrl, authCode, state} = loginResult;
            // 这里可以直接进行重定向
            window.location.href = redirectUrl;
            // 也可以在不跳转页面的情况下，使用code进行授权
            console.log(authCode);
        },
        (errorMsg) => {
            // 这里一般需要展示登录失败的具体原因,可以使用toast等轻提示
            console.error(`errorMsg of errorCbk: ${errorMsg}`);
        },
    );
</script>

1. 参数说明((TypeScript语言描述))：

// ********************************************************************************
// window.DTFrameLogin方法定义
// ********************************************************************************
window.DTFrameLogin: (
  frameParams: IDTLoginFrameParams, // DOM包裹容器相关参数
  loginParams: IDTLoginLoginParams, // 统一登录参数
  successCbk: (result: IDTLoginSuccess) => void, // 登录成功后的回调函数
  errorCbk?: (errorMsg: string) => void,         // 登录失败后的回调函数
) => void;

// ********************************************************************************
// DOM包裹容器相关参数
// ********************************************************************************
// 注意！width与height参数只用于设置二维码iframe元素的尺寸，并不会影响包裹容器尺寸。
// 包裹容器的尺寸与样式需要接入方自己使用css设置
interface IDTLoginFrameParams {
  id: string;      // 必传，包裹容器元素ID，不带'#'
  width?: number;  // 选传，二维码iframe元素宽度，最小280，默认300
  height?: number; // 选传，二维码iframe元素高度，最小280，默认300
}

// ********************************************************************************
// 统一登录参数
// ********************************************************************************
// 参数意义与“拼接链接发起登录授权”的接入方式完全相同（缺少部分参数）
// 增加了isPre参数来设定运行环境
interface IDTLoginLoginParams {
  redirect_uri: string;     // 必传，注意url需要encode
  response_type: string;    // 必传，值固定为code
  client_id: string;        // 必传
  scope: string;            // 必传，如果值为openid+corpid，则下面的org_type和corpId参数必传，否则无法成功登录
  prompt: string;           // 必传，值为consent。
  state?: string;           // 选传
  org_type?: string;        // 选传，当scope值为openid+corpid时必传
  corpId?: string;          // 选传，当scope值为openid+corpid时必传
  exclusiveLogin?: string;  // 选传，如需生成专属组织专用二维码时，可指定为true，可以限制非组织帐号的扫码
  exclusiveCorpId?: string; // 选传，当exclusiveLogin为true时必传，指定专属组织的corpId
}

// ********************************************************************************
// 登录成功后返回的登录结果
// ********************************************************************************
interface IDTLoginSuccess {
  redirectUrl: string;   // 登录成功后的重定向地址，接入方可以直接使用该地址进行重定向
  authCode: string;      // 登录成功后获取到的authCode，接入方可直接进行认证，无需跳转页面
  state?: string;        // 登录成功后获取到的state
}

1. 效果图：

前端生成授权页面，可以自己放置到任何需要的地方，相比jssdk生成的比钉钉提供的授权要漂亮很多，再也没有蓝底的加持。

附内嵌二维码的源码(Vue3)：

<template>
  <div id="login_container"></div>
</template>

<script setup name="dingTalkAuthQrcode">
import { ref, onMounted } from "vue";
import { generateState } from "@/api/system/social/auth";

const props = defineProps({
  appKey: {
    type: String
  },
  redirectUrl: {
    type: String
  },
  appCode: {
    type: String
  }
});
const emits = defineEmits(["callback"]);
// 假设你已经有了钉钉的 appKey 和 appSecret
const appKey = props.appKey || "your dingtalk appKey";
const redirectUrl = props.redirectUrl || '从配置文件中读取';
const stateCode = ref(null);
const handleMessage = async (event) => {
  var origin = event.origin;
  if (origin === "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
    const loginTmpCode = event.data;
    //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了，generateState()生成了state
    const res = await generateState();
    if (res && res.code === 200) {
      stateCode.value = res.data;
    }
    // 使用代理避免跨域请求，代理了/connect
    const dingTalkForwardUrl = `/connect/connect/oauth2/sns_authorize?appid=${appKey}&response_type=code&scope=snsapi_login&state=` + stateCode.value + `&redirect_uri=${redirectUrl}` + "&loginTmpCode=" + loginTmpCode;
    // 模拟请求网页跳转
    const response = await fetch(dingTalkForwardUrl);
    // 解析网页302成功后的code 和 state
    const urlParams = new URLSearchParams(new URL(response.url).search);
    const code = urlParams.get("code");
    const state = urlParams.get("state");
    if (code && state) {
      emits("callback", { "code": code, "state": state });
    }
  }
};
// 在组件挂载后调用生成二维码的函数
onMounted(() => {
  var obj = DDLogin({
    id: "login_container",
    goto: encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appKey}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${redirectUrl}`),
    style: "border:none;background-color:#FFFFFF;",
    width: "365",
    height: "400"
  });
  if (typeof window.addEventListener != "undefined") {
    window.addEventListener("message", handleMessage);
  }
});
onUnmounted(() => {
  window.removeEventListener("message", handleMessage)
});
</script>

总结：

JustAuth框架实现钉钉授权登录是比较容易实现的，按照官方教程操作即可。本文介绍的是多个钉钉组织，实现思想等价于钉钉+企业微信+gitee这样；
使用临时码免登的方式再dingTalk开放平台已经被标记为过时，新的方法是使用tmpCode换取用户信息和现在的JustAuth是不兼容的，后续可期待下JustAuth是否做兼容。