Introduction à la méthode d'ajax réalisant une connexion autorisée sur la page Web WeChat

La connexion autorisée à la page Web WeChat est une fonction très courante, afin d'aider tout le monde à apprendre. Cet article présente principalement la méthode ajax pour implémenter la connexion autorisée sur les pages Web WeChat. L'éditeur pense que c'est plutôt bon. Je vais maintenant le partager avec vous et le donner comme référence. Venez jeter un œil avec l'éditeur

Contexte du projet

Car le projet adopte un front-end et un back- solution finale, elle ne peut pas être utilisée. La méthode conventionnelle de connexion autorisée WeChat nécessite l'utilisation d'ajax pour implémenter 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.

Mise en œuvre de la fonction

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

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

Construisez 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 de la connexion qu'il y a 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. 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)
      }
    })
  }

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun, j'espère également. que tout le monde prendra en charge php Chinese net.

Recommandations associées :

La connexion à l'autorisation de la page Web WeChat sur Android a échoué ! Succès sur iOS !

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!