Comment se connecter à l'applet uniapp WeChat

Avec la popularité des mini-programmes WeChat, de plus en plus de gens s'intéressent au développement de mini-programmes WeChat. Dans ce processus, le module de connexion est indispensable et Uniapp est également devenu un cadre de développement d'applets WeChat populaire. Alors, comment se connecter à l’applet Uniapp WeChat ? Regardons de plus près ci-dessous.

1. Configuration de la plateforme de développement WeChat

Avant de nous connecter au mini-programme WeChat, nous devons effectuer les configurations pertinentes sur la plateforme de développement WeChat. Tout d'abord, dans « Développement » -> « Paramètres de développement » -> « Outils de développement », ouvrez le « Port de service » et remplissez votre propre adresse IP.

Deuxièmement, dans « Développement » -> « Paramètres de développement » -> « Configuration en arrière-plan du mini programme », ajoutez le mini programme « demander un nom de domaine légal ».

Ensuite, nous devons obtenir l'AppID et l'AppSecret du mini programme et les vérifier dans "Paramètres" -> "Outils de développement" -> "Paramètres de développement".

2. Configuration Uniapp

Dans la compilation conditionnelle de MicroMessenger-uni, nous devons d'abord introduire le fichier wx-auth.js, qui peut être écrit par nous-mêmes ou téléchargé depuis Internet.

Au lancement d'App.vue, configurez l'AppID, l'AppSecret et l'adresse d'arrière-plan de l'applet WeChat pour obtenir Openid.

Étape suivante, lors de l'appel de l'interface de connexion, nous devons écrire une méthode pour obtenir le code dans wx-auth.js :

getLoginCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          success: (res) => {
            if (res.code) {
              resolve(res.code)
            } else {
              reject(res)
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

Ensuite, écrivez une méthode pour obtenir Openid dans wx-auth.js :

getOpenId(appid, secret, code) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

Enfin , dans Dans la page de connexion du projet, nous pouvons écrire la méthode de connexion :

async login() {
      let code = await this.getLoginCode()
      let res = await this.getOpenId(this.appid, this.secret, code)
      console.log(res)
      // 在这里可以将Openid和其他用户信息存入后台，实现登录功能
   }

3. Implémentation de l'applet WeChat

Dans l'applet WeChat, nous devons appeler la méthode wx.login dans le bouton de connexion pour obtenir le code, puis transmettez le code Accédez au backend, obtenez Openid et d'autres informations utilisateur à partir du backend et implémentez la fonction de connexion.

Ce qui suit est un exemple de l'applet WeChat appelant la méthode wx.login :

wx.login({
      success(res) {
        if (res.code) {
          //将code传到后台获取Openid
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      },
      fail(err) {
        console.log('登录失败！' + err.errMsg)
      }
    })

IV Résumé

Grâce aux étapes ci-dessus, nous pouvons implémenter la fonction de connexion de l'applet Uniapp WeChat. Il convient de noter que la connexion de l'applet WeChat doit être déboguée conjointement avec l'interface API back-end et obtenir les informations de retour du back-end pour mettre en œuvre le processus de connexion réel. Dans le même temps, les informations privées des utilisateurs, telles que OpenID, doivent être protégées pendant le processus de connexion pour éviter les fuites et les abus.

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!