Swoole implémente la fonction de connexion par analyse de code WeChat

La méthode de connexion par scan QR code est de plus en plus utilisée par les applications actuelles. Comme il n'est pas nécessaire de mémoriser le mot de passe, tant que vous disposez d'un identifiant WeChat, vous pouvez vous connecter rapidement et facilement. Celui-ci est basé sur le code QR temporaire avec les paramètres de la plateforme publique WeChat et est combiné avec le service WebSocket de Swoole. pour obtenir une connexion par scan-code. Cet article partage principalement avec vous Swoole pour implémenter la fonction de connexion par analyse de code WeChat, dans l'espoir d'aider tout le monde.

Avec la popularité de WeChat, la méthode de connexion par code scanné est de plus en plus utilisée par les applications actuelles. Comme vous n’avez pas besoin de vous souvenir du mot de passe, vous pouvez vous connecter rapidement et facilement tant que vous disposez d’un identifiant WeChat. La plate-forme ouverte de WeChat prend en charge nativement la fonction de numérisation du code QR pour se connecter, mais la plupart des gens utilisent toujours la plate-forme publique, donc la numérisation du code QR pour se connecter ne peut être mise en œuvre que par eux-mêmes. Ceci est basé sur le code QR temporaire avec paramètres de la plate-forme publique WeChat et le combine avec le service WebSocket de Swoole pour implémenter la connexion par scan code. Le processus général est le suivant :

1. Le client ouvre l'interface de connexion et se connecte au service WebSocket

2. Le service WebScoket génère un QR code avec des paramètres et le renvoie au client Le client

3. L'utilisateur scanne le code QR affiché avec des paramètres

4. Le serveur WeChat rappelle le scan événement de code et informe le serveur développeur

5. Le serveur développeur informe le service WebSocket

6. Le service WebSocket informe le client que la connexion est réussie

Se connecte au service WebSocket

Après avoir installé Swoole, nous devons utiliser le service WebSocket. Créer un nouveau service WebSocket est très simple :

$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) {
});

Le rappel de message ici n'est en fait pas utile, car le serveur envoie des messages, mais il faut en définir un. Si le numéro de port défini est inférieur à 1024, vous devez disposer des autorisations root. N'oubliez pas d'ouvrir le port dans le pare-feu du serveur.

Générer un code QR avec des paramètres

Une fois que le client s'est connecté avec succès au service WebSocket, il doit générer un code QR WeChat avec des paramètres et le renvoyer au client pour affichage :

$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
  ]));
});

Nous générons un code QR temporaire dans le rappel ouvert. La valeur de scène du code QR est le descripteur de fichier de la connexion client, afin que l'unicité de chaque client puisse être garantie. La durée de validité est fixée à 120. secondes pour empêcher qu’un code QR soit scanné plusieurs fois. Lorsque le message est transmis au client, json est requis pour faciliter le traitement du client. Le code client est également très simple :

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);
    }
  });

Rappelez l'événement de numérisation

Une fois le code QR affiché sur le client, l'utilisateur doit être invité à scanner le code. Lorsqu'un utilisateur scanne un code QR temporaire, WeChat déclenchera un événement de rappel correspondant, et nous devons gérer le comportement d'analyse du code de l'utilisateur dans l'événement de rappel. Parmi eux, nous devons utiliser certains paramètres transmis par WeChat :

FromUserName  发送方帐号（一个OpenID）
MsgType      消息类型，event
Event      事件类型，subscribe
EventKey    事件 KEY 值，qrscene_为前缀，后面为二维码的参数值

Une chose à noter ici : l'EventKey poussé en scannant le code QR qui a été suivi par WeChat n'a pas le préfixe qrscene_ It. ne peut être trouvé qu’en scannant le code QR puis en le suivant.

Après avoir reçu le rappel WeChat, nous devons d'abord effectuer différents traitements en fonction des différents types d'événements :

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 扫描登录";
}

Ici, nous expliquons uniquement la logique métier d'un événement préoccupant, et nous pouvons coder les autres selon les besoins :

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);
}

L'EventKey ici est en fait le descripteur de fichier client connecté à WebSocket. Il obtient l'OPEN_ID de l'utilisateur qui a scanné le code QR, obtient les informations utilisateur en fonction de l'OPEN_ID de l'utilisateur, informe le service WebSocket et répond au message texte envoyé à WeChat.

L'un des points les plus problématiques ici est de savoir comment notifier le service WebSocket. Nous savons que le code de traitement des rappels WeChat n'est pas sur le service WebSocket. Alors, comment les différents serveurs communiquent-ils ? Il existe deux solutions officielles fournies par Swoole :

1. Écouter un port UDP supplémentaire

2. Utiliser swoole_client en tant que client pour accéder au serveur
   

Ici, nous choisissons la deuxième option. Swoole version 1.8 prend en charge un serveur pour écouter plusieurs ports. Nous ajoutons un nouveau port TCP au service WebSocket :

$tcp_server = $server->addListener('0.0.0.0', 9999, SWOOLE_SOCK_TCP);
$tcp_server->set([]);
$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {
  
});

<.>Le serveur principal est le protocole WebSocket ou Http. Le port TCP nouvellement surveillé héritera des paramètres de protocole du serveur principal par défaut. La méthode set doit être appelée séparément pour définir le nouveau protocole afin d'activer le nouveau protocole

Ensuite, nous pouvons scanner Notifier le service WebSocket pendant le processus de rappel de code :

Notifier une connexion réussie

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);
}

Une fois que le service WebSocket a reçu la notification de connexion réussie, il peut traiter l'utilisateur informations selon les besoins, puis Les informations utilisateur sont transmises au navigateur du client pour afficher les résultats. Vous souvenez-vous du port TCP que nous venons d'écouter ? Il peut être traité lors de l'événement de réception :

Dernière interface de connexion :

$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);
});

Résumé

L'ensemble du processus Ce n'est pas difficile. Les deux principales difficultés sont la communication entre les utilisateurs de scan de code QR et les différents serveurs correspondant aux utilisateurs connectés. Notre solution consiste à utiliser le descripteur de fichier connecté comme valeur de scène de code QR temporaire (Redis peut également être utilisé pour stocker). ici) Relation de mappage), écoutez le nouveau port TCP pour recevoir des messages de notification. Vous pouvez visiter http://wechat.sunnyshift.com/index.php pour l'essayer, n'oubliez pas de l'ouvrir sur votre ordinateur.

Recommandations associées :

Comment implémenter un style de connexion personnalisé par code d'analyse WeChat

L'idée et le code de PHP pour implémenter le code d'analyse WeChat style de connexion

Explication détaillée de l'enregistrement du code de numérisation PC WeChat et de l'exemple de code de connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!