Développement de mini-programmes - Exemple de didacticiel de connexion utilisateur et de maintenance

Fournir la connexion utilisateur et maintenir le statut de connexion utilisateur sont généralement des choses qu'une application logicielle avec un système utilisateur doit faire. Pour une plate-forme sociale comme WeChat, si nous créons une petite application, nous pouvons rarement créer un pur outil logiciel qui soit complètement séparé et abandonne la connexion des informations utilisateur.

Permettre aux utilisateurs de se connecter, identifier les utilisateurs et obtenir des informations sur les utilisateurs, et fournir des services centrés sur l'utilisateur sont ce que font la plupart des mini-programmes. Aujourd'hui, nous allons apprendre comment connecter les utilisateurs au mini-programme et comment maintenir l'état de session (Session) après la connexion.

Dans le mini-programme WeChat, nous impliquerons généralement les trois types de méthodes de connexion suivants :

• Inscription et connexion à votre propre compte

• Utilisez d'autres comptes de plateforme tierce pour vous connecter

• Utilisez le compte WeChat pour vous connecter (c'est-à-dire, utilisez directement le compte WeChat actuellement connecté pour vous connecter en tant qu'utilisateur du mini programme)

Les première et deuxième méthodes sont actuellement les deux méthodes les plus courantes dans les applications Web. Elles peuvent également être utilisées dans les mini-programmes WeChat, mais doivent payer. attentionà : Il n'y a pas de mécanisme de <a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie<code><a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie</a> dans le mini programme, donc lorsque vous utilisez ces 2 Avant d'utiliser cette méthode, veuillez confirmer si votre API tierce ou celle d'un tiers doit s'appuyer sur Cookie également, le mini programme ne prend pas en charge les pages HTML, et ces tiers ; Les API -party qui doivent utiliser la redirection de page pour se connecter le sont. Elles doivent être rénovées ou elles ne sont plus utilisables.

Aujourd'hui, nous discuterons principalement de la troisième méthode, c'est-à-dire comment se connecter à l'aide d'un compte WeChat, car cette méthode est la plus étroitement intégrée à la plateforme WeChat et offre une meilleure expérience utilisateur.

Processus de connexion

Citant l'organigramme de connexion du document officiel du mini-programme, l'ensemble du processus de connexion est essentiellement le suivant :

Organigramme de connexion

Dans cette figure, « mini-programme » fait référence à la partie de code que nous écrivons à l'aide du cadre du mini-programme « Serveur tiers » qui est généralement notre propre programme de service en arrière-plan « WeChat ». serveur" est le serveur API officiel de WeChat.

Décomposons cet organigramme étape par étape.

Étape 1 : Obtenez l'utilisateur WeChat actuellement connecté sur le client 登录凭证(code)

La première étape pour vous connecter au mini-programme consiste à obtenir les informations de connexion. Nous pouvons utiliser la méthode wx.login() et obtenir des informations de connexion.

Nous pouvons lancer une demande d'identifiant de connexion dans le code de l'application du mini programme, ou dans tout autre code de page, principalement en fonction des besoins réels de votre mini programme.

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);
        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

Étape 2 : Envoyez les informations de connexion à votre serveur et utilisez les informations d'identification sur votre serveur pour échanger le serveur WeChat contre les 唯一标识(openid) et 会话密钥(session_key)

de l'utilisateur WeChat. , nous utilisons la méthode wx.request() pour demander une API backend que nous avons nous-mêmes implémentée, et y apportons les identifiants de connexion (code), par exemple en ajoutant sur la base de notre code précédent :

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);

          // --------- 发送凭证 ------------------
          wx.request({
            url: 'https://www.my-domain.com/wx/onlogin',
            data: { code: code }
          })
          // ------------------------------------

        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

Votre service d'arrière-plan (/wx/onlogin) doit ensuite utiliser les informations de connexion transmises pour appeler l'interface WeChat en échange d'openid et de session_key. Le format de l'adresse de l'interface est le suivant :

api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Voici ce que j'ai. utiliser Le code du service d'arrière-plan construit par Node.js Express est à titre de référence uniquement :

router.get('/wx/onlogin', function (req, res, next) {
  let code = req.query.code

  request.get({
    uri: 'https://api.weixin.qq.com/sns/jscode2session',
    json: true,
    qs: {
      grant_type: 'authorization_code',
      appid: '你小程序的APPID',
      secret: '你小程序的SECRET',
      js_code: code
    }
  }, (err, response, data) => {
    if (response.statusCode === 200) {
      console.log("[openid]", data.openid)
      console.log("[session_key]", data.session_key)

      //TODO: 生成一个唯一字符串sessionid作为键，将openid和session_key作为值，存入redis，超时时间设置为2小时
      //伪代码: redisStore.set(sessionid, openid + session_key, 7200)

      res.json({ sessionid: sessionid })
    } else {
      console.log("[error]", err)
      res.json(err)
    }
  })
})

Si ce code d'arrière-plan est exécuté avec succès, vous pouvez obtenir l'openid et la session_key. Ces informations constituent l'état de connexion du compte WeChat actuel sur le serveur WeChat.

Cependant, pour des raisons de sécurité, veuillez ne pas utiliser directement ces informations comme identifiant utilisateur et identifiant de session de votre mini programme pour les renvoyer au client du mini programme. Nous devrions créer notre propre couche côté serveur. session, générez un identifiant de session à partir de cet état de connexion au compte WeChat et conservez-le dans notre propre mécanisme de session, puis distribuez cet identifiant de session au mini-client du programme pour l'utiliser comme identifiant de session.

Concernant la manière d'implémenter ce mécanisme de session côté serveur, nous utilisons désormais généralement des outils de stockage clé-valeur, tels que redis. Nous générons une chaîne unique comme clé pour chaque session, puis stockons session_key et openid en tant que valeurs dans redis Pour des raisons de sécurité, un délai d'attente doit être défini lors de l'enregistrement.

Étape 3 : Enregistrer sur le client sessionid

Lors du développement d'applications Web, dans le client (navigateur), nous stockons généralement l'identifiant de session dans un cookie, mais l'applet Il n'y a pas mécanisme de cookie, les cookies ne peuvent donc pas être utilisés, mais le mini-programme dispose d'un stockage local, nous pouvons donc utiliser le stockage pour enregistrer l'ID de session pour les appels d'API en arrière-plan ultérieurs.

在之后，调用那些需要登录后才有权限的访问的后台服务时，你可以将保存在storage中的sessionid取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该sessionid后，从redis中查找是否有该sessionid存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。

这是一个需要session验证的后台服务示例，我的sessionid是放在header中传递的，所以在这个示例中，是从请求的header中获取sessionid：

router.get('/wx/products/list', function (req, res, next) {
  let sessionid = req.header("sessionid")
  let sessionVal = redisStore.get(sessionid)
  if (sessionVal) {
    // 执行其他业务代码
  } else {
    // 执行错误处理
  }
})

好了，通过微信账号进行小程序登录和状态维护的简单流程就是这样，了解这些知识点之后，再基于此进行后续的开发就会变得更容易了。

另外，腾讯前端团队也开源了他们封装的相关库，可以借鉴和使用。

• 服务器端库 weapp-session

• 小程序端库 weapp-session-client

感谢阅读我的文章，如有疑问或写错的地方请不吝留言赐教。

【相关推荐】

1. 微信小程序完整源码下载

2. 简单的左滑操作和瀑布流布局

3. 微信小程序游戏类demo挑选不同色块

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!