Schritte zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite mithilfe von Ajax (mit Code)

Dieses Mal werde ich Ihnen die Schritte (mit Code) zur Verwendung von Ajax zum Realisieren der WeChat-Webseitenautorisierung-Anmeldung vorstellen. Was sind die Vorsichtsmaßnahmen, um Ajax zum Realisieren der WeChat-Webseite zu verwenden? Autorisierungs-Login, wie folgt. Dies ist ein praktischer Fall, schauen wir uns ihn an.

Projekthintergrund

Da das Projekt eine vollständig getrennte Front-End- und Back-End-Lösung verwendet, kann die herkömmliche autorisierte WeChat-Anmeldemethode nicht verwendet werden und Ajax muss verwendet werden kann zur Implementierung einer autorisierten WeChat-Anmeldung verwendet werden.

Anforderungsanalyse

Da ich ein PHP-Benutzer bin, verwendet die WeChat-Entwicklung EasyWeChat, sodass die Implementierungsmethode auf EW basiert.

Tatsächlich ist es mühsam, dies zu implementieren. Bevor wir es implementieren, müssen wir den gesamten Prozess der WeChat-Autorisierung verstehen.

1. Führen Sie den Benutzer dazu, die Autorisierungsseite aufzurufen, um der Autorisierung zuzustimmen und den Code zu erhalten

2. Tauschen Sie den Code gegen das Access_token für die Webseitenautorisierung ein (Unterscheidet sich vom access_token in der Basisunterstützung)

3. Bei Bedarf können Entwickler das Access_token für die Webseitenautorisierung aktualisieren, um ein Ablaufen zu vermeiden

4. Erhalten Sie grundlegende Benutzerinformationen durch Webseitenautorisierung access_token und openid (unterstützt den UnionID-Mechanismus)

Tatsächlich muss das Frontend, um es ganz klar auszudrücken, nur eines tun: den Benutzer anleiten, die WeChat-Autorisierung zu starten Seite, rufen Sie dann den Code ab, springen Sie dann zur aktuellen Seite und fordern Sie dann das Back-End auf, Benutzer und andere verwandte Informationen auszutauschen.

Funktionsimplementierung

Führen Sie Benutzer zum Aufrufen der WeChat-Autorisierungsbestätigungsseite

Wir müssen hier zwei Dinge tun: Erstens den JSAPI-Domänennamen konfigurieren , Zweitens: Konfigurieren Sie den von der WeChat-Webseite autorisierten Rückrufdomänennamen

Erstellen Sie die von WeChat autorisierte URL "<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 Wir sehen aus der Verbindung, dass es zwei Variablen gibt, appId und redirect_uri. Es erübrigt sich zu erwähnen, dass appId die appId des offiziellen WeChat-Kontos ist, das wir haben wird autorisiert, und die andere ist eigentlich die URL unserer aktuellen Seite.

1. Die URL, die zurückgerufen wird, nachdem sich der Benutzer bei WeChat angemeldet hat, enthält zwei Parameter: Das erste ist der Code und das andere ist der Status. Eine Sache, die wir tun müssen, ist, den Code abzurufen und ihn an das Backend weiterzuleiten 🎜>Nachdem das Backend den Code erhalten hat, ruft es die grundlegenden Informationen ab und gibt relevante andere Informationen an das Frontend zurück, das sie dann abruft und lokal speichert. Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall gelesen haben In diesem Artikel finden Sie weitere spannende Artikel.

Empfohlene Lektüre:

2. Wie schreibt man die regulären Regeln? Format der Personalausweis- und Bankkartennummer

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

So prüfen Sie positive Ganzzahlen ungleich Null mit regulären JS-Ausdrücken

Das obige ist der detaillierte Inhalt vonSchritte zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite mithilfe von Ajax (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!