钉钉扫码登录网站(两种方式实现)
钉钉扫码登录网站(两种方式实现)
效果:
源代码地址:https://github.com/jellydong/DingQrCodeLogin
动手敲代码!
第一步,钉钉后台配置
参考链接:获取appId及appSecret.
点击进入钉钉开发者平台 的页面,点击左侧菜单的【移动接入应用-登录】,然后点击右上角的【创建扫码登录应用授权】,创建用于免登过程中验证身份的appId及appSecret,创建后即可看到appId和appSecret。
这里因为我是本地开发,所以回调地址直接写:http://localhost:5000/Home/DingLogin
注意哦,回调地址后面是有使用的~
第二部 我们创建一个 ASP.NET Core Web项目
修改appsettings.json
修改appsettings.json,增加钉钉的配置信息:
"DingDing": {"QrAppId": "QrAppId", //你的钉钉扫码登录AppId"QrAppSecret": "QrAppSecret" //你的钉钉扫码登录AppSecret}
创建完成修改Home控制器的Index页面其实就是钉钉官网文档的代码啦~
:
@{ViewData["Title"] = "Home Page";
}<div class="text-center"><h1 class="display-4">Welcome</h1><div id="login_container"></div><button type="button" class="btn btn-primary" id="JumpToLogin">跳转登录</button>
</div>@section Scripts
{<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script><script type="text/javascript">/** 解释一下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 url = "http://localhost:5000/Home/DingLogin";var obj = DDLogin({id: "login_container",//这里需要你在自己的页面定义一个HTML标签并设置id,例如<div id="login_container"></div>或<span id="login_container"></span>goto: encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + url), //请参考注释里的方式style: "border:none;background-color:#FFFFFF;",width: "365",height: "400"});var handleMessage = function (event) {var origin = event.origin;console.log("origin", event.origin);if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log("loginTmpCode", loginTmpCode);window.location.href ="https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=" +loginTmpCode;}};if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', handleMessage, false);} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', handleMessage);}$("#JumpToLogin").click(function(){window.location.href ="https://oapi.dingtalk.com/connect/qrconnect?appid=appid&response_type=code&scope=snsapi_login&state=LoginDing&redirect_uri=http://localhost:5000/Home/DingLogin";});</script>
}
官网介绍了两种方式,Demo把两种方式都放到一个页面了。登录页面效果:
第三步 回调方法:
第一步的时候我们说回调地址是需要使用的,那么首先我们要有这个地址啊。
因为是Demo,就直接写在HomeController中了
public string DingLogin(string code, string state){//state 是前端传入的,钉钉并不会修改,比如有多种登录方式的时候,一个登录方法判断登录方式可以进行不同的处理。OapiSnsGetuserinfoBycodeResponse response = new OapiSnsGetuserinfoBycodeResponse();try{string qrAppId= AppConfigurtaionHelper.Configuration["DingDing:QrAppId"];string qrAppSecret = AppConfigurtaionHelper.Configuration["DingDing:QrAppSecret"];if (string.IsNullOrWhiteSpace(qrAppId)||string.IsNullOrWhiteSpace(qrAppSecret)){throw new Exception("请先配置钉钉扫码登录信息!");}DefaultDingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");OapiSnsGetuserinfoBycodeRequest req = new OapiSnsGetuserinfoBycodeRequest();req.TmpAuthCode = code;response = client.Execute(req, qrAppId, qrAppSecret); //获取到response后就可以进行自己的登录业务处理了//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx//此处省略一万行代码}catch (Exception e){response.Errmsg = e.Message;}return response.Body;}
登录结果
完成上述步骤后,我们就可以运行项目测试了,钉钉会给我们返回用户的nick
、openid
及unionid
,那么,我们可以用这些信息,为所欲为了?
总结
之前过于钉钉扫码,总觉得是很高大上的东西(原谅我是个菜鸡
),也没有去尝试。
今天看完文档后,用在项目上,然后写了这个Demo,因为我Github没找到合适的,可能是大家觉得简单都不用写了。
1024 节日快乐!
钉钉扫码登录网站(两种方式实现)相关推荐
- python钉钉扫码登录程序_钉钉扫码登录网站(两种方式实现)
钉钉扫码登录网站(两种方式实现) 效果: 动手敲代码! 第一步,钉钉后台配置 点击进入钉钉开发者平台 的页面,点击左侧菜单的[移动接入应用-登录],然后点击右上角的[创建扫码登录应用授权],创建用于免 ...
- vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
- 微信或企业微信实现扫码登录的三种方式
通过微信或企业微信扫码登录PC管理后台,替代传统的账号.密码登录. 为了完成这个功能,疯狂百度各种扫码登录的技术文章,能实现微信或企业微信扫码登录的方式可以说有三种: 1.注册一个微信资源开放平台账号 ...
- PHP小程序码扫码登录网站,微信扫小程序码实现网页端登录
常见的微信扫码登录有两种 这两种方式都需要提交企业资料认证和300元年费,有些想要学习或者自己的网站没有盈利的,其实不舍得花这个钱,特别是个人开发者,没有企业资料去做认证. 既然没法做企业认证,那我们 ...
- PHP实现跳转式微信扫码登录网站
关于微信扫码登录网站的功能介绍,请阅读官方文档[网站应用微信登录开发指南] 下面用PHP代码实现微信扫码登录网站(以官方文档中的一号店为例): <?php header("Conten ...
- 通过微信扫码登录网站流程
通过微信扫码登录网站 微信开放平台文档地址:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Author ...
- SSH登录的两种方式
SSH登录的两种方式 一 : 密码登录 1.客户端向SSH服务器发出请求,服务器将自己的公钥返回给客户端. 2.客户端用服务器的公钥加密自己的登录密码,再将信息发送给服务器. 3.服务器接收到客户端传 ...
- SSH远程免密登录的两种方式
SSH远程免密登录的两种方式 一.ssh远程登录操作 1.先ping测试下看看网络是否通畅 2.ssh 192.168.150.148 二.ssh免密登录方式一 1.生成公钥.私钥 2.拷贝公钥到目标 ...
- 【小程序登录的两种方式】
小程序登录的两种方式 账号密码登录 获取小程序授权登录 账号密码登录 app.json页面顺序 先进入首页 有token就是首页 没有token时redirectTo登录页 {"pages& ...
最新文章
- 关于自动驾驶,我们是否在刻意回避这三大关键问题?
- 【翻译】旧技术成就新勒索软件,Petya添加蠕虫特性
- 无法更改密码的解决办法--passwd: User not known
- tkinter笔记:scale 尺度 (莫烦python笔记)
- java -jar 和 java -cp用法
- ricky java photos_【Melee】Ricky blog updates and new photos
- Moving On Gym - 102222F
- 使用Apache CXF开发RESTful服务
- Windows下UEFI环境的搭建
- 可道云 docker 群晖_【curl】校园网群晖DS120j自动认证
- RestSharp使用说明
- 学生成绩管理系统c语言直方图,Excel表格的25招必学秘技 电子表格常用技巧大全...
- 使用GDAL实现坐标转换
- 计算机条件求和函数,在excel中怎样根据多个条件进行求和
- 【只推荐一位】木东居士,带着大家一起成长的数据科学大神!
- python什么是高阶函数_对于高阶函数的理解是什么?
- TiDB聚簇表和非聚簇表
- Python学习-安装Anaconda及print我爱王晓静
- ps中如何批量修改图片
- 前端微信小程序电影类仿淘票票微信小程序