vue实现钉钉扫码登录

流程图

由于很多人问这个，发现并不是代码问题，都是流程不清楚导致，遂补一个流程图

如图所示：

官网文档：

扫码登陆第三方网站

代码如下：

//在public/index.html引入钉钉js
//需注意如果报错DDLogin未定义，需要将此代码放入head中或者body中，放在body-html标签之间有些项目会报错。
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

//html
// id必写，style是为了调整二维码大小，二维码官方固定尺寸，只好出此下策。
<div id="login_container" style="transform: scale(.8);"></div>

//在这里插入代码片
mounted(){//code是登录所需最终参数const { code } = this.$route.queryif(code){ //登录接口this.handleCodeLogin(code)}else{ //钉钉二维码this.ddLoginInit()}
},
methods: {ddLoginInit(){//钉钉扫码流程：扫码成功登录后会自动跳到这个url页面，url路径会携带code，你拿到这个code，调用登录接口成功就跳转。//你的项目页面let url = encodeURIComponent('http://baidu.com.cn/weekly/#/login');// appid 找后端要let appid = 'dingappid'// 钉钉自己的url 修改上面俩，不需要动这个let 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",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>goto: goto, //请参考注释里的方式style: "border:none;background-color:#FFFFFF;",width : "100%",//官方参数 365height: "300"//官方参数 400});let handleMessage =  (event) =>{let origin = event.origin;console.log("origin", event.origin);if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。let loginTmpCode = event.data; //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log("loginTmpCode", loginTmpCode);//此步拿到临时loginTmpCode换取正式codewindow.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);}},handleCodeLogin(code){this.$store.dispatch('user/codeLogin', {authCode:code}).then((res) => {//到这里就成功了直接路由跳转，下面是我个人逻辑this.$router.push( '/index')//this.$store.dispatch('user/getMenuList').then(() => {// if(res.instType == 0){//  this.$router.push( '/queryWeekly')// }else{//  this.$router.push( '/addWeekly')// }// this.loading = false//})}).catch(() => {this.$router.push( '/')this.loading = false})},
}

备注： 阴晴不定，小雨连绵；春困夏乏秋打盹，睡不醒的冬三月。

vue实现钉钉扫码登录相关推荐

vue实现pc端扫码登录
vue pc端微信扫码登录文章目录 vue pc端微信扫码登录效果图方式一:npm 安装并引入插件参数说明使用自定义样式方式二:通过js 引用js文件 vue 使用注意效果图方式一 ...
Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
钉钉开发系列(十一)钉钉网页扫码登录
在<钉钉开发系列(八)二维码扫描登录的实现>介绍了一种扫码登录的方式,该方式是自己产生二维码,二维码中的URL指到自身的服务器页面,在该页面中以JSSDK的方式来获取钉钉用户的信息.钉钉官 ...
Vue前端实现微信扫码登录
微信登录两种实现方法: 说在前面:由于微信的限制不得不将vue的路由模式切换为history模式. 第一种: 后端实现二维码,将二维码的跳转链接返回前端,并且传一个state给前端做标识,前端需要点击 ...
vue PC端微信扫码登录
我用的element,要是在弹窗里面使用,还是用自定义弹窗比较好,据说用官方的el-dialog会出不来.上代码: 在index.html页面里面引入对应的脚本 <script src=&quo ...
钉钉扫码登录cs架构，winform设计钉钉扫码客户端
先上效果图下面开始流程: 准备工作你需要一个注册钉钉的账号,以获取APPID: 你还需要你要登录的第三方网站的网址,以及一张网站logo图片的地址: 具体步骤: 1.注册成功后,登录,进行如下四步 ...
一篇文章，带你了解微信扫码登录
文章目录前言一.功能背景二.扫码登录原理 1.基本原理三.实现效果图 1.登录页 2.点击微信账号登录 3.已绑定微信的账号 4.未绑定微信号的账号四.代码实现 1.准备工作 2.编写代码 ...
扫码登录（uniappvue）
扫码登录(uniapp&&vue) 手机 app 扫码登录网站用户打开web端网页,进入扫码登录的界面: 从web端服务器获取二维码的唯一标识,用于表示该二维码所对应的用户,方便后面 ...
AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
vue实现钉钉扫码登录第三方网站
(1)### 登录钉钉开放平台,进入应用开发页面,此页面需要管理员开放权限才能进入 (2)### 点击[创建应用],圈出的三部分填写完之后点击[确定创建] (3)### 切换到新版,钉钉登录与分享中填 ...

vue实现钉钉扫码登录

流程图

如图所示：

官网文档：

代码如下：

vue实现钉钉扫码登录相关推荐

最新文章

热门文章