Die Anmeldemethode „QR-Code scannen“ wird zunehmend von aktuellen Anwendungen verwendet. Da Sie sich das Passwort nicht merken müssen, können Sie sich schnell und einfach anmelden, solange Sie über eine WeChat-ID verfügen. Diese basiert auf dem temporären QR-Code mit Parametern auf der öffentlichen WeChat-Plattform und wird mit dem WebSocket-Dienst von Swoole kombiniert um eine Scan-Code-Anmeldung zu erreichen. Dieser Artikel teilt Ihnen hauptsächlich mit, wie Swoole die Anmeldefunktion zum Scannen von WeChat-Code implementiert, in der Hoffnung, allen zu helfen.
Mit der Popularität von WeChat wird die Scan-Code-Anmeldemethode zunehmend von aktuellen Anwendungen verwendet. Da Sie sich das Passwort nicht merken müssen, können Sie sich schnell und einfach anmelden, sofern Sie über eine WeChat-ID verfügen. Die offene Plattform von WeChat unterstützt nativ die Funktion zum Scannen von QR-Codes zum Anmelden, aber die meisten Menschen nutzen immer noch die öffentliche Plattform, sodass das Scannen von QR-Codes zum Anmelden nur von ihnen selbst implementiert werden kann. Dies basiert auf dem temporären QR-Code der öffentlichen WeChat-Plattform mit Parametern und kombiniert ihn mit dem WebSocket-Dienst von Swoole, um die Scan-Code-Anmeldung zu implementieren. Der allgemeine Prozess ist wie folgt:
Der Client öffnet die Anmeldeschnittstelle und verbindet sich mit dem WebSocket-Dienst.
Der WebScoket-Dienst generiert einen QR-Code mit Parametern und sendet ihn an den Kunden zurück. Der Kunde
Der Benutzer scannt den angezeigten QR-Code mit Parametern
Der WeChat-Server ruft den Scan zurück Ereignis und benachrichtigt den Entwicklerserver
Der Entwicklerserver benachrichtigt den WebSocket-Dienst
Der WebSocket-Dienst benachrichtigt den Client, dass die Anmeldung erfolgreich war
Verbindet sich mit dem WebSocket-Dienst
Nach der Installation von Swoole müssen wir den WebSocket-Dienst verwenden. Das Erstellen eines neuen WebSocket-Dienstes ist sehr einfach:
$server = new swoole_websocket_server("0.0.0.0", 1099);
$server->on('open', function (swoole_websocket_server $server, $request) use ($config){
echo "server: handshake success with fd{$request->fd}\n";
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
});Der Nachrichtenrückruf ist hier eigentlich nicht sinnvoll, da der Server Nachrichten sendet, aber einer muss festgelegt werden. Wenn die eingestellte Portnummer niedriger als 1024 ist, müssen Sie über Root-Berechtigungen verfügen. Denken Sie daran, den Port in der Firewall auf dem Server zu öffnen.
QR-Code mit Parametern generieren
Nachdem sich der Client erfolgreich mit dem WebSocket-Dienst verbunden hat, muss er einen WeChat-QR-Code mit Parametern generieren und ihn zur Anzeige an den Client zurücksenden:
$server->on('open', function (swoole_websocket_server $server, $request) use ($config){
$app = Factory::officialAccount($config['wechat']);
$result = $app->qrcode->temporary($request->fd, 120);
$url = $app->qrcode->url($result['ticket']);
$server->push($request->fd, json_encode([
'message_type' => 'qrcode_url',
'url' => $url
]));
});Wir generieren im offenen Rückruf einen temporären QR-Code. Der Szenenwert des QR-Codes ist der Dateideskriptor der Clientverbindung, um die Eindeutigkeit jedes Clients sicherzustellen. Die gültige Zeit ist auf 120 Sekunden festgelegt um zu verhindern, dass ein QR-Code mehrfach gescannt wird. Wenn die Nachricht an den Client gesendet wird, ist JSON erforderlich, um die Verarbeitung durch den Client zu erleichtern. Auch der Client-Code ist sehr einfach:
const socket = new WebSocket('ws://127.0.0.1:1099');
socket.addEventListener('message', function (event) {
var data = JSON.parse(event.data);
if (data.message_type == 'qrcode_url'){
$('#qrcode').attr('src', data.url);
}
});Scan-Ereignis zurückrufen
Nachdem der QR-Code auf dem Client angezeigt wird, muss der Benutzer aufgefordert werden, den Code zu scannen. Wenn ein Benutzer einen temporären QR-Code scannt, löst WeChat ein entsprechendes Rückrufereignis aus, und wir müssen das Code-Scanverhalten des Benutzers im Rückrufereignis verarbeiten. Unter anderem müssen wir einige von WeChat übergebene Parameter verwenden:
FromUserName 发送方帐号（一个OpenID） MsgType 消息类型，event Event 事件类型，subscribe EventKey 事件 KEY 值，qrscene_为前缀，后面为二维码的参数值
Hier ist zu beachten: Der EventKey, der durch das Scannen des von WeChat verfolgten QR-Codes übertragen wird, hat nicht das Präfix qrscene_ kann nur gefunden werden, indem der QR-Code gescannt und anschließend befolgt wird.
Nachdem wir den WeChat-Rückruf erhalten haben, müssen wir zunächst je nach Ereignistyp eine unterschiedliche Verarbeitung durchführen:
if ($message['MsgType'] == 'event'){
if ($message['Event'] == 'subscribe'){ //关注
return $this->subscribe($message);
}
if ($message['Event'] == 'unsubscribe') { //取消关注
return $this->unsubscribe($message);
}
if ($message['Event'] == 'SCAN'){ //已关注扫码
return $this->scan($message);
}
}else{
return "您好！欢迎使用 SwooleWechat 扫描登录";
}Hier erklären wir nur die Geschäftslogik eines besorgniserregenden Ereignisses und können codieren die anderen nach Bedarf:
public function subscribe($message){
$eventKey = intval(str_replace('qrscene_', '', $message['EventKey']));
$openId = $message['FromUserName'];
$user = $this->app->user->get($openId);
$this->notify(json_encode([
'type' => 'scan',
'fd' => $eventKey,
'nickname' => $user['nickname']
]));
$count = $this->count($openId);
$msgTemp = "%s，登录成功！\n这是你第%s次登录，玩的开心！";
return sprintf($msgTemp, $user['nickname'], $count);
}Der EventKey hier ist eigentlich der mit WebSocket verbundene Client-Dateideskriptor. Er erhält die OPEN_ID des Benutzers, der den QR-Code gescannt hat, und erhält die Benutzerinformationen basierend auf der OPEN_ID des Benutzers. benachrichtigt den WebSocket-Dienst und antwortet auf die Textnachricht an WeChat.
Einer der problematischeren Punkte hier ist die Benachrichtigung des WebSocket-Dienstes. Wir wissen, dass sich der Code für die Verarbeitung von WeChat-Rückrufen nicht auf dem WebSocket-Dienst befindet. Es gibt zwei offizielle Lösungen von Swoole:
Auf einen zusätzlichen UDP-Port hören
Swoole_client als Client verwenden, um auf den Server zuzugreifen
Hier wählen wir die zweite Option. Swoole Version 1.8 unterstützt einen Server, um mehrere Ports abzuhören. Wir fügen dem WebSocket-Dienst einen neuen TCP-Port hinzu:
$tcp_server = $server->addListener('0.0.0.0', 9999, SWOOLE_SOCK_TCP);
$tcp_server->set([]);
$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {
});Der Hauptserver ist das WebSocket- oder HTTP-Protokoll. Der neu überwachte TCP-Port erbt standardmäßig die Protokolleinstellungen des Hauptservers. Die Set-Methode muss separat aufgerufen werden, um das neue Protokoll festzulegen
Dann können wir den WebSocket-Dienst während des Code-Rückrufvorgangs benachrichtigen:
public function notify($message){
$client = new swoole_client(SWOOLE_SOCK_TCP);
if (!$client->connect('127.0.0.1', $this->config['notify_port'], -1)) {
return "connect failed. Error: {$client->errCode}\n";
}
$ret = $client->send($message);
}Über erfolgreiche Anmeldung benachrichtigen
Nachdem der WebSocket-Dienst die Benachrichtigung über die erfolgreiche Anmeldung erhalten hat, kann er den Benutzer verarbeiten Informationen nach Bedarf, und dann werden die Benutzerinformationen an den Browser des Clients übergeben, um die Ergebnisse anzuzeigen. Erinnern Sie sich an den TCP-Port, den wir gerade abgehört haben? Es kann im Empfangsereignis verarbeitet werden:
$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {
$data = json_decode($data, true);
if ($data['type'] == 'scan'){
$serv->push($data['fd'], json_encode([
'message_type' => 'scan_success',
'user' => $data['nickname']
]));
}
$serv->close($fd);
});Letzte Anmeldeschnittstelle:
Zusammenfassung
Der gesamte Prozess Es ist nicht schwierig. Die beiden Hauptschwierigkeiten sind die Kommunikation zwischen QR-Code-Scan-Benutzern und verschiedenen Servern, die den verbundenen Benutzern entsprechen. Unsere Lösung besteht darin, den verbundenen Dateideskriptor als temporären QR-Code-Szenenwert zu verwenden (Redis kann auch zum Speichern verwendet werden). es hier) Mapping-Beziehung), lauschen Sie dem neuen TCP-Port, um Benachrichtigungsnachrichten zu empfangen. Sie können http://wechat.sunnyshift.com/index.php besuchen, um es auszuprobieren. Denken Sie daran, es auf Ihrem Computer zu öffnen.
Verwandte Empfehlungen:
So implementieren Sie einen benutzerdefinierten WeChat-Scancode-Anmeldestil
PHP-Ideen und Code zur Implementierung der WeChat-Scancode-Anmeldung
Detaillierte Erläuterung der PC-WeChat-Scancode-Registrierung und des Anmeldebeispielcodes
Das obige ist der detaillierte Inhalt vonSwoole implementiert die Anmeldefunktion zum Scannen von WeChat-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
