利用Signalr实现手机端App扫码登录web页面

实现原理：

1、web登录页面，利用jquery.qrcode展示一个随机生成的登录码的二维码；

2、手机App扫描二维码取得登录码；

3、手机App将本地用户id+登录码通过api提交服务器；

4、服务器api，收到手机App请求，根据用户id+登录码，修改用户信息，同时将用户id+登录码广播；

5、web登录页面收到用户id+登录码，先本地验证登录码是否一致，然后向服务器验证用户id+登录码，验证成功跳转到指定页面。

6、完成扫码登录。

模拟web登录页面代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>扫码登录测试</title></head><body><script src="http://***/Scripts/jquery-1.10.2.min.js"></script><script src="http://***/Scripts/jquery.signalR-2.4.1.min.js"></script><script src="http://***/Scripts/jquery.qrcode.min.js"></script><script src="http://***/Signalr/hubs"></script><div id="qrcode"><canvas width="256" height="256"></canvas></div><script type="text/javascript">jQuery.support.cors=true;var SignalrHub=$.connection.hub;$(function(){var loginCode=guid();//生成登录码二维码jQuery('#qrcode').qrcode(loginCode);console.log(loginCode);SignalrHub.url="http://***/Signalr/hubs";//服务器端Singnalr hub 路径var hubClient=$.connection.messageHub.client;hubClient.ShowMessage=function(msg){var jsonMsg= $.parseJSON(msg);if(jsonMsg && jsonMsg.loginCode==loginCode){//向服务器验证用户id+登录码if(server.CheckLoginCode(jsonMsg.UserId,jsonMsg.loginCode)){alert("登录成功！");top.location.reload();//跳转到需要的页面}}}SignalrHub.start();//SignalrHub.stop()});//生成仿Guid字符串function guid() {return 'ecbxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);return v.toString(16);});}</script></body>
</html>

模拟服务器代码：

//app设置用户登录码接口
public string SetLoginCode(string  userId，string loginCode)
{    //todo 设置登录码//广播消息var hub = GlobalHost.ConnectionManager.GetHubContext<MessageHub>();hub.Clients.All.ShowMessage(userId+loginCode);//也可以定向广播
｝//web验证登录码接口
public bool CheckLoginCode(string  userId，string loginCode)
{    //todo 验证登录码//todo 验证成功 清除或者更改登录码return true；
｝

服务器如何使用Signalr 请参阅相关文档 https://blog.csdn.net/admans/article/details/89309761。

利用Signalr实现手机端App扫码登录web页面相关推荐

vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...
网页二维码，App 扫码登录实现原理
需求介绍首先,介绍下什么是扫码登录.现在,大部分同学手机上都装有qq和淘宝,天猫等这一类的软件.而开发这些app的企业,都有他们相对应的网站.为了让用户在使用他们的网站时,登录更加方便和安全.这些企 ...
架构：网页二维码，App 扫码登录实现原理
需求介绍首先,介绍下什么是扫码登录.现在,大部分同学手机上都装有qq和淘宝,天猫等这一类的软件.而开发这些app的企业,都有他们相对应的网站.为了让用户在使用他们的网站时,登录更加方便和安全.这些企 ...
【app扫码登录】Java app扫码登录功能实现
一.实现原理 PC 端发送 "扫码登录" 请求,服务端生成二维码 uuid,并存储二维码的过期时间.状态等信息. PC 端获取二维码并显示. PC 端开始轮询检查二维码的状态(2s ...
心通达OA 实现APP扫码登录过程
1.PC端web页面上登录切换到二维码 2.打开手机APP扫码 3.扫描 4.扫描后确认登录. 完成登录,进入心通达OA系统.
手机端APP促销优惠券优惠活动页面设计模板
进入十月各大商家纷纷计入促销倒计时队伍,力争全年销售达到理想的份额,促销当然离不开主题手机APP活动页面的设计,风格简约现代为主,注入直观优惠券传统元素的购物券,礼盒,VIP,金币等,让画面喜悦氛围得 ...
php技术网站PC端用手机APP扫码实现登录
去年做的功能,整理一下分享出来如淘宝,腾讯等网站登录页面,都有APP扫码登录这个功能,去年也做了一个,基于自己的APP实现, 并非第三方登陆. 思路:1. 生成一个二维码, 二维码链接带有密钥. 2 ...
微信电脑版只能扫码登录的原因，你一定想不到
来源:电脑报CQCPCW 谁能想到,微信原本是作为一款社交软件,如今却成了很多上班族使用频率最高的办公软件.很多人电脑上安装了PC版微信,工作聊天两不误,传输文件也算方便. 但微信PC版总是不尽人意, ...
一图搞懂扫码登录的技术原理
现在扫码登录是一种很常见的登录方式.当用户需要登录某个网站时,网站会提供一种扫码登录的方式,用户打开相应的手机App,扫描网站上显示的二维码,然后在App中确认登录,网站监测到用户确认登录后,跳转到登 ...
Java 语言实现简易版扫码登录
基本介绍相信大家对二维码都不陌生,生活中到处充斥着扫码登录的场景,如登录网页版微信.支付宝等.最近学习了一下扫码登录的原理,感觉蛮有趣的,于是自己实现了一个简易版扫码登录的 Demo,以此记录一下学 ...

利用Signalr实现手机端App扫码登录web页面

利用Signalr实现手机端App扫码登录web页面相关推荐

最新文章

热门文章