跨端扫码确认实现Web登录(扫二维码登录)

起初的想法是类似于QQ扫码登录，BILIBILI扫码登录一样，通过手机确认后，在web端重定向完成登录

通过对BILIBILI扫码功能的解析，自己实现了一套类似扫码登录的功能

以下为伪代码，仅供查阅

前端

需要两个路由，两个页面

`login`提供Web端用户登录和扫码

图片仅提供扫码展示，密码登录不写了

`login2`提供给跨端用户（如手机端）扫码进入

主要为二次确认，提供确认登录和取消登录

确认登录后，页面跳转至localhost:3000

后端

功能需求：

用户访问请求登录，获取登录ID，并存储其状态为false
PUT用户根据登录ID确认登录,当状态为False是，修改为TRUE（需要权限验证）
提供当前登录ID信息查询

后端实现

生成登录ID,并返回前端

 let code = (Math.random() * 100000).toFixed(0);let data = {qr_title: code,    //登录IDqr_status: false,  //登录状态，未登录为False};return await this.qrService.create(a);

2.用户通过二维码访问确认登录页，确认登录

 @Put('/ConfirmLogin')async ConfirmLogin(@Query() chaxun: any): Promise<any> {return await this.qrService.confirm(chaxun);}

  async confirm(dto?: any): Promise<any> {try {let data: Array<any> = await this.qrRepository.find({qr_title: dto.qr,});if (data.length > 0 && !data[0].qr_status) {data[0].qr_status = true;this.qrRepository.save(data[0]);} else {}} catch (error) {throw new BadRequestException(`系统错误`);}}

轮询请求状态

 @Get('/login')async login(@Query() chaxun: any): Promise<any> {console.log(chaxun);return await this.qrService.login(chaxun);}

async login(dto?: any): Promise<any> {try {let data: Array<any> = await this.qrRepository.find({qr_title: dto.qr,});if (data[0].qr_status) {return { loginStatus: 'OK' };} else {return { loginStatus: 'NOOK' };}} catch (error) {throw new BadRequestException(`系统错误`);}}

前端实现

引入QrCode库，根据请求的登录ID生成二维码，将参数带入手机确认登录页

同时该页面轮询登录状态，登录成功后，跳转至网站内容页

Login1

import React, { Component } from 'react';
import axios from '../utils/http';
import { message } from 'antd';
var QRCode = require('qrcode.react');
export default class LoginRouter extends Component {code: number = 0;number: number = 0;hello: any = null;render() {console.log(this.code);console.log(this.props);return (<div><QRCode value={`http://192.168.1.125:3000/login2?qr=${this.code}`} />,</div>);}tick = async() => {this.number += 1; const res = await axios.get<{ loginStatus:string }>(`http://localhost:4000/qr/login?qr=${this.code}`);console.log(res.data);if (res.data.loginStatus==='OK') {let a: any = this.props;message.success('登陆成功');a.history.push('/');}};componentDidMount() {axios.get('http://192.168.1.125:4000/qr').then(res => {this.code = res.data.code;this.setState({});});this.hello = setInterval(this.tick, 1000);}componentDidUpdate() {// 组件更新后触发console.log('componentDidUpdate');}componentWillUnmount() {// 组件卸载时触发clearInterval(this.hello);console.log('componentWillUnmount');}
}

Login2

手机登录页面确认后，提交确认状态，交给主登录页轮询状态

import React, { Component } from 'react';
import axios from '../utils/http';
import { message } from 'antd';export default class LoginRouter2 extends Component {code: number = 0;render() {let a: any = this.props;let qr = a.history.location.search.split('=')[1];return (<div><buttononClick={() => {axios.put(`http://192.168.1.125:4000/qr/ConfirmLogin?qr=${qr}`).then(res => {message.success('成功');});}}>确认</button><buttononClick={() => {alert('请关闭');}}>取消</button></div>);}componentDidMount() {//   axios.get('http://192.168.1.125:4000/qr').then(res => {//     this.code = res.data.code;//     this.setState({});//   });}
}

只是理论可行，实际应用还需要判断其权限，手机端授权，页面端登录权限验证等,以及前端页面的扫码状态展示，扫码回执操作等

当然二维码也未必是指向本文章中的login2 如手机端可通过自定义协议访问，比如支付宝或微信付款吗alipay://
GIF示例-PC

GIF示例-Mobile

表

文章来源：JoyNop.COM–跨端扫码确认实现Web登录(扫二维码登录)
https://www.joynop.com/p/235.html

跨端扫码确认实现Web登录(扫二维码登录)相关推荐

微信扫码登录自定义二维码样式
微信扫码登录自定义二维码样式前言 Java生成data-url 1.工具类pom 2.代码实现将data-url赋值给href 前言今天在做web端扫码登录时,前端需要定义二维码的样式.官方文档 ...
Spring Cloud OAuth2 扩展登录方式：帐户密码登录、手机验证码登录、二维码扫码登录
本文扩展了spring security 的登录方式,增长手机验证码登录.二维码登录. 主要实现方式为使用自定义filter. AuthenticationProvider. AbstractAuth ...
微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...
12306抢票系统（登录功能---二维码+账号密码）
文章目录一.二维码登录方式二.账号密码登录方式超级鹰第三方库账号密码登录代码汇总: 一.二维码登录方式二维码登录方式:用户手机端扫描网页二维码登录,比账号密码登录更简易话不多说,先上代码 ...
jq将网页生成二维码插件给网站内页添加手机扫码访问教程给网站添加二维码教程网站如何生成二维码
很多用户通过电脑访问了你的网站,可能某些他想手机查看,那么刚好用的这个功能,这个鹏仔简单写了下,电脑端屏幕大于1198的会显示二维码,小于则当做移动端或ipa隐藏不显示. 本次需要引入jq,如果你的站 ...
Mac pro微信开发者工具无法显示登录的二维码解决方案
一开始在微信小程序里是使用测试号开发的,更改测试号为自己的AppId死活改不了,报错: Error: 需要重新登录,access_token expired[touristappid] 1.首先要确保 ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
网址二维码：如何制作网页链接二维码？
1994年,一家日本的公司发明了二维码,最开始是用来追踪旗下公司零部件的维修情况.在二维码上有不同的区域,标识不同的信息,比如对齐模式.定时模式.安静区域.版本信息.数据单元等. 现如今二维码和我们的 ...
ZXing 二维码库之生成与解析二维码
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
生成有时间限制的二维码_微信公众号渠道二维码怎么制作？监测渠道效果的利器来了...
每逢营销节点,各种渠道推广少不了,非常时刻需要能够统计不同渠道二维码的数据情况. 微信引流效果好不好怎么判断?新增人数为什么一团乱麻?粉丝又分别是从哪个渠道来的? 用渠道二维码就能搞定这些问题. 一. ...

跨端扫码确认实现Web登录(扫二维码登录)

前端

`login`提供Web端用户登录和扫码

`login2`提供给跨端用户（如手机端）扫码进入

后端

后端实现

前端实现

Login1

Login2

跨端扫码确认实现Web登录(扫二维码登录)相关推荐

最新文章

热门文章

跨端扫码确认实现Web登录(扫二维码登录)

前端

login提供Web端用户登录和扫码

login2提供给跨端用户（如手机端）扫码进入

后端

后端实现

前端实现

Login1

Login2

跨端扫码确认实现Web登录(扫二维码登录)相关推荐

最新文章

热门文章

`login`提供Web端用户登录和扫码

`login2`提供给跨端用户（如手机端）扫码进入