Since QR code login is more convenient, faster and more flexible than account and password login, it is more popular among users in actual use.
This article mainly introduces the principle and overall process of scanning QR codes to log in, including the generation/obtaining of QR codes, expiration and invalidation processing, and monitoring of login status.
To facilitate understanding, I simply drew a UML sequence diagram to describe the general process of QR code login!
Summarize the core process:
Request the business server to obtain the QR code and UUID for login.
Connect to the socket server through websocket, and send heartbeats regularly (the time interval is adjusted according to the server configuration time) to maintain the connection.
The user scans the QR code through the APP and sends a request to the business server to process the login. Set login results based on UUID.
The socket server obtains the login result through monitoring, establishes session data, and pushes the login data to the user's browser based on the UUID.
The user logged in successfully, the server actively removed the socker connection from the connection pool, and the QR code became invalid.
It is also the UUID. This is the link throughout the entire process. It is a closed-loop login process. Each step of business processing is based on the UUD. processed. UUID is generated based on session_id or client IP address. Personally, I still recommend that each QR code has a separate UUID, which is applicable to a wider range of scenarios!
The front-end must maintain constant communication with the server to obtain the login result and QR code status. After looking at some implementation solutions on the Internet, basically all solutions are useful: polling, long polling, long links, and websockets. We cannot definitely say which solution is better and which one is worse. We can only say which solution is more suitable for the current application scenario. Personally, I recommend using long polling and websocket, which save server performance.
The benefits of scanning the QR code to log in are obvious, one is humanization, and the other is to prevent password leakage. However, new methods of access are often accompanied by new risks. Therefore, it is necessary to add appropriate safety mechanisms into the overall process. For example:
Code implementation and source code will be given later.
You can see the QR code resource requested by the user and obtain the qid.
When obtaining the QR code, the corresponding cache will be established and the expiration time will be set:
The socket server will be connected and heartbeats will be sent regularly.
At this time, the socket server will have corresponding connection log output:
The server verifies and processes the login, creates the session, and establishes the corresponding cache:
The Socket server reads the cache, starts pushing information, and closes the elimination connection:
The front end obtains information and processes login:
Note: This Demo is just a personal learning test, so it does not have many security mechanisms!
Use Nginx as the proxy socke server. Domain names can be used to facilitate load balancing. The domain name of this test: loc.websocket.net
websocker.conf
server {
listen 80;
server_name loc.websocket.net;
root /www/websocket;
index index.php index.html index.htm;
#charset koi8-r;
access_log /dev/null;
#access_log /var/log/nginx/nginx.localhost.access.log main;
error_log /var/log/nginx/nginx.websocket.error.log warn;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location / {
proxy_pass http://php-cli:8095/;
proxy_http_version 1.1;
proxy_connect_timeout 4s;
proxy_read_timeout 60s;
proxy_send_timeout 12s;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}is built using PHP socket server. In actual projects, you can consider using third-party applications, which will provide better stability!
QRServer.php
<?php
require_once dirname(dirname(__FILE__)) . '/Config.php';
require_once dirname(dirname(__FILE__)) . '/lib/RedisUtile.php';
require_once dirname(dirname(__FILE__)) . '/lib/Common.php';/**
* 扫码登陆服务端
* Class QRServer
* @author BNDong */class QRServer { private $_sock; private $_redis; private $_clients = array(); /**
* socketServer constructor. */
public function __construct()
{ // 设置 timeout
set_time_limit(0); // 创建一个套接字（通讯节点）
$this->_sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die("Could not create socket" . PHP_EOL);
socket_set_option($this->_sock, SOL_SOCKET, SO_REUSEADDR, 1); // 绑定地址
socket_bind($this->_sock, \Config::QRSERVER_HOST, \Config::QRSERVER_PROT) or die("Could not bind to socket" . PHP_EOL); // 监听套接字上的连接
socket_listen($this->_sock, 4) or die("Could not set up socket listener" . PHP_EOL);
$this->_redis = \lib\RedisUtile::getInstance();
} /**
* 启动服务 */
public function run()
{
$this->_clients = array();
$this->_clients[uniqid()] = $this->_sock; while (true){
$changes = $this->_clients;
$write = NULL;
$except = NULL;
socket_select($changes, $write, $except, NULL); foreach ($changes as $key => $_sock) { if($this->_sock == $_sock){ // 判断是不是新接入的 socket
if(($newClient = socket_accept($_sock)) === false){
die('failed to accept socket: '.socket_strerror($_sock)."\n");
}
$buffer = trim(socket_read($newClient, 1024)); // 读取请求
$response = $this->handShake($buffer);
socket_write($newClient, $response, strlen($response)); // 发送响应
socket_getpeername($newClient, $ip); // 获取 ip 地址
$qid = $this->getHandQid($buffer);
$this->log("new clinet: ". $qid); if ($qid) { // 验证是否存在 qid
if (isset($this->_clients[$qid])) $this->close($qid, $this->_clients[$qid]);
$this->_clients[$qid] = $newClient;
} else {
$this->close($qid, $newClient);
}
} else { // 判断二维码是否过期
if ($this->_redis->exists(\lib\Common::getQidKey($key))) {
$loginKey = \lib\Common::getQidLoginKey($key); if ($this->_redis->exists($loginKey)) { // 判断用户是否扫码
$this->send($key, $this->_redis->get($loginKey));
$this->close($key, $_sock);
}
$res = socket_recv($_sock, $buffer, 2048, 0); if (false === $res) {
$this->close($key, $_sock);
} else {
$res && $this->log("{$key} clinet msg: " . $this->message($buffer));
}
} else {
$this->close($key, $this->_clients[$key]);
}
}
}
sleep(1);
}
} /**
* 构建响应
* @param string $buf
* @return string */
private function handShake($buf){
$buf = substr($buf,strpos($buf,'Sec-WebSocket-Key:') + 18);
$key = trim(substr($buf, 0, strpos($buf,"\r\n")));
$newKey = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
$newMessage = "HTTP/1.1 101 Switching Protocols\r\n";
$newMessage .= "Upgrade: websocket\r\n";
$newMessage .= "Sec-WebSocket-Version: 13\r\n";
$newMessage .= "Connection: Upgrade\r\n";
$newMessage .= "Sec-WebSocket-Accept: " . $newKey . "\r\n\r\n"; return $newMessage;
} /**
* 获取 qid
* @param string $buf
* @return mixed|string */
private function getHandQid($buf) {
preg_match("/^[\s\n]?GET\s+\/\?qid\=([a-z0-9]+)\s+HTTP.*/", $buf, $matches);
$qid = isset($matches[1]) ? $matches[1] : ''; return $qid;
} /**
* 编译发送数据
* @param string $s
* @return string */
private function frame($s) {
$a = str_split($s, 125); if (count($a) == 1) { return "\x81" . chr(strlen($a[0])) . $a[0];
}
$ns = ""; foreach ($a as $o) {
$ns .= "\x81" . chr(strlen($o)) . $o;
} return $ns;
} /**
* 解析接收数据
* @param resource $buffer
* @return null|string */
private function message($buffer){
$masks = $data = $decoded = null;
$len = ord($buffer[1]) & 127; if ($len === 126) {
$masks = substr($buffer, 4, 4);
$data = substr($buffer, 8);
} else if ($len === 127) {
$masks = substr($buffer, 10, 4);
$data = substr($buffer, 14);
} else {
$masks = substr($buffer, 2, 4);
$data = substr($buffer, 6);
} for ($index = 0; $index < strlen($data); $index++) {
$decoded .= $data[$index] ^ $masks[$index % 4];
} return $decoded;
} /**
* 发送消息
* @param string $qid
* @param string $msg */
private function send($qid, $msg)
{
$frameMsg = $this->frame($msg);
socket_write($this->_clients[$qid], $frameMsg, strlen($frameMsg));
$this->log("{$qid} clinet send: " . $msg);
} /**
* 关闭 socket
* @param string $qid
* @param resource $socket */
private function close($qid, $socket)
{
socket_close($socket); if (array_key_exists($qid, $this->_clients)) unset($this->_clients[$qid]);
$this->_redis->del(\lib\Common::getQidKey($qid));
$this->_redis->del(\lib\Common::getQidLoginKey($qid));
$this->log("{$qid} clinet close");
} /**
* 日志记录
* @param string $msg */
private function log($msg)
{
echo '['. date('Y-m-d H:i:s') .'] ' . $msg . "\n";
}
}
$server = new QRServer();
$server->run();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扫码登录 - 测试页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./public/css/main.css">
</head>
<body translate="no">
<p class='box'>
<p class='box-form'>
<p class='box-login-tab'></p>
<p class='box-login-title'>
<p class='i i-login'></p><h2>登录</h2>
</p>
<p class='box-login'>
<p class='fieldset-body' id='login_form'>
<button onclick="openLoginInfo();" class='b b-form i i-more' title='Mais Informações'></button>
<p class='field'>
<label for='user'>用户账户</label>
<input type='text' id='user' name='user' title='Username' placeholder="请输入用户账户/邮箱地址" />
</p>
<p class='field'>
<label for='pass'>用户密码</label>
<input type='password' id='pass' name='pass' title='Password' placeholder="情输入账户密码" />
</p>
<label class='checkbox'>
<input type='checkbox' value='TRUE' title='Keep me Signed in' /> 记住我 </label>
<input type='submit' id='do_login' value='登录' title='登录' />
</p>
</p>
</p>
<p class='box-info'>
<p><button onclick="closeLoginInfo();" class='b b-info i i-left' title='Back to Sign In'></button><h3>扫码登录</h3>
</p>
<p class='line-wh'></p>
<p style="position: relative;">
<input type="hidden" id="qid" value="">
<p id="qrcode-exp">二维码已失效<br>点击重新获取</p>
<img id="qrcode" src="" />
</p>
</p>
</p>
<script src='./public/js/jquery.min.js'></script>
<script src='./public/js/modernizr.min.js'></script>
<script id="rendered-js">
$(document).ready(function () {
restQRCode();
openLoginInfo();
$('#qrcode-exp').click(function () {
restQRCode();
$(this).hide();
});
}); /**
* 打开二维码 */
function openLoginInfo() {
$(document).ready(function () {
$('.b-form').css("opacity", "0.01");
$('.box-form').css("left", "-100px");
$('.box-info').css("right", "-100px");
});
} /**
* 关闭二维码 */
function closeLoginInfo() {
$(document).ready(function () {
$('.b-form').css("opacity", "1");
$('.box-form').css("left", "0px");
$('.box-info').css("right", "-5px");
});
} /**
* 刷新二维码 */
var ws, wsTid = null;
function restQRCode() {
$.ajax({
url: 'http://localhost/qrcode/code.php',
type:'post',
dataType: "json", async: false,
success:function (result) {
$('#qrcode').attr('src', result.img);
$('#qid').val(result.qid);
}
}); if ("WebSocket" in window) { if (typeof ws != 'undefined'){
ws.close(); null != wsTid && window.clearInterval(wsTid);
}
ws = new WebSocket("ws://loc.websocket.net?qid=" + $('#qid').val());
ws.onopen = function() {
console.log('websocket 已连接上！');
};
ws.onmessage = function(e) { // todo: 本函数做登录处理，登录判断，创建缓存信息！ console.log(e.data); var result = JSON.parse(e.data);
console.log(result);
alert('登录成功：' + result.name);
};
ws.onclose = function() {
console.log('websocket 连接已关闭！');
$('#qrcode-exp').show(); null != wsTid && window.clearInterval(wsTid);
}; // 发送心跳
wsTid = window.setInterval( function () { if (typeof ws != 'undefined') ws.send('1');
}, 50000 );
} else { // todo: 不支持 WebSocket 的，可以使用 js 轮询处理，这里不作该功能实现！
alert('您的浏览器不支持 WebSocket！');
}
}</script>
</body>
</html>Test use, simulated login processing, no security authentication ! !
<?php
require_once dirname(__FILE__) . '/lib/RedisUtile.php';
require_once dirname(__FILE__) . '/lib/Common.php';/**
* ------- 登录逻辑模拟 --------
* 请根据实际编写登录逻辑并处理安全验证 */$qid = $_GET['qid'];
$uid = $_GET['uid'];
$data = array();switch ($uid)
{ case '1':
$data['uid'] = 1;
$data['name'] = '张三'; break; case '2':
$data['uid'] = 2;
$data['name'] = '李四'; break;
}
$data = json_encode($data);
$redis = \lib\RedisUtile::getInstance();
$redis->setex(\lib\Common::getQidLoginKey($qid), 1800, $data);For more related knowledge, please visit PHP Chinese website!
The above is the detailed content of Share the PHP code scanning login principle and implementation method. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
