suchen
HeimWeChat-AppletWeChat-EntwicklungEinführung in die Ajax-Methode zur Realisierung einer autorisierten Anmeldung auf der WeChat-Webseite

Die autorisierte Anmeldung auf der WeChat-Webseite ist eine sehr häufige Funktion, um allen das Lernen zu erleichtern. In diesem Artikel wird hauptsächlich die Ajax-Methode zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite vorgestellt. Der Herausgeber findet sie recht gut. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Kommen Sie und werfen Sie einen Blick mit dem Editor

Projekthintergrund

Weil das Projekt ein völlig getrenntes Front-End und Backend verwendet. Endlösung, es kann nicht verwendet werden. Die herkömmliche autorisierte WeChat-Anmeldemethode erfordert die Verwendung von Ajax, um die autorisierte WeChat-Anmeldung zu implementieren.

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

Benutzer zum Aufrufen der WeChat-Autorisierungsbestätigungsseite anleiten

Wir müssen hier zwei Dinge tun: Konfigurieren Sie zunächst den JSAPI-Domänennamen und anschließend den Rückrufdomänennamen für die WeChat-Webseitenautorisierung.

Erstellen Sie die autorisierte WeChat-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 Aus der Verbindung sehen wir, 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 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 hoffe, dass es für das gesamte Studium hilfreich sein wird dass jeder PHP-Chinesisch unterstützen wird.

Verwandte Empfehlungen:

Anmeldung zur Autorisierung der WeChat-Webseite bei Android fehlgeschlagen! Erfolg auf iOS!

Das obige ist der detaillierte Inhalt vonEinführung in die Ajax-Methode zur Realisierung einer autorisierten Anmeldung auf der WeChat-Webseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools