Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos

Vorwort

Gestern gab es ein Projekt, das die Implementierung einer h5-WeChat-Autorisierung erforderte. Daher dauerte es zwei Stunden, diese Funktion abzuschließen.​

​

Vorbereitung vor Arbeitsbeginn

Prozessbeschreibung [Prozess vorab kommuniziert]

1. Die WeChat-Autorisierung ist zeitlich begrenzt. Nach der Autorisierung innerhalb eines bestimmten Zeitraums ist kein erneutes Klicken zur Bestätigung erforderlich. Wenn Sie WeChat deinstallieren und neu installieren, müssen Sie die Autorisierung dennoch erneut bestätigen.
2. Unabhängig davon, ob Sie die Autorisierung zum ersten Mal bestätigen oder bereits nach der Autorisierung durchgeführt haben, können Sie den WeChat-Server verwenden, um den Rückruf an unseren Back-End-Schnittstellen-Rückruf zu autorisieren.
3. Nach dem WeChat-Autorisierungsrückruf werden die Code- und Statusparameter zurückgegeben. Das Backend kann über den Code ein AccessToken und dann über das AccessToken Benutzerinformationen abrufen.
4. Nachdem das Backend den Server-Rückruf empfangen hat, gibt es beim Rückruf an das Front-End zwei Hauptfelder: isAuth gibt an, ob es autorisiert ist, und isBindFlag gibt an, ob es in unserem System registriert und angemeldet ist. Da unser aktuelles System eine Benutzerautorisierungsregistrierung erfordert, sind diese beiden Felder hier vorhanden.

Domänenname, Port

• Vorbereiteter Domänenname - Domänenname, registriert beim Ministerium für öffentliche Sicherheit
• Die Portnummer ist 80.

Der Domänenname und die Portnummer sind erforderlich, da der Domänenname und Port 80 für die Konfiguration des öffentlichen WeChat-Kontos und den WeChat-Server-Rückruf erforderlich sind.

Dabei werden derselbe Domänenname und Port an die Front-End- und Back-End-IP-Adressen angepasst und über den einheitlichen Nginx-Proxy verarbeitet.

​

Bereit zum Arbeiten

• Domänenname: http.xxx.cn
• Bereitstellung von Front-End-Ressourcen: http.xxx.cn
• Backend-Callback-Schnittstelle: http.xxx.cn/api/auth

Konfigurieren Sie ein öffentliches WeChat-Konto

Domänennamenkonfiguration

Laden Sie die Bestätigungsdatei in den Stammpfad des Servers hoch, da die Domänennamenkonfiguration sonst nicht gespeichert werden kann.

Whitelist-Konfiguration

Code schreiben

importiere React, { useEffect } von "react";
importiere { Ansicht } aus "@tarojs/components";

Standard exportieren () => {
  useEffect(() => {
    // Das Pfadformat des Backend-Rückrufs: http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
    
    var isBindFlag = false, isAuth = false, opendId = '', paramsArray = [];


    /*
     * Ausgelassener Code: Adressermittlung, Parameterverarbeitung und Zuweisung zu isAuth, isBindFlag, openId
     */ 

    if (!isAuth) { // Nicht autorisiert window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'xxxxxxx'}&redirect_uri=http://xxxxx/api/auth?response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
    } sonst wenn (!isBindFlag) { // Nicht registriert window.location.href = '#/pages/login'
    } sonst { // Anmeldefenster.location.href = '#/pages/index'
    }
  }, []);

  zurückkehren (
    <Ansicht>
    </Anzeigen>
  );
};

Zusammenfassen

Dies ist das Ende dieses Artikels über die Autorisierung öffentlicher H5-WeChat-Konten. Weitere relevante Inhalte zur Autorisierung öffentlicher WeChat-Konten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!