Étapes pour mettre en œuvre la connexion autorisée sur la page Web WeChat à l'aide d'ajax (avec code)

Cette fois, je vais vous présenter les étapes (avec code) pour mettre en œuvre l'autorisation de la page Web WeChat la connexion à l'aide d'ajax Quelles sont les précautions pour utiliser ajax pour mettre en œuvre l'autorisation de la page Web WeChat. login, comme suit : Ceci est un cas pratique, jetons-y un coup d'œil.

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 autorisé par la page Web WeChat

Construisez l'URL autorisée par WeChat "<a href="http://www.php.cn/wiki/373.html" target="_blank">https ://<code> "<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>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 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 d'après 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 autorisera, et l'autre. L'URL de rappel est en fait l'URL de notre page actuelle

1. L'URL qui est rappelée après la connexion de l'utilisateur avec WeChat portera deux paramètres, le premier est le code et l'autre est l'état. Une chose que nous devons faire est d'obtenir le code et de le transmettre au backend. Le backend obtient les informations de base de l'utilisateur via le code. 🎜>Une fois que le backend a obtenu le code, il obtient les informations de base et renvoie d'autres informations pertinentes au front-end, qui les obtient ensuite et les stocke localement ou d'autres choses. Je pense que vous maîtrisez la méthode après avoir lu le cas. dans cet article, il y a des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois php

Lecture recommandée :

2. Comment rédiger les règles régulières pour déterminer le format ! de carte d'identité et numéro de carte bancaire

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)
      }
    })
  }

Comment vérifier les entiers positifs non nuls à l'aide des expressions régulières JS

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!