Méthode Ajax pour implémenter la connexion autorisée sur la page Web WeChat (tutoriel graphique)

Cet article présente principalement la méthode ajax pour implémenter la connexion autorisée sur les pages Web WeChat. Maintenant, je le partage avec vous et le donne comme référence.

Contexte du projet

Étant donné que le projet adopte une solution front-end et back-end complètement séparées, la méthode de connexion autorisée conventionnelle par WeChat ne peut pas être utilisée et ajax doit être utilisé pour mettre en œuvre la connexion autorisée WeChat.

Analyse des exigences

Parce que je suis un PHPer, le développement de WeChat utilise EasyWeChat, la méthode d'implémentation est donc basée sur EW.

En fait, il est difficile de mettre en œuvre cela. Avant de le mettre en œuvre, nous devons comprendre l'ensemble du processus d'autorisation WeChat.

1. Guider l'utilisateur pour accéder à la page d'autorisation pour accepter l'autorisation et obtenir le code

2. Échanger le code pour l'autorisation de la page Web access_token (différent du access_token dans le support de base)

3. Si nécessaire, les développeurs peuvent actualiser l'autorisation de la page Web access_token pour éviter l'expiration

4. Obtenir des informations utilisateur de base via l'autorisation de page Web access_token et openid (prend en charge le mécanisme UnionID)

En fait, pour parler franchement, le front-end n'a qu'à faire une chose, guider l'utilisateur pour lancer l'autorisation WeChat page, puis récupérez le code, puis accédez à la page actuelle, puis demandez au back-end d'échanger des utilisateurs et d'autres informations connexes.

Implémentation de la fonction

Guider les utilisateurs pour appeler la page de confirmation d'autorisation WeChat

Nous devons faire deux choses ici, d'abord configurer le nom de domaine jsapi , deuxièmement, configurez le nom de domaine de rappel pour l'autorisation de la page Web WeChat

Créez l'URL autorisée WeChat "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect Nous voyons sur la connexion qu'il existe deux variables, appId et redirect_uri. Inutile de dire que appId est l'appId du compte officiel WeChat que nous sommes sur le point d'autoriser, et l'autre URL de rappel est en fait l'URL de notre page actuelle.

1. L'URL qui est rappelée une fois que l'utilisateur s'est connecté à WeChat et l'a autorisé comportera deux paramètres, le premier est le code et l'autre est l'état. La seule chose que nous devons faire est d'obtenir le code et de le transmettre au backend, et le backend peut obtenir les informations de base de l'utilisateur via le code.

2. Une fois que le backend a obtenu le code, il obtient les informations de base de l'utilisateur et renvoie d'autres informations pertinentes au frontend. Le frontend les obtient, puis effectue un stockage local ou d'autres choses.

function getUrlParam(name) {

  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

function wxLogin(callback) {
  var appId = 'xxxxxxxxxxxxxxxxxxx';
  var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
  var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
  var code = getUrlParam("code");
  if (!code) {
    window.location = url;
  } else {
    $.ajax({
      type: 'GET',
      url: oauth_url,
      dataType: 'json',
      data: {
        code: code
      },
      success: function (data) {
        if (data.code === 200) {
          callback(data.data)
        }
      },
      error: function (error) {
        throw new Error(error)
      }
    })
  }

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Implémentation JS ajax Définition de l'arrière-plan d'appel (avec code)

ajax+fonction de contrôle php appelant les étapes explication détaillée

Ajax réalise l'effet de chargement

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!