1、创建扫码登录应用授权

首先进入到【钉钉开放平台-应用开发-移动接入应用-登录-创建扫码登录应用授权】，创建扫码登录应用授权，

完成之后我们就可以拿到appId和appSecret了

2、构造扫码登录页面

钉钉开放平台提供了两种构建方法，第一种是跳转到钉钉提供的页面进行扫码登录，第二种是将二维码嵌入自己的系统中实现扫码登录，这里我是使用的第二种方法。

因为扫码这个功能的实现主要是在前端，我是使用vue进行的开发，所以这里我先搭建一个小的vue的demo，结构很简单，就只有两个页面

然后将Login.vue作为默认路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from "@/components/Login"
import Home from "@/components/Home"Vue.use(Router)export default new Router({routes: [{path: "/",component: Login},{path: "/login",name: "login",component: Login},{path: "/home",name: "home",component: Home}], mode: "history"
})

基础工作做完之后，进行钉钉的相关开发，首先在index.html引入钉钉的js

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

然后在mounted()中加入如下代码

/*
* 解释一下goto参数，参考以下例子：
* var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
* var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
*/
var obj = DDLogin({id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>goto: "", //请参考注释里的方式style: "border:none;background-color:#FFFFFF;",width : "365",height: "400"});

这段代码的意思就是在你id定义的DOM中生成二维码，扫码成功之后会给你当前页面(/login)返回一个临时授权码，通过如下代码接收临时授权码，然后构造需要跳转的地址(/home)带上临时授权码。

var hanndleMessage = function(event) {var origin = event.origin;console.log("origin", event.origin);if (origin == "https://login.dingtalk.com") {//判断是否来自ddLogin扫码事件。var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了window.location.href ="https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8080/home&loginTmpCode=" +loginTmpCode;}};

<template><div id="login_container"></div>
</template><script>
export default {name: "login",mounted() {let _this = this;let url = encodeURIComponent("http://localhost:8080/home");let goto = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url);var obj = DDLogin({id: "login_container",goto: goto,style: "border:none;background-color:#FFFFFF;",width: "365",height: "400"});var hanndleMessage = function(event) {var origin = event.origin;console.log("origin", event.origin);if (origin == "https://login.dingtalk.com") {//判断是否来自ddLogin扫码事件。var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了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", hanndleMessage, false);} else if (typeof window.attachEvent != "undefined") {window.attachEvent("onmessage", hanndleMessage);}}
};
</script><style scoped>
</style>

然后在/home中获取url中的临时授权码，通过临时授权码和appId以及AppSecret获取到扫码用户的信息，再通过该信息进行内部系统的鉴权，大概的流程就是这样了。

实现钉钉开放平台扫码登录内部应用相关推荐

python获取微信用户基本信息_微信开放平台扫码登录获取用户基本信息！附可用demo...
微信开放平台提供了网站扫码登录的接口,用于获取用户基本信息(头像,昵称)方便网站快速接入微信登录,快捷登录.需要使用登录接口,需要成为微信开放平台认证开发者(300元)才可以获得这个接口权限. 准备工 ...
Vue 前端对接第三方平台扫码登录（Oauth2）
本方式是用 Oauth2 的方式实现扫码登录的,其中省略了不少不重要的代码 1.编写页面样式,设置扫码链接入口 1.页面样式不多说,参考一下: <el-dropdown><span ...
php源码微信快速登陆,PHP实现微信开放平台扫码登陆源码下载
一.首先到微信开放平台申请https://open.weixin.qq.com/ 获取到appid和APPSECRET,前台显示页面以下 var obj = new WxLogin({ id: &qu ...
微信开放平台扫码登陆
微信授权扫码登陆微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里: 另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式) 第一种方式的完成非常简单,但是第二种 ...
平台扫码使用微信登录
关联微信登录首先获取微信APPid 前言一.首先获取微信APPid 二.使用步骤 1.前端页面加入微信 2.后台写入action 总结第一次发博客,就发一篇关于平台互联微信登录. 首先获取微信A ...
基于Android平台扫码识别并链接服务器demo
资料在我的网盘:Android文件夹第一:开发平台搭建. 本项目采用Android studio(android-studio-bundle-162.4069837-windows.exe)作为开发 ...
微信扫码登录_JAVA
一.需求在PC端的登录页面加个微信扫码的按钮,点击按钮弹出二维码,实现微信扫码登录网站的功能.如图: 二.调研扫码登录属于微信开放平台提供的API,不是微信公众平台.这里需要注册等配置,暂不赘述. ...
OAUTH之钉钉第三方授权登录
文章目录 OAUTH之钉钉第三方授权登录前期用到的工具获取access_token 请求地址请求方法响应扫码 / 使用账号密码 -- 获取临时 code 参数重要说明直接访问扫码登录 ...
如何打通AD、企业微信、飞书、钉钉等社交账号及内外网应用身份？
传统企业架构中,经常使用微软活动目录AD管理用户身份,员工通过自己的AD账户登录应用系统.随着互联网的发展和企业信息化转型,更多企业开始使用企业微信.飞书.钉钉这样的社交协作软件,同时也会尝试使用不少 ...
Springboot 实现 PC端微信扫码登录
依赖 <dependency><groupId>org.apache.httpcomponents</groupId> ...

实现钉钉开放平台扫码登录内部应用

1、创建扫码登录应用授权

2、构造扫码登录页面

实现钉钉开放平台扫码登录内部应用相关推荐

最新文章

热门文章