企业内部h5微应用接入钉钉免登（java）

最新推荐文章于 2025-07-16 21:08:14 发布

原创最新推荐文章于 2025-07-16 21:08:14 发布 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#钉钉 #java #vue.js

该文章已生成可运行项目，

接入前准备：

第一步：申请开发者权限，以及创建微应用请自行移步钉钉开发者平台
- 钉钉开发者平台
第二步：
- 准备自己得PC端或者H5端，H5端是必须要得（ip，域名都可以，本地弄个内网穿透）
- 在开放平台配置h5和pc得链接地址
- 首页和应用开发都可以进入配置页面，但是如果配置页面改动得话请选择首页->企业应用->进入引用->开发管理去修改路径，应用开发修改我尝试了不生效。
- 配置页面解释：
  - 应用首页地址代表手机钉钉访问得链接
  - PC端首页地址代表电脑钉钉访问得链接
- 权限管理设置你需要得api权限，我这边用到了用户，部门等相关，自行根据需要添加
- 登陆与分享模块设置回调域名，（我简单配置了下，暂时未用到）
- 版本管理与发布用来控制应用范围与发布应用
第三步
- 后端部分得开发参考：接入免登流程（就是接几个钉钉得对外接口，微应用免登参考前端部分得开发）

第四步(前端开发部分)

：
在你得项目index.html中引入下面内容

<!-- 这个是本地测试需要用到得   <script src='https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug/0.1.3/index.js'></script>-->
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.13.42/dingtalk.open.js"></script>

在你需要接入免登得页面，也就是前面配置得地址，以vue为例：

onMounted(() => {
  try {
    // 检查是否在钉钉环境
    if (dd.env.platform === "notInDingTalk") {
      errorMsg.value = "请在钉钉客户端打开";
      loading.value = false;
      return;
    }
    // 请求授权码
    dd.runtime.permission.requestAuthCode({
      corpId: '你的企业corpId',
      clientId: '你的应用appKey',
      onSuccess: (result) => {
        console.log("钉钉授权码:", result.code);
        userStore.dingLogin(result.code).then(() => {
          router.push("/index");
        });
      },
      onFail: (err) => {
        console.error('请求授权码失败:', err);
      }
    });
  } catch (error) {
    errorMsg.value = error.message || "登录失败，请稍后重试";
    loading.value = false;
  }
});