Ajax-Methode zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite (grafisches Tutorial)

In diesem Artikel wird hauptsächlich die Ajax-Methode zur Implementierung einer autorisierten Anmeldung auf WeChat-Webseiten vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

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 Rückrufdomänennamen für die WeChat-Webseitenautorisierung

Erstellen Sie die URL für die WeChat-Autorisierung "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 Aus der Verbindung sehen wir, dass es zwei Variablen gibt, appId und restart_uri. Es erübrigt sich zu erwähnen, dass appId die appId des offiziellen WeChat-Kontos ist, das wir autorisieren möchten, und die andere Rückruf-URL tatsächlich die URL unserer aktuellen Seite ist.

1. Die URL, die zurückgerufen wird, nachdem sich der Benutzer bei WeChat angemeldet und autorisiert hat, enthält zwei Parameter: Der erste ist Code und der andere ist der Status. Das Einzige, was wir tun müssen, ist, den Code abzurufen und an das Backend zu übergeben, und das Backend kann über den Code die grundlegenden Informationen des Benutzers abrufen.

2. Nachdem das Backend den Code erhalten hat, ruft es die grundlegenden Informationen des Benutzers ab und gibt andere relevante Informationen an das Frontend zurück. Das Frontend ruft diese ab und übernimmt dann die lokale Speicherung oder andere Dinge.

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JS-Implementierung AjaxHintergrunddefinition aufrufen (mit Code)

Ajax+PHP-Steuerfunktionsaufrufschritte, detaillierte Erklärung

Ajax realisiert den Ladeeffekt

Das obige ist der detaillierte Inhalt vonAjax-Methode zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!