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; // 通过该免登授权码可以获取用户身份
        },
      });
 });
相关推荐
2601_952047793 小时前
单一策略深度教程:用轻易云把集成任务的报错实时推送到钉钉机器人
java·机器人·钉钉
志尊宝4 小时前
Vue3 零基础每日笔记(073):keep-alive 页面缓存实战——列表页返回不丢状态
vue.js·笔记·缓存·#vue #前端 #前端开发·#javascript·#vue.js
Southern Wind15 小时前
AIAgent——第一章:本地 Agent 与 Vue 3 流式全栈实战
前端·javascript·vue.js
ym hyd 11118 小时前
生鲜超市库存管理信息系统源码 Java+SpringBoot+Vue3 前后分离
java·开发语言·vue.js·spring boot·毕设
FYKJ_201018 小时前
express绿叶横店短剧推荐与影评分享平台34219-计算机课程设计、毕业设计
java·javascript·vue.js·spring boot·后端·课程设计·express
Eric.4618 小时前
毕设实战|SpringBoot+Vue 实现多个系统项目
vue.js·spring boot·课程设计
一颗小芹菜的日常18 小时前
vue-crack插件是干什么的
前端·javascript·vue.js
peter676818 小时前
vue学习小结
前端·vue.js·学习
web3d5201 天前
Vue3 地图白屏排查清单:容器、弹窗与 ol-viewport 重复创建
vue.js·gis
hai_android1 天前
一个公式看懂动态跨表查找:P8 + VLOOKUP
前端·javascript·vue.js