Mit Hilfe der WeChat-Plattform ist das öffentliche WeChat-Konto auch zu einem Mainstream-Online-Konto geworden Offline-interaktive Marketingmethoden. Auch die Entwicklung öffentlicher Konten ist zu einem Front-End-Ereignis geworden
Eine der unverzichtbaren Fähigkeiten.
Öffentliche Konten werden hauptsächlich in zwei Arten unterteilt: Abonnementkonten und Dienstkonten. Ersteres wird hauptsächlich zum Senden von Nachrichten und zur Bereitstellung von Kommunikation für Medien und Einzelpersonen verwendet. Letzteres kann Benutzern in WeChat und Unternehmen Dienste über die WeChat-Autorisierung bereitstellen.
Bieten Sie Geschäftsdienste und leistungsstarke Benutzerverwaltungsfunktionen. Ersteres betrifft grundsätzlich nicht das Frontend, daher stellen wir heute hauptsächlich Letzteres vor.
Registrieren Sie ein Konto
Dieser Schritt ist der erste Schritt. Ich werde nicht näher auf diesen Schritt eingehen. Sie können dort direkt auf die offizielle Website gehen wird sein
Auf einige Prüfverfahren wird hier nicht näher eingegangen. Wenn Sie während dieses Wartevorgangs sofort mit der Entwicklung beginnen möchten, können Sie zum öffentlichen WeChat-Konto gehen, um die Plattform zu testen
Beantragen Sie eine Testnummer. Wenn Sie es einfach nur erleben möchten, können Sie natürlich auch ein Testkonto beantragen, um es zu erleben.
Konfigurieren der Umgebung
Vor der Entwicklung müssen wir zunächst Vorbereitungen treffen, einschließlich der Konfiguration des öffentlichen WeChat-Kontos und der Konfiguration der lokalen Entwicklungsumgebung. Da die Verwendung des Unternehmenskontos unpraktisch ist, stammen alle folgenden Bildbeispiele das öffentliche WeChat-Testkonto.
Die Testkonten sind alle leicht auf einer Seite zu finden, daher werde ich nicht auf Details eingehen.
Offizielle Kontokonfiguration
1. Bevor das offizielle WeChat-Konto eine Benutzerwebseite anfordert Autorisierung, der Entwickler Sie müssen zunächst zu den Konfigurationsoptionen „Entwicklung – Schnittstellenberechtigungen – Webdienste – Webkonten – Webautorisierung zum Erhalten grundlegender Benutzerinformationen“ auf der offiziellen Website der öffentlichen Plattform gehen, um den Autorisierungsrückrufdomänennamen zu ändern. Bitte beachten Sie, dass hier der Domänenname (bei dem es sich um eine Zeichenfolge handelt) und nicht die URL eingegeben wird. Fügen Sie daher bitte keine Protokollheader wie http:// hinzu. 2. Die Konfigurationsspezifikation für den Autorisierungsrückruf-Domänennamen ist der vollständige Domänenname Der Domänenname, für den eine Webseitenautorisierung erforderlich ist, lautet beispielsweise: www.qq.com. Nach der Konfiguration sind die Seiten unter diesem Domänennamen http://www.qq.com... und www.qq.com/login. HTML kann alle OAuth2.0-Authentifizierung durchführen. Allerdings können pay.qq.com, music.qq.com und qq.com keine OAuth2.0-Authentifizierung durchführen 3. Wenn die offizielle Kontoanmeldung einem Drittentwickler zur Verwaltung gestattet ist, ist dies nicht erforderlich Alle Einstellungen können durch das Ersetzen des offiziellen Kontos durch einen Dritten erfolgen.
Wenn Sie einige Funktionen von jsapi wie WeChat-Zahlung, Freigabe usw. verwenden müssen, müssen Sie den Sicherheitsdomänennamen der JS-Schnittstelle konfigurieren.
Melden Sie sich bei der öffentlichen WeChat-Plattform an, geben Sie die „Funktionseinstellungen“ der „Offiziellen Kontoeinstellungen“ ein und geben Sie den „JS-Schnittstellensicherheitsdomänennamen“ ein.
Lokale Umgebungskonfiguration
Im offiziellen Testkonto können sowohl die IP- als auch die Domänennamenadresse erfolgreich autorisiert werden. Wenn Sie jedoch lokale Tests durchführen möchten, muss dies im externen Netzwerk möglich sein Zugriff auf das lokale Intranet, das heißt, das interne Netzwerk muss implementiert werden. Netzwerkdurchdringung bedeutet, dass wir den Server im internen Netzwerk dem externen Netzwerk zuordnen können, damit andere darauf zugreifen können. Es gibt auch viele
Tools wie
natapp
Peanut Shell
utools
Ich verwende utools, einen Werkzeugsatz, daher werden im Folgenden utools als Beispiel verwendet: Klicken Sie zum Herunterladen und Installieren und dann zum Konfigurieren Ihrer lokalen Dienste und Ihres externen Netzwerks, um es zu verwenden, damit Sie es verwenden können Verwenden Sie einfach den Zugriff auf externe Netzwerkadressen. Debugging-Umgebung für öffentliche WeChat-KontenFür die Rückrufautorisierung ist die WeChat-Umgebung erforderlich, daher können wir unseren Favoriten nicht verwenden
Das Debuggen in Chrome macht es für uns zweifellos schwieriger, böse Fehler zu finden. Wir brauchen also ein Artefakt für die WeChat-Entwicklung, ein WeChat-Entwicklungstool
Bei diesem Schritt müssen Sie auf die Entwicklungskonfiguration1 achten. Schreiben Sie unseren Geschäftscode. Dies unterscheidet sich nicht wesentlich von einer gewöhnlichen Seite, daher werde ich nicht auf Details eingehen
2 AutorisierungEs gibt zwei Hauptarten der Autorisierung für WeChat-Webseiten
1. Die mit snsapi_base als Bereich initiierte Webseitenautorisierung wird verwendet, um die OpenID des Benutzers abzurufen, der die Seite betritt, und springt stillschweigend und automatisch zur Rückrufseite. Was der Benutzer wahrnimmt, ist, dass er direkt die Rückrufseite (häufig eine Geschäftsseite) aufruft 2. Die mit snsapi_userinfo als Bereich initiierte Webseitenautorisierung wird verwendet, um die grundlegenden Informationen des Benutzers zu erhalten. Diese Art der Autorisierung erfordert jedoch eine manuelle Zustimmung des Benutzers. Da der Benutzer zugestimmt hat, besteht keine Notwendigkeit, darauf zu achten, und die grundlegenden Informationen des Benutzers können nach der Autorisierung abgerufen werden. 3. Die Schnittstelle „Basisinformationen des Benutzers abrufen“ in der Benutzerverwaltungsoberfläche kann die Basisinformationen des Benutzers basierend auf der OpenID des Benutzers erst abrufen, nachdem der Benutzer mit dem offiziellen Konto interagiert hat oder nachdem das Ereignis gepusht wurde, nachdem der Benutzer mit dem öffentlichen Konto interagiert hat . Diese Schnittstelle, einschließlich anderer WeChat-Schnittstellen, erfordert, dass der Benutzer (d. h. openid) dem offiziellen Konto folgt, bevor sie erfolgreich aufgerufen werden kann.
Zusätzlich zur Verwendung von snsapi_base zur stillen Autorisierung gibt es andere, die auch stille Autorisierung durchführen könnensnsapi_base能够静默授权以外,还有一些也能够做到静默授权
Für Benutzer, die dem offiziellen Konto gefolgt sind, wenn der Benutzer über die Sitzung oder benutzerdefinierte Sitzung des offiziellen Kontos zutritt Menü Die Webautorisierungsseite dieses offiziellen Kontos wird stillschweigend autorisiert und der Benutzer ist sich dessen nicht bewusst, auch wenn der Bereich snsapi_userinfo ist.
Schritte
Im Einzelnen ist der Webseiten-Autorisierungsprozess in vier Schritte unterteilt:
1. Führen Sie den Benutzer dazu, die Autorisierungsseite aufzurufen, um der Autorisierung zuzustimmen und erhalten Sie den Code2. Tauschen Sie den Webseiten-Autorisierungs-Access_token durch Code aus (anders als der Access_token in der Basisunterstützung)
3 Bei Bedarf können Entwickler den Webseiten-Autorisierungs-Access_token aktualisieren, um ein Ablaufen zu vermeiden 4 Webseitenautorisierung access_token und openid (unterstützt den UnionID-Mechanismus)
Was am Frontend zu tun ist
1 Führen Sie den Benutzer dazu, die Autorisierungsseite aufzurufen, um zuzustimmen die Autorisierung und erhalten Sie den Codehttps://open.weixin.qq.com/ connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirectDies ist der Link zum Autorisierungsseite. Ersetzen Sie „appId“, „redirect_uri“ und „scope“ durch die oben genannten zwei verschiedenen Autorisierungen.
!!! Es ist zu beachten, dass es # gibt, da der Status Hash-Routing verwendet, und der Front-End-Teil des Frameworks standardmäßig Hash-Routing verwendet, was zu Konflikten führt, sodass es codiert werden muss code>
Wenn der Benutzer der Autorisierung zustimmt, springt die Seite zu „redirect_uri/?code=CODE&state=STATE“.
Das Bild unten zeigt die Autorisierungsseite, wenn der Bereich gleich snsapi_userinfo ist:
Zu diesem Zeitpunkt müssen wir nur unseren Code an das Backend übergeben, und die nächsten paar Für die Schritte ist kein Frontend erforderlich. Habe es geschafft.
Manchmal müssen wir auch SSDK verwenden, also müssen wir es konfigurieren
Binding The Domänenname
🎜 ist die Einstellung für den sicheren Domänennamen der JS-Schnittstelle oben, 🎜
Einführung der JS-Datei🎜🎜Führen Sie die folgende JS-Datei auf der Seite ein, die die JS-Schnittstelle aufrufen muss, ( unterstützt https): res .wx.qq.com/open/js/jwe…🎜🎜Wenn Sie die Dienststabilität weiter verbessern müssen, wenn auf die oben genannten Ressourcen nicht zugegriffen werden kann, können Sie Folgendes besuchen: res2.wx.qq.com/open/ js/jwe… (Unterstütztes https). 🎜
Konfiguration der Berechtigungsüberprüfung über die Konfigurationsschnittstelle einfügen🎜
🎜jsApiList Um die von Ihnen benötigten Funktionen zu schreiben, können Sie die offizielle JS-Schnittstellenliste sehen,appId, timestamp,nonceStr, Für die Signatur muss Ihr Backend-Partner sie an Sie zurücksenden. 🎜🎜Es ist zu beachten, dass: 🎜🎜🎜Alle Seiten, die JS-SDK verwenden müssen, müssen zuerst Konfigurationsinformationen einfügen, sonst werden sie nicht aufgerufen (dieselbe URL muss nur einmal aufgerufen werden, und die SPA-Webanwendung ändert sich). Die URL kann in jeder URL aufgerufen werden. Wird aufgerufen, wenn eine Änderung vorliegt. Derzeit unterstützt der Android WeChat-Client die neue H5-Funktion von pushState. Daher schlägt die Verwendung von pushState zur Implementierung der Web-App-Seite fehl wird in Android 6.2 behoben). 🎜🎜Verwandte Lernempfehlungen: 🎜js-Video-Tutorial🎜🎜🎜🎜 Rufen Sie die WeChat-Schnittstelle auf. 🎜🎜 Rufen Sie dann die WeChat-Schnittstelle auf. Im Folgenden wird die Erkennung der js-Schnittstelle als Beispiel verwendet. 🎜rrreee🎜Solange das Front-End autorisiert ist, ist das nachfolgende JSSDK sehr einfach. 🎜🎜🎜Verwandte Lernempfehlungen: 🎜WeChat-Miniprogrammentwicklung🎜🎜🎜
Das obige ist der detaillierte Inhalt vonErste Schritte mit offiziellen Konten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!