前端Vue项目实现钉钉扫码免登录

从前端实现的原理是引入二维码后，拿到返回页面的code，将code传到服务器获取数据库里的用户信息，匹配进行放行

第一步：在钉钉开发者平台创建一个应用，拿到相对应的appId ,测试时回调地址可以直接填自己本地

在public 中的index.html引入钉钉依赖

<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

在页面template中放一个盒子存放二维码

<div id="login_container" style="transform: scale(0.7)"></div>

然后是钉钉登录初始化函数,只需更改自己的url回调地址和appid即可

  ddLoginInit() {let url = encodeURIComponent(`${baseurl.ddurl}/#/login`);//此处url写钉钉回调地址let appid = baseurl.appid;//填写自己在钉钉开发者平台配的appidlet goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`);let obj = DDLogin({id: "login_container",//对应刚刚的div盒子idgoto: goto,style: "border:none;background-color:#FFFFFF;",width: 365,height: 350,});let handleMessage = (event) => {let origin = event.origin;if (origin == "https://login.dingtalk.com") {let loginTmpCode = event.data;window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}`;}};if (typeof window.addEventListener != "undefined") {window.addEventListener("message", handleMessage, false);} else if (typeof window.attachEvent != "undefined") {window.attachEvent("onmessage", handleMessage);}},

然后在mounted中执行自己的初始化函数,原理是扫码后会回跳当前页面，判断路由参数中是否携带code，去执行登录函数

 mounted() {const { code } = this.$route.query;if (code) {this.handleCodeLogin(code);} else {this.ddLoginInit();}},

钉钉登录函数

 async handleCodeLogin(code) {
//此处根据自己需求使用codelet res = await this.$api.login.dingLogin({code,});if (res) {if (res.data.rc === 200) {...this.$store.commit("setToken", res.data.data.token); this.$router.push({name: "home",});} else {this.ddLoginInit();}}},

此处所有代码可以实现钉钉扫码登录了，具体效果如下：

在请求中会看到有一个钉钉不停的请求监听回调即可证明引入成功！

应用图标可以再开发者后台设置

前端Vue项目实现钉钉扫码免登录相关推荐

VUE项目中的微信扫码登录
微信扫码登录功能首先了解微信扫码登录的流程和详解,详见微信扫码登录,这边仅是vue前端相关流程一.创建微信登录按钮及方法,配置相关参数 1.创建微信登录按钮 <!--微信授权登录按钮--&g ...
钉钉扫码免登-钉钉应用内免登的实现(附仓库及Demo)
新版钉钉扫码免登及钉钉应用内免登的一次实现 (附仓库及Demo) Vue2, JDK1.8, SpringBoot2.x.x, 钉钉模块, 钉钉模块Demo, 钉钉开放平台目录新版钉钉扫码免登及钉 ...
第三方网站实现钉钉(DingTalk)扫码登陆（Vue+SpringBoot）
第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot) 一,本地库添加钉钉UserId字段字段类型VarChar,管理者的userid为String,其余为Long 二,钉钉 ...
浙政钉扫码免登集成
Springboot+浙政钉扫码免登集成初次编写博客有不到之处请指出谢谢应用上架第一步申请isv入驻第二步用isv账号添加用户和机构专有钉下载地址第三步用isv账号在团队管理授权 ...
python钉钉扫码登录程序_使用python+django集成钉钉三方扫码登陆
使用python+django集成钉钉三方扫码登陆 \(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\) 1. 进入钉钉开放平台--->点击左下角 ...
前端调用手机摄像头权限进行扫码解析
前端调用手机摄像头权限进行扫码解析(demo含Vue及原生) 前端调用手机摄像头权限进行扫码解析(demo含Vue及原生js写法) 引子实践此时已经可以成功调用摄像头,接下来集成进Vue工程中最 ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
Java毕设项目疫苗药品批量扫码识别追溯系统计算机（附源码+系统+数据库+LW）
Java毕设项目疫苗药品批量扫码识别追溯系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也 ...
微信扫码关注登录(vue+node+express+mongodb)
微信扫码关注登录(vue+node+express+mongodb) 文章目录前言一.微信扫码关注登录是什么? 二.为什么要使用微信扫码关注登录? 三.思路前端部分后端部分: 四.微信后台授 ...

前端Vue项目实现钉钉扫码免登录

前端Vue项目实现钉钉扫码免登录相关推荐

最新文章

热门文章