怎么实现通过扫描二维码进行登录?

首先,任何一个二维码表示的都是一串字符串。

我们打开淘宝登录页面:https://login.taobao.com/member/login.jhtml,展示了二维码: 

image.png

 

通过草料二维码解析出这张二维码表示的是如下字符串:

https://login.m.taobao.com/qrcodeCheck.htm?lgToken=e20115f0e33f373f6be958ca54a60b56&tbScanOpenType=Notification,

这关键的就是lgToken,这是网页的一个唯一ID。

 

当打开了二维码登录后,我们通过chrome控制台看网路请求,会发现: 

网页在轮询调用接口:https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do?lgToken=9ed6cfefe97b10b808fbfff0705379b1&defaulturl=&_ksTS=1530178881213_61&callback=jsonp62,

即拿上面二维码里的lgToken去请求服务。

如果没有扫码,返回的是:

image.png

如果扫了码,但是手机上没点击“确认登录”的话,界面显示的是: 

 image.png

轮询接口返回的是:

image.png

如果长时间未扫码,网页端会停止轮询,并显示: 

image.png

当手机端确认登录后,接口返回的是:

image.png

这里返回了一个token,应该就是登录态。

这其中手机端与服务端做了什么交互我们不得而知,但是可以猜测到,客户端在登录态有效的情况下,拿网页端的lgToken去请求了服端,并且服务端记住了这个lgToken,并认为登录了。当网页端再次轮询请求接口时,就返回真正的登录态Token。

最后以一张流程图总结扫码登录原理: 

image.png

 

实现钉钉扫描二维码登录,需要进行以下步骤: 1. 在钉钉开放平台注册应用,并获取到应用的 `AppId` 和 `AppSecret`。 2. 在前端页面上实现钉钉扫描二维码的功能,可以使用钉钉提供的 `DingTalkPC.runtime.permission.requestAuthCode` 方法,该方法会弹出钉钉扫描二维码的界面,用户扫描二维码后会返回一个 `code` 值。 3. 前端将 `code` 值发送到后端,后端拿到 `code` 值以及 `AppId` 和 `AppSecret`,调用钉钉开放平台提供的接口获取用户的身份信息。 4. 后端将获取到的用户身份信息返回给前端,前端根据身份信息进行相应的页面跳转或者其他操作。 下面是一个简单的实现示例: 前端代码: ``` html <!-- 钉钉扫描二维码的按钮 --> <button @click="requestAuthCode">钉钉扫描二维码登录</button> <script> export default { methods: { requestAuthCode() { // 调用DingTalkPC.runtime.permission.requestAuthCode方法 DingTalkPC.runtime.permission.requestAuthCode({ corpId: '钉钉应用的CorpId', onSuccess: function(result) { // result.code为获取到的code值 // 将code值发送到后端进行身份验证 }, onFail: function(err) { console.log(err) } }); } } } </script> ``` 后端代码: ``` javascript const axios = require('axios'); // 获取用户身份信息的接口 const API_URL = 'https://oapi.dingtalk.com/sns/getuserinfo_bycode'; async function getUserInfo(code, appId, appSecret) { const url = `${API_URL}?accessKey=${appId}&accessSecret=${appSecret}&code=${code}`; const response = await axios.get(url); return response.data; } // 在路由中处理钉钉扫描二维码的请求 app.get('/dingtalk/login', async (req, res) => { const { code } = req.query; const appId = '你的应用AppId'; const appSecret = '你的应用AppSecret'; try { const userInfo = await getUserInfo(code, appId, appSecret); // 将获取到的用户身份信息返回给前端 res.send(userInfo); } catch (err) { console.log(err); res.status(500).send('获取用户信息失败'); } }); ``` 需要注意的是,以上代码仅为参考示例,实际应用中还需要考虑一些安全性和错误处理的问题。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值