Da die QR-Code-Anmeldung bequemer, schneller und flexibler ist als die Konto- und Passwort-Anmeldung, erfreut sie sich bei den tatsächlich genutzten Benutzern größerer Beliebtheit.
In diesem Artikel werden hauptsächlich das Prinzip und der Gesamtprozess des Scannens von QR-Codes zum Anmelden vorgestellt, einschließlich der Generierung/Erlangung von QR-Codes, der Ablauf- und Ungültigkeitsverarbeitung sowie der Überwachung des Anmeldestatus.
Um das Verständnis zu erleichtern, habe ich einfach ein UML-Sequenzdiagramm gezeichnet, um den allgemeinen Prozess der QR-Code-Anmeldung zu beschreiben!
Fassen Sie den Kernprozess zusammen:
Fordern Sie den Unternehmensserver auf, den QR-Code und die UUID für die Anmeldung zu erhalten.
Stellen Sie über WebSocket eine Verbindung zum Socket-Server her und senden Sie regelmäßig Heartbeats (das Zeitintervall wird entsprechend der Serverkonfigurationszeit angepasst), um die Verbindung aufrechtzuerhalten.
Der Benutzer scannt den QR-Code über die APP und sendet eine Anfrage an den Business-Server, um die Anmeldung zu verarbeiten. Legen Sie Anmeldeergebnisse basierend auf der UUID fest.
Der Socket-Server erhält das Anmeldeergebnis durch Überwachung, erstellt Sitzungsdaten und überträgt die Anmeldedaten basierend auf der UUID an den Browser des Benutzers.
Der Benutzer hat sich erfolgreich angemeldet, der Server hat die Socker-Verbindung aktiv aus dem Verbindungspool entfernt und der QR-Code wurde ungültig.
ist dies der Link während des gesamten Prozesses. Es handelt sich um einen geschlossenen Anmeldeprozess basierend auf der UUD verarbeitet. Die UUID wird basierend auf der Sitzungs-ID oder der Client-IP-Adresse generiert. Persönlich empfehle ich dennoch, dass jeder QR-Code eine eigene UUID hat, was auf ein breiteres Spektrum von Szenarien anwendbar ist!
Das Front-End muss eine ständige Kommunikation mit dem Server aufrechterhalten, um Anmeldeergebnisse und den QR-Code-Status zu erhalten. Nachdem ich mir einige Implementierungslösungen im Internet angesehen habe, sind grundsätzlich alle Lösungen nützlich: Polling, Long Polling, Long Links und WebSockets. Wir können nicht sicher sagen, welche Lösung besser und welche schlechter ist. Wir können nur sagen, welche Lösung für das aktuelle Anwendungsszenario besser geeignet ist. Persönlich empfehle ich die Verwendung von Long Polling und WebSocket, um die Serverleistung zu schonen.
Die Vorteile des Scannens des QR-Codes zum Anmelden liegen auf der Hand, zum einen in der Humanisierung und zum anderen in der Verhinderung von Passwortlecks. Allerdings gehen mit neuen Zugangswegen oft auch neue Risiken einher. Daher ist es notwendig, entsprechende Sicherheitsmechanismen in den Gesamtprozess einzubauen. Zum Beispiel:
Die Code-Implementierung und der Quellcode werden erläutert später gegeben.
Sie können die vom Benutzer angeforderte QR-Code-Ressource sehen und abrufen qid.
Beim Erhalt des QR-Codes wird der entsprechende Cache eingerichtet und die Ablaufzeit festgelegt:
Danach wird der Socket-Server verbunden und regelmäßig Heartbeats gesendet.
Zu diesem Zeitpunkt wird der Socket-Server eine entsprechende Verbindungsprotokollausgabe haben:
Der Server überprüft und verarbeitet die Anmeldung , erstellt die Sitzung und richtet den entsprechenden Cache ein:
Der Socket-Server liest den Cache, beginnt mit dem Pushen von Informationen und schließt die Eliminierungsverbindung:
Das Frontend ruft Informationen ab und verarbeitet die Anmeldung:
Hinweis: Diese Demo ist nur ein persönlicher Lerntest und verfügt daher nicht über viele Sicherheitsmechanismen!
Verwenden Sie Nginx als Proxy-Socket-Server. Domänennamen können verwendet werden, um den Lastausgleich zu erleichtern. Domainname für diesen 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;
}
}Socket-Server, der mit PHP erstellt wurde. In tatsächlichen Projekten können Sie die Verwendung von Anwendungen von Drittanbietern in Betracht ziehen, die für eine bessere Stabilität sorgen!
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>Testnutzung, simulierte Login-Verarbeitung, keine Sicherheitsauthentifizierung ! !
<?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);Weiteres diesbezügliches Wissen finden Sie auf der PHP-Chinese-Website!
Das obige ist der detaillierte Inhalt vonTeilen Sie das Anmeldeprinzip und die Implementierungsmethode des PHP-Code-Scannens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So öffnen Sie eine PHP-Datei
So entfernen Sie die ersten paar Elemente eines Arrays in PHP
Was tun, wenn die PHP-Deserialisierung fehlschlägt?
So verbinden Sie PHP mit der MSSQL-Datenbank
So verbinden Sie PHP mit der MSSQL-Datenbank
So laden Sie HTML hoch
So lösen Sie verstümmelte Zeichen in PHP
So öffnen Sie PHP-Dateien auf einem Mobiltelefon
