현재 애플리케이션에서 QR 코드 스캔 로그인 방법을 점점 더 많이 사용하고 있습니다. 비밀번호를 기억할 필요가 없기 때문에 WeChat ID만 있으면 빠르고 쉽게 로그인할 수 있습니다. 이는 WeChat 공개 플랫폼의 매개변수가 있는 임시 QR 코드를 기반으로 하며 Swoole의 WebSocket 서비스와 결합됩니다. 스캔 코드 로그인을 달성합니다. 이 기사는 모든 사람에게 도움이 되기를 바라며 WeChat 코드 스캐닝 로그인 기능을 구현하기 위해 Swoole과 주로 공유합니다.
WeChat의 인기로 인해 현재 애플리케이션에서 QR 코드 로그인 방법을 점점 더 많이 사용하고 있습니다. 비밀번호를 기억할 필요가 없기 때문에 위챗 아이디만 있으면 빠르고 쉽게 로그인할 수 있습니다. WeChat의 개방형 플랫폼은 기본적으로 QR 코드를 스캔하여 로그인하는 기능을 지원하지만 대부분의 사람들은 여전히 공개 플랫폼을 사용하므로 QR 코드를 스캔하여 로그인하는 것은 스스로 구현할 수 있습니다. 이는 매개변수가 포함된 WeChat 공개 플랫폼의 임시 QR 코드를 기반으로 하며 이를 Swoole의 WebSocket 서비스와 결합하여 스캔 코드 로그인을 구현합니다. 일반적인 프로세스는 다음과 같습니다.
클라이언트는 로그인 인터페이스를 열고 WebSocket 서비스에 연결합니다
WebScoket 서비스는 매개변수가 포함된 QR 코드를 생성하여 클라이언트에 반환합니다.
사용자는 매개변수가 포함된 QR 코드 표시
WeChat 서버는 스캔 이벤트를 콜백하고 개발자 서버에 알립니다
개발자 서버는 WebSocket 서비스에 알립니다
WebSocket 서비스는 클라이언트에 로그인 성공을 알립니다
WebSocket 서비스에 연결
Swoole을 설치한 후에는 WebSocket 서비스를 사용해야 합니다. 새로운 WebSocket 서비스를 생성하는 것은 매우 간단합니다.
$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) {
});여기서 메시지 콜백은 서버가 메시지를 보내기 때문에 실제로 유용하지 않지만 하나를 설정해야 합니다. 설정된 포트 번호가 1024보다 낮은 경우에는 루트 권한이 있어야 합니다. 서버의 방화벽에서 포트를 열어야 합니다.
매개변수가 포함된 QR 코드 생성
클라이언트가 WebSocket 서비스에 성공적으로 연결되면 매개변수가 포함된 WeChat QR 코드를 생성하고 표시를 위해 클라이언트에 반환해야 합니다.
$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
]));
});공개 콜백에서 QR 코드를 생성합니다. 임시 QR 코드인 QR 코드의 장면 값은 클라이언트 연결의 파일 설명자이므로 각 클라이언트의 고유성을 보장하기 위해 유효 시간은 120초로 설정되어 하나의 QR 코드가 여러 번 스캔되는 것을 방지합니다. 메시지가 클라이언트에 푸시되면 클라이언트 처리를 용이하게 하기 위해 json이 필요합니다. 클라이언트 코드도 매우 간단합니다.
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);
}
});코드 스캔 이벤트를 다시 호출
QR 코드가 클라이언트에 표시된 후 사용자에게 코드를 스캔하라는 메시지가 표시되어야 합니다. 사용자가 임시 QR 코드를 스캔하면 WeChat은 해당 콜백 이벤트를 트리거하고 콜백 이벤트에서 사용자의 코드 스캔 동작을 처리해야 합니다. 그중 WeChat에서 전달한 일부 매개변수를 사용해야 합니다.
FromUserName 发送方帐号（一个OpenID） MsgType 消息类型，event Event 事件类型，subscribe EventKey 事件 KEY 值，qrscene_为前缀，后面为二维码的参数值
여기서 주의할 점: WeChat이 따라온 QR 코드를 스캔하여 푸시된 EventKey에는 qrscene_ 접두사가 없습니다. 스캔을 통해서만 찾을 수 있습니다. QR코드를 입력하고 따라해보세요.
WeChat 콜백을 받은 후 먼저 다양한 이벤트 유형에 따라 다양한 처리를 수행해야 합니다.
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 扫描登录";
}여기에서는 한 이벤트의 비즈니스 로직만 설명하고 나머지는 필요에 따라 코딩합니다.
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);
}여기의 EventKey는 다음과 같습니다. 실제로 WebSocket에 연결됨 클라이언트 파일 디스크립터는 QR 코드를 스캔한 사용자의 OPEN_ID를 획득하고, 사용자의 OPEN_ID를 기반으로 사용자 정보를 획득하여 WebSocket 서비스에 알리고 WeChat에 문자 메시지에 응답합니다.
여기서 더 까다로운 점 중 하나는 WebSocket 서비스에 알리는 방법입니다. WeChat 콜백을 처리하는 코드가 WebSocket 서비스에 없다는 것을 알고 있는데, 서로 다른 서버는 어떻게 통신합니까? Swoole에서 제공하는 두 가지 공식 솔루션이 있습니다.
추가 UDP 포트 듣기
swoole_client를 클라이언트로 사용하여 서버에 액세스
여기서 두 번째 솔루션을 선택합니다. Swoole 1.8 버전은 하나의 서버를 지원합니다. 여러 포트를 수신하기 위해 WebSocket 서비스에 새 TCP 포트를 추가합니다.
$tcp_server = $server->addListener('0.0.0.0', 9999, SWOOLE_SOCK_TCP);
$tcp_server->set([]);
$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {
});기본 서버는 WebSocket 또는 Http 프로토콜입니다. 새 수신 TCP 포트는 기본적으로 기본 서버의 프로토콜 설정을 상속합니다. 새 프로토콜을 설정하려면 별도로 호출해야 합니다. 새 프로토콜은 해당 프로토콜에 도달한 후에만 활성화됩니다.
그런 다음 코드 스캔 콜백 프로세스 중에 WebSocket 서비스에 알릴 수 있습니다.
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);
}성공적인 로그인 알림
WebSocket 서비스 이후 성공적인 로그인 알림을 받으면 사용자를 필요한 정보로 처리한 다음 사용자 정보를 클라이언트 브라우저에 전달하여 방금 수신한 TCP 포트를 기억하십니까? 수신 이벤트에서 처리할 수 있습니다:
$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);
});마지막 로그인 인터페이스:
요약
두 가지 주요 어려움은 연결된 사용자에 해당하는 스캐닝 코드 사용자와 통신입니다. 서로 다른 서버 간의 통신을 위해 우리의 솔루션은 연결된 파일 설명자를 임시 QR 코드 장면 값으로 사용하고(Redis는 매핑 관계를 저장하는 데에도 사용할 수 있음) 알림 메시지를 수신하기 위해 새 TCP 포트를 수신하는 것입니다. http://wechat.sunnyshift.com/index.php를 방문하여 시험해 볼 수 있습니다. 컴퓨터에서 열어야 합니다.
관련 권장 사항:
사용자 정의 WeChat 코드 스캔 로그인 스타일을 구현하는 방법
WeChat 코드 스캔 로그인 스타일을 구현하기 위한 PHP의 아이디어와 코드
PC위챗 스캔코드 등록 및 로그인 예시코드에 대한 자세한 설명
위 내용은 Swoole은 WeChat 코드 스캐닝 로그인 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
