第三方平台通过钉钉扫码登录实现方案

阅读文档：
成为钉钉开发者
前端实现钉钉扫码登录方案：
- 一、构建扫码登录页面，获取临时授权码code以及state参数
- - 方式一：使用钉钉提供的扫码登录页面
  - 方式二：将钉钉登录二维码内嵌到自己的页面中
- 二、将临时授权码code以及state参数传给我方后端，由后端完成授权用户信息并获取绑定登录操作。

阅读文档：

直通车：https://developers.dingtalk.com/document/app

钉钉开放平台->应用开发->服务端API->身份验证（免登）->扫码登录第三方网站

成为钉钉开发者

1、准备【一个钉钉管理员账号、需要登录的第三方网站的网址、需要登录的第三方网站的logo图片地址】

2、登录钉钉开放平台，创建扫码登录应用授权

3、填写应用授权名称、描述、以及填充准备好的三方网站网址和logo图片地址

4、确定创建后，会生成APPID和appSecret。

前端实现钉钉扫码登录方案：

一、构建扫码登录页面，获取临时授权码code以及state参数

根据钉钉开发文档记录，Web系统可以通过两种方式实现钉钉扫码登录功能

方式一：使用钉钉提供的扫码登录页面

优点：不需要自己手动构建扫码登录页面，只需要调用钉钉开放API即可实现扫码登录效果，并配合后端实现真实的登录验证
缺点：扫码页面是钉钉自家的，不能定制化开发

具体实现步骤：

在企业Web系统里，我们只需要做出让用户点击使用钉钉扫码登录的操作时，让我们的系统跳转到下面的地址：

https://oapi.dingtalk.com/connect/qrconnect?appid=
SuiteKey
&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI

url里的参数需要换成第三方Web系统对应的参数。在钉钉用户扫码登录并确认后，会302到我们指定的redirect_uri，并向url参数中追加临时授权码code和state两个参数。

【注】：

参数redirect_uri=REDIRECT_URI涉及的域名，需和登录配置的回调域名一致，否则会提示无权限访问。
如果是企业内部应用，appid则为应用的AppKey；如果是第三方企业应用，appid则为应用的SuiteKey。

方式二：将钉钉登录二维码内嵌到自己的页面中

优点：在我们自己的网站就可以完成登录，无需跳转到钉钉域下登录再返回，提高钉钉登录的流畅性和成功率，并且可以自己定制登录页面的布局和样式
缺点：实现流程有些许复杂，较之方式一

网站内嵌二维码钉钉登录JS实现方案：

1、在网页中引入JS文件：

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

2、在登录页面实例化JS对象

在自己的页面定义一个HTML标签并设置id，例如

<div id="login_container"></div>
或
<span id="login_container"></span>

当前页面实例化JS对象

/*
* 解释一下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标签的idgoto: "", // 请参考注释里的方式style: "border:none;background-color:#FFFFFF;",width : "365",height: "400"});

参数说明：

参数	说明
goto	goto参数结构：`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=url`，并且要将goto参数urlencode编码。
style	渲染二维码的区域的样式，可以自定义去除背景颜色和边框。
width	表示显示二维码的区域的宽。 width和height不代表二维码的大小，二维码大小是固定的210px*210px。
height	表示显示二维码的区域的高。 width和height不代表二维码的大小，二维码大小是固定的210px*210px。

goto中的APPID就是在钉钉开发者平台获取的APPID

goto中的url就是我们自己的第三方网站地址，即回调域名

3、获取loginTmpCode

通过window.parent.postMessage(loginTmpCode)

var handleMessage = function (event) {var origin = event.origin;console.log("origin", event.origin);if( origin == "https://login.dingtalk.com" ) { // 判断是否来自ddLogin扫码事件。var loginTmpCode = event.data; console.log("loginTmpCode", loginTmpCode);// 获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了// 这里构造跳转链接，并实现跳转，如：window.location.href=""+loginTmpCode}
};
if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', handleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', handleMessage);
}

4、构造跳转链接实现跳转页面，并获取临时授权码code以及state参数

跳转链接如下：
https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=SuiteKey&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=loginTmpCode

具体实现：

我们只需要将上一步拿到的loginTmpCode拼接到https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=SuiteKey&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=这里即可

let url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=SuiteKey&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=' + loginTmpCode

然后使用

window.location.href = url

此链接处理成功后，钉钉会302到goto参数指定的redirect_uri地址（即我们的回调地址/第三方Web网站地址），并向该url参数中追加临时授权码code以及state参数。

二、将临时授权码code以及state参数传给我方后端，由后端完成授权用户信息并获取绑定登录操作。

第三方平台通过钉钉扫码登录实现方案相关推荐

钉钉开发系列(十一)钉钉网页扫码登录
在<钉钉开发系列(八)二维码扫描登录的实现>介绍了一种扫码登录的方式,该方式是自己产生二维码,二维码中的URL指到自身的服务器页面,在该页面中以JSSDK的方式来获取钉钉用户的信息.钉钉官 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
Unity发布PC平台，接入微信开放平台网页应用，扫码登录不拉起浏览器直接显示二维码在UI上
文章目录一.前言二.登录微信开放平台,申请网页应用三.抓取授权二维码原理四.测试五.核心代码六.补充:如何知道用户扫码成功一.前言 Unity发布PC平台,如果在PC平台想要使用微信登录 ...
微信开放平台开发第三方授权登陆：微信扫码登录
一.概述根据需求,需要拥有第三方微信登录功能,并获取到用户信息. 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 二.前期准备工作 1.注册邮箱账号. 2.根 ...
微信扫码登录实现方案
一. 准备工作在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret: 二. 实现步骤 • 1 熟悉Oauth 2.0 原理与授权流程 • 2 创建 ...
钉钉扫码登录cs架构，winform设计钉钉扫码客户端
先上效果图下面开始流程: 准备工作你需要一个注册钉钉的账号,以获取APPID: 你还需要你要登录的第三方网站的网址,以及一张网站logo图片的地址: 具体步骤: 1.注册成功后,登录,进行如下四步 ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
反向工程解析QQ扫码登录的OAuth2流程
1. 引言-与OAuth2有关 OAuth 2.0协议(RFC 6749)被广泛应用于互联网应用中,最常见的可能就是第三方授权登录应用了.在许多应用网站中用户登录时,可以使用支付宝.微信.QQ的已 ...
钉钉扫码登录第三方_在钉钉发布公司重要文件，真的安全吗？
钉钉以疫情在家办公为契机,加上"幸运地"被教育部"选中",在2月5日,钉钉下载量首次超过微信,跃居苹果App Store排行榜第一,并打破App Store记录 ...

第三方平台通过钉钉扫码登录实现方案

第三方平台通过钉钉扫码登录实现方案

阅读文档：

成为钉钉开发者

前端实现钉钉扫码登录方案：

一、构建扫码登录页面，获取临时授权码code以及state参数

方式一：使用钉钉提供的扫码登录页面

方式二：将钉钉登录二维码内嵌到自己的页面中

二、将临时授权码code以及state参数传给我方后端，由后端完成授权用户信息并获取绑定登录操作。

第三方平台通过钉钉扫码登录实现方案相关推荐

最新文章

热门文章