Vue3调用钉钉api,内嵌H5微应用单点登录对接

钉钉内嵌H5微应用单点登录对接

https://open.dingtalk.com/document/isvapp/obtain-the-userid-of-a-user-by-using-the-log-free

前端需要的代码

1、安装 dingtalk-jsapi

typescript 复制代码
npm install dingtalk-jsapi

2、在所需页面引入

typescript 复制代码
import * as dd from 'dingtalk-jsapi';  // 引入钉钉api

3、接收corpId

接收corpId之前,钉钉后台创建的微应用要配置H5页面跳转地址

圈红的地址是自己H5页面的地址,后面的是固定的

配置完地址一定要发布,否则不生效

然后在H5代码里面获取corpId

typescript 复制代码
const params = route.query.corpId as string;

获取到 corpId ,调用下面的方法,获取到code传给后台接口,后台处理登录,返回token

typescript 复制代码
let code = ref('')
dd.ready(function () {
      dd.runtime.permission.requestAuthCode({
        corpId: params, // 企业id
        onSuccess: function (info: any) {
          code.value = info.code; // 通过该免登授权码可以获取用户身份
        },
      });
 });
相关推荐
JiaLin_Denny3 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
无人生还3 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
柒@宝儿姐4 小时前
若依 B 端从浏览器访问升级为 Windows 安装包交付流程
前端·javascript·vue.js·windows
DLYSB_5 小时前
数据库连接池爆满导致全线宕机:我用 Go 写了个“现场声光报警器”,比钉钉快了 10 倍
数据库·golang·钉钉·报警灯
达子66619 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒19 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏1 天前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜1 天前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载
di24k24k1 天前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
执子念的飞鱼1 天前
Vue 3 文件预览落地:鉴权 Blob、Worker/WASM 与内网子路径部署
vue.js·webassembly