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; // 通过该免登授权码可以获取用户身份
        },
      });
 });
相关推荐
Bs_MoneyMagnet4 小时前
基于springboot+vue的滑雪场票务与装备租赁系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
Z小明14 小时前
第 6 章 组件进阶
前端·vue.js
ID346107442016 小时前
【课程设计】基于Spring Boot+Vue的游戏账号租赁系统的设计与实现-计算机毕设 附源码50345
javascript·vue.js·spring boot·python·node.js·php·课程设计
FYKJ_201019 小时前
【毕设分享】基于Web的校园兼职信息发布与申请系统07059
前端·vue.js·spring boot·mysql·typescript·spark·课程设计
志尊宝21 小时前
Vue3 零基础每日笔记(032):Suspense 与异步组件——懒加载与顶层 await 终极方案
前端·javascript·vue.js·笔记·html5
高级程序源1 天前
django校企合作实习基地管理系统82506-计算机课程设计、毕业设计
vue.js·后端·python·mysql·django·课程设计·pygame
志尊宝1 天前
Vue3 零基础每日笔记(029):插槽 slot 三连——默认、具名、作用域一次讲透
前端·javascript·vue.js·vue·前端开发
nicole bai1 天前
vue前端全局图标闪一下的问题
前端·vue.js
Bs_MoneyMagnet1 天前
基于springboot+vue的图书馆预约系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·毕业设计·图书管理系统·计算机毕业设计
志尊宝1 天前
Vue3 零基础每日笔记(027):组件上的 v-model——让自定义组件也能双向绑定
前端·javascript·vue.js·笔记·html5