Comment implémenter la connexion à l'applet WeChat en PHP

Le mini-programme WeChat est un type d'application très populaire ces dernières années. En raison de sa commodité, de sa facilité d'utilisation et de son intégrité écologique, il est largement utilisé dans divers scénarios. Lors du développement d'une applet WeChat, il est souvent nécessaire de mettre en œuvre une fonction de connexion utilisateur, qui est aussi difficile à mettre en œuvre que la connexion traditionnelle à un site Web. Cet article présentera le processus de mise en œuvre de la connexion par applet WeChat, qui comprend principalement l'API d'appel frontal pour obtenir le code, le back-end recevant le code et demandant au serveur WeChat d'obtenir l'openid et la session_key de l'utilisateur, et enfin le stockage du informations utilisateur dans sa propre base de données.

1. Processus de connexion au programme WeChat Mini

Le processus de connexion au programme WeChat Mini est illustré dans la figure ci-dessous :

Le processus spécifique est le suivant :

1. L'utilisateur ouvre le mini programme et clique sur le bouton de connexion. .
2. Le front-end appelle l'API via wx.login pour obtenir le code d'identification de connexion temporaire.
3. Envoyez le code au serveur backend.
4. Le backend envoie une requête au serveur WeChat pour obtenir l'openid et la session_key.
5. Le serveur WeChat renvoie openid et session_key.
6. Le backend interroge la base de données en fonction de l'openid, et si l'utilisateur n'existe pas, il est ajouté à la base de données.
7. Le backend stocke les informations utilisateur, génère un jeton de connexion personnalisé et le renvoie au frontend.
8. Le frontal stocke le jeton localement en tant qu'identifiant de connexion utilisateur.
9. La prochaine fois que l'utilisateur se connecte, le front-end transporte le token et envoie une requête au back-end. Le back-end vérifie la validité du token. S'il est valide, la connexion est réussie, sinon elle n'est pas connectée. l'erreur est renvoyée.

2. Le front-end obtient le code d'identification de connexion temporaire

Le front-end utilise wx.login pour appeler l'API afin d'obtenir le code d'identification de connexion temporaire. Le code renvoyé par cette API n'est valable que 5 minutes, la requête doit donc être envoyée au backend à temps.

wx.login({
  success: function(res) {
    if (res.code) {
      // 发送code至后端服务器
      wx.request({
        url: 'https://example.com/login.php',
        method: 'POST',
        data: {'code': res.code},
        success: function(resp) {
          // 获取后端返回的token并存储至本地
          wx.setStorageSync('token', resp.data.token);
        }
      });
    } else {
      console.log('获取登录态失败！' + res.errMsg);
    }
  }
});

3. Le backend obtient openid et session_key

Le backend reçoit le code d'identification de connexion temporaire envoyé par le frontend et envoie une demande au serveur WeChat pour obtenir openid et session_key. L'URL demandée est : https://api.weixin.qq.com/sns/jscode2session. Les paramètres qui doivent être transportés incluent appid, secret, js_code et grant_type, où appid et secret sont l'ID de développeur et la clé correspondante de l'applet, js_code est le code obtenu par le front-end, grant_type est le type d'autorisation et la valeur est le code_autorisation.

$appid = "Your AppID";
$secret = "Your AppSecret";
$code = $_POST['code'];
$url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
$res = curl_exec($ch);
curl_close($ch);
$data = json_decode($res, true);
$openid = $data['openid'];
$session_key = $data['session_key'];

4. Le backend traite les informations utilisateur

Le backend interroge la base de données en fonction de l'openid. Si l'utilisateur n'existe pas, il est ajouté à la base de données. Dans cet exemple, MySQL est utilisé comme système de gestion de base de données. La table de données utilisateur est nommée user et comprend les champs id, openid et create_time. Parmi eux, id est l'ID utilisateur (auto-croissant), openid est l'identifiant unique de l'utilisateur et create_time est l'heure de création de l'utilisateur.

// 连接数据库
$con = mysqli_connect('localhost', 'root', 'password', 'database');
mysqli_set_charset($con, 'utf8');

// 查询用户
$result = mysqli_query($con, "SELECT * FROM user WHERE openid='$openid' LIMIT 1");

if(mysqli_num_rows($result) == 0) {
  // 添加新用户
  $now = date('Y-m-d H:i:s');
  mysqli_query($con, "INSERT INTO user (openid, create_time) VALUES ('$openid', '$now')");

  // 获取用户ID
  $user_id = mysqli_insert_id($con);
} else {
  // 获取用户ID
  $row = mysqli_fetch_assoc($result);
  $user_id = $row['id'];
}

Une fois l'ID utilisateur obtenu avec succès, le backend peut générer un jeton de connexion personnalisé et stocker les informations utilisateur.

// 生成token
$token = md5($user_id . time() . mt_rand());

// 存储token和用户信息
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$redis->setex($token, 3600 * 24 * 7, $user_id);

// 返回token
echo json_encode(array('token' => $token));

5. Jeton de stockage frontal

Une fois que le front-end a obtenu le jeton renvoyé par le back-end, il le stocke localement. Généralement, LocalStorage ou SessionStorage est utilisé pour le stockage afin de pouvoir être récupéré à la demande lors de la prochaine visite.

wx.request({
  url: 'https://example.com/login.php',
  method: 'POST',
  data: {'code': res.code},
  success: function(resp) {
    // 获取后端返回的token并存储至本地
    wx.setStorageSync('token', resp.data.token);
  }
});

6. Vérifiez la validité du jeton lors de la prochaine visite de l'utilisateur

Lors de la prochaine visite de l'utilisateur, le front-end doit transporter le jeton précédemment obtenu et stocké pour envoyer une demande au back-end, et le back-end end vérifie la validité du jeton. Si le jeton est valide, la connexion réussit, sinon une erreur de non-connexion est renvoyée.

// 验证token有效性
$token = $_POST['token'];
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$user_id = $redis->get($token);

if($user_id) {
  // 验证成功，返回用户信息
  // ...
} else {
  // 验证失败，返回未登录错误
  echo json_encode(array('errcode' => 40001, 'errmsg' => 'user not logged in'));
}

7. Résumé

Pour implémenter la connexion par applet WeChat, le front-end et le back-end doivent coopérer pour effectuer plusieurs étapes, notamment le front-end obtenant le code d'identification de connexion temporaire, le back-end obtenant openid et session_key. , le back-end traite les informations utilisateur, génère un jeton d'état de connexion personnalisé et le renvoie au front-end. Le frontal stocke le jeton localement comme identifiant de connexion pour la prochaine visite. Après avoir reçu la demande de l'utilisateur, le backend doit vérifier si le jeton est valide, s'il est valide, il renverra les informations utilisateur correspondantes, sinon il renverra une erreur de non-connexion. Grâce aux étapes ci-dessus, la fonction de connexion utilisateur de l'applet WeChat peut être mise en œuvre de manière relativement stable.

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!