Wie erfolgt die Benutzeranmeldung im Miniprogramm? Wie behalte ich den Anmeldestatus bei?

Benutzern die Anmeldung zu ermöglichen, Benutzer zu identifizieren und Benutzerinformationen zu erhalten sowie benutzerzentrierte Dienste bereitzustellen, sind die Aufgaben der meisten Miniprogramme. Heute erfahren wir, wie man Benutzer im Miniprogramm anmeldet und wie man den Sitzungsstatus nach der Anmeldung beibehält. [Verwandte Lernempfehlungen: Mini-Programmentwicklungs-Tutorial]

Im WeChat Mini-Programm verwenden wir im Allgemeinen die folgenden drei Arten von Anmeldemethoden:

• Eigene Kontoregistrierung und Anmeldung
• Verwenden Sie andere Plattformkonten von Drittanbietern Anmelden;
• Melden Sie sich mit einem WeChat-Konto an (d. h. verwenden Sie direkt das aktuell angemeldete WeChat-Konto, um sich als Benutzer des Miniprogramms anzumelden).

Die erste und zweite Methode sind derzeit die beiden häufigsten Methoden in Webanwendungen. Sie können auch in WeChat-Miniprogrammen verwendet werden. Es ist jedoch wichtig zu beachten, dass es im Mini kein Cookie gibt >-Mechanismus. Bevor Sie diese beiden Methoden verwenden, überprüfen Sie bitte, ob Ihre API oder die eines Drittanbieters auf <code>Cookie angewiesen sein muss. Das Miniprogramm unterstützt keine HTML-Seiten, diese müssen die Seite verwenden Umleitung Die für die Anmeldung verwendete Drittanbieter-API muss geändert werden oder darf nicht mehr verwendet werden. Cookie的机制，所以在使用这2种方式前，请确认你们或第三方的API是否需要依赖Cookie；还有小程序中也不支持HTML页面，那些需要使用页面重定向来进行登录的第三方API就需要改造，或不能用了。

我们今天主要来讨论一下第三种方式，即如何使用微信账号进行登录，因为这种方式和微信平台结合最紧密，用户体验比较好。

登录流程

引用小程序官方文档的登录流程图，整个登录流程基本如下图所示：

该图中，“小程序”指的就是我们使用小程序框架写的代码部分，“第三方服务器”一般就是我们自己的后台服务程序，“微信服务器”是微信官方的API服务器。

下面我们来逐步分解一下这个流程图。

步骤一：在客户端获取当前登录微信用户的登录凭证(code)

在小程序中登录的第一步，就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。

我们可以在小程序的App代码中发起登录凭证请求，也可以在其他任何Page页面代码中发起登录凭证请求，主要根据你小程序的实际需要。

步骤二：将登录凭证发往你的服务端，并在你的服务端使用该凭证向微信服务器换取该微信用户的唯一标识(openid)和会话密钥(session_key)

首先，我们使用wx.request()方法，请求我们自己实现的一个后台API，并将登录凭证（code）携带过去，例如在我们前面代码的基础上增加：

你的后台服务接着需要使用这个传递过来的登录凭证，去调用微信接口换取openid和session_key

我们先来介绍下openid，用过公众号的童鞋应该对这个标识都不陌生了，在公众平台里，用来标识每个用户在订阅号、服务号、小程序这三种不同应用的唯一标识，也就是说每个用户在每个应用的openid都是不一致的，所以在小程序里，我们可以用openid来标识用户的唯一性。

那么session_key是用来干嘛的呢？有了用户标识，我们就需要让该用户进行登录，那么 session_key 就保证了当前用户进行会话操作的有效性，这个session_key是微信服务端给我们派发的。也就是说，我们可以用这个标识来间接地维护我们小程序用户的登录态，那么这个session_key是怎么拿到的呢？我们需要在自己的服务端请求微信提供的第三方接口 https://api.weixin.qq.com/sns/jscode2session 

从这几个参数，我们可以看出，要请求这个接口必须先调用wx.login()来获取到用户当前会话的code。那么为什么我们要在服务端来请求这个接口呢？其实是出于安全性的考量，如果我们在前端通过request调用此接口，就不可避免的需要将我们小程序的appid和小程序的secret暴露在外部，同时也将微信服务端下发的session_key暴露给“有心之人”，这就给我们的业务安全带来极大的风险。除了需要在服务端进行session_key的获取，我们还需要注意两点：

• session_key和微信派发的code是一一对应的，同一code只能换取一次session_key。每次调用wx.login() ，都会下发一个新的code和对应的session_key，为了保证用户体验和登录态的有效性，开发者需要清楚用户需要重新登录时才去调用wx.login()

  Heute besprechen wir hauptsächlich die dritte Methode, nämlich die Anmeldung mit einem WeChat-Konto, da diese Methode am engsten mit der WeChat-Plattform integriert ist und ein besseres Benutzererlebnis bietet.

Anmeldevorgang

• Unter Berufung auf das Anmeldeflussdiagramm des offiziellen Dokuments des Miniprogramms ist der gesamte Anmeldevorgang im Wesentlichen wie in der folgenden Abbildung dargestellt :
  🎜🎜In diesem Bild „Miniprogramm“ bezieht sich auf Wir verwenden den vom Miniprogramm-Framework geschriebenen Codeteil. Der „Drittanbieterserver“ ist im Allgemeinen unser eigenes Hintergrunddienstprogramm und der „WeChat-Server“ ist der offizielle API-Server von WeChat. 🎜🎜Lassen Sie uns dieses Flussdiagramm Schritt für Schritt aufschlüsseln. 🎜🎜Schritt 1: Erhalten Sie die Anmeldeinformationen (Code) des aktuellen WeChat-Benutzers auf dem Client🎜🎜Der erste Schritt zur Anmeldung im Miniprogramm besteht darin, die Anmeldeinformationen zu erhalten. Wir können die Methode wx.login() verwenden und Anmeldeinformationen erhalten. 🎜🎜Wir können eine Anfrage nach Anmeldeinformationen im App-Code des Miniprogramms oder in jedem anderen Seitencode initiieren, hauptsächlich basierend auf den tatsächlichen Anforderungen Ihres Miniprogramms. 🎜🎜Schritt 2: Senden Sie die Anmeldeinformationen an Ihren Server und verwenden Sie die Anmeldeinformationen auf Ihrem Server, um den WeChat-Server gegen die eindeutige Kennung (openid) und den Sitzungsschlüssel (session_key) des WeChat-Benutzers auszutauschen🎜🎜Zuerst , verwenden wir die Methode wx.request(), um eine Backend-API anzufordern, die wir selbst implementiert haben, und bringen dort die Anmeldeinformationen (Code) ein. Fügen Sie beispielsweise basierend auf unserem vorherigen Code Folgendes hinzu: 🎜🎜Ihr Backend-Dienst, den Sie verwenden müssen Die übergebenen Anmeldeinformationen zum Aufrufen der WeChat-Schnittstelle im Austausch gegen openid und session_key🎜🎜Kinderschuhe, die öffentliche Konten verwendet haben, sollten mit diesem Logo vertraut sein, das zur Identifizierung jeder Person verwendet wird Eindeutige Identifizierung eines Benutzers in drei verschiedenen Anwendungen: Abonnementkonto, Dienstkonto und Miniprogramm. Das heißt, die OpenID jedes Benutzers in jeder Anwendung ist inkonsistent, sodass wir im Miniprogramm die OpenID verwenden können, um den Benutzer zu identifizieren . Einzigartigkeit. 🎜🎜Wofür wird session_key verwendet? Mit der Benutzer-ID müssen wir dem Benutzer die Anmeldung ermöglichen. Anschließend stellt der Sitzungsschlüssel die Gültigkeit des Sitzungsvorgangs des aktuellen Benutzers sicher. Dieser Sitzungsschlüssel wird vom WeChat-Server an uns verteilt. Mit anderen Worten: Wir können diesen Bezeichner verwenden, um indirekt den Anmeldestatus unserer Applet-Benutzer aufrechtzuerhalten. Wie haben wir diesen Sitzungsschlüssel erhalten? Wir müssen die von WeChat bereitgestellte Drittanbieter-Schnittstelle auf unserem eigenen Server https://api.weixin.qq.com/sns/jscode2session anfordern. 🎜🎜Aus diesen Parametern können wir ersehen, dass wir zum Anfordern dieser Schnittstelle zuerst anrufen müssen wx .login(), um den Code der aktuellen Sitzung des Benutzers abzurufen. Warum müssen wir diese Schnittstelle serverseitig anfordern? Tatsächlich geschieht dies aus Sicherheitsgründen. Wenn wir diese Schnittstelle über eine Anfrage am Frontend aufrufen, müssen wir zwangsläufig die Appid unseres Miniprogramms und das Geheimnis des Miniprogramms nach außen preisgeben wird auch den vom WeChat-Server ausgegebenen Sitzungsschlüssel offenlegen. Dies birgt große Risiken für die Sicherheit unseres Unternehmens. Zusätzlich zum Erhalt des Sitzungsschlüssels auf der Serverseite müssen wir auch auf zwei Punkte achten: 🎜
  🎜🎜sitzungsschlüssel und der von WeChat verteilte Code sind eins zu eins -eine Korrespondenz und nur derselbe Code. Kann gegen einen Sitzungsschlüssel ausgetauscht werden. Bei jedem Aufruf von wx.login() wird ein neuer Code und ein entsprechender Sitzungsschlüssel ausgegeben. Um die Benutzererfahrung und die Gültigkeit des Anmeldestatus sicherzustellen, müssen Entwickler wissen, was der Benutzer benötigt Um sich erneut anzumelden, ist der Aufruf von wx.login() ungültig. Auch wenn wx.login nicht aufgerufen wird, läuft die Ablaufzeit positiv von der Häufigkeit ab der Benutzer, der das Miniprogramm verwendet, aber die spezifische Zeitspanne steht Entwicklern und Benutzern nicht zur Verfügung🎜

Schritt 3: 3rd_session generieren

Wie bereits erwähnt, wird session_key verwendet, um den Anmeldestatus „indirekt“ zu verwalten. Dies bedeutet auch, dass wir die Anmeldestatusinformationen des Benutzers selbst verwalten müssen Wird hier berücksichtigt. Bei direkter Verwendung des vom WeChat-Server verteilten Sitzungsschlüssels als Anmeldestatus der Geschäftspartei werden „interessierte Personen“ verwendet, um vertrauliche Informationen des Benutzers zu erhalten, z. B. den wx.getUserInfo() Schnittstelle. Session_key wird benötigt, um vertrauliche Informationen von WeChat-Benutzern zu entschlüsseln. <code>wx.getUserInfo()这个接口呢，就需要session_key来配合解密微信用户的敏感信息。

那么我们如果生成自己的登录态标识呢，这里可以使用几种常见的不可逆的哈希算法，比如md5、sha1等，将生成后的登录态标识（这里我们统称为'skey'）返回给前端，并在前端维护这份登录态标识(一般是存入storage)。而在服务端呢，我们会把生成的skey存在用户对应的数据表中，前端通过传递skey来存取用户的信息。

步骤四：在客户端保存Session ID

开发Web应用的时候，在客户端（浏览器）中，我们通常将Session ID存放在cookie中，但是小程序没有cookie机制，所以不能采用cookie了，但是小程序有本地的storage，所以我们可以使用storage来保存Session ID，以供后续的后台API调用所使用。

在之后，调用那些需要登录后才有权限访问的后台服务时，你可以将保存在storage中的Session ID取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该Session ID后，从redis中查找是否有该Session ID存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。

前面我们将skey存入前端的storage里，每次进行用户数据请求时会带上skey，那么如果此时session_key过期呢？所以我们需要调用到wx.checkSession()

Was wäre, wenn wir unsere eigene Login-Status-ID generieren? Hier können wir mehrere gängige irreversible Hash-Algorithmen wie md5, sha1 usw. verwenden, um die generierte Login-Status-ID zurückzugeben (hier bezeichnen wir sie gemeinsam als „Skey“). ) Front-End und verwalten Sie diese Anmeldestatusidentifikation im Front-End (normalerweise im Speicher gespeichert). Auf der Serverseite speichern wir den generierten Schlüssel in der Datentabelle, die dem Benutzer entspricht, und das Frontend greift durch Übergabe des Schlüssels auf die Informationen des Benutzers zu.

Schritt 4: Sitzungs-ID auf dem Client speichern

Bei der Entwicklung von Webanwendungen speichern wir im Client (Browser) normalerweise die Sitzungs-ID in einem Cookie, aber das Applet verfügt nicht über einen Cookie-Mechanismus und kann daher nicht Es kann ein Cookie verwendet werden, aber das Miniprogramm verfügt über lokalen Speicher, sodass wir den Speicher verwenden können, um die Sitzungs-ID für nachfolgende API-Aufrufe im Hintergrund zu speichern.

Später, wenn Sie Hintergrunddienste aufrufen, für deren Zugriff eine Anmeldung erforderlich ist, können Sie die im Speicher gespeicherte Sitzungs-ID herausnehmen und in die Anforderung übernehmen (sie kann im Header oder in der Abfragezeichenfolge enthalten sein, oder sie in den Text einfügen). und verwenden Sie sie entsprechend Ihren eigenen Anforderungen) und übergeben Sie sie an den Hintergrunddienst. Nachdem Sie die Sitzungs-ID im Hintergrundcode erhalten haben, wird überprüft, ob die Sitzungs-ID in Redis vorhanden ist gültig, setzen Sie die nachfolgende Codeausführung fort, andernfalls führen Sie eine Fehlerbehandlung durch.

Zuvor haben wir den Skey im Front-End-Speicher gespeichert. Jedes Mal, wenn wir eine Benutzerdatenanfrage stellen, bringen wir den Skey mit. Was passiert, wenn der Session_Key zu diesem Zeitpunkt abläuft? Daher müssen wir die API wx.checkSession() aufrufen, um zu überprüfen, ob der aktuelle session_key abgelaufen ist. Diese API muss keine Informationsparameter über den session_key übergeben, aber das WeChat-Applet passt ihn selbst an Verwenden Sie Ihren eigenen Dienst, um abzufragen, ob der zuletzt generierte Sitzungsschlüssel des Benutzers abgelaufen ist. Wenn der aktuelle Sitzungsschlüssel abläuft, lassen Sie den Benutzer sich erneut anmelden, aktualisieren Sie den Sitzungsschlüssel und speichern Sie den neuesten Schlüssel in der Benutzerdatentabelle.

Schritt 5: Unterstützung der Speicherung von Emoji-Ausdrücken

Wenn Sie den WeChat-Namen des Benutzers in der Datentabelle speichern müssen, bestätigen Sie das Codierungsformat der Datentabelle und der Datenspalten. Da der WeChat-Name des Benutzers möglicherweise Emoji-Symbole enthält und die häufig verwendete UTF8-Kodierung nur 1–3 Byte unterstützt, werden die Emoji-Symbole in genau 4 Byte Kodierung gespeichert.

Hier gibt es zwei Möglichkeiten (am Beispiel von MySQL):

1. Legen Sie den Speicherzeichensatz fest.

Ab Version MySQL5.5.3 wird das Festlegen des Zeichensatzes der Datenbank, der Datentabelle und der Daten unterstützt Spalte auf utf8mb4, sodass Sie die Standardzeichensatzkodierung und das serverseitige Kodierungsformat in /etc/my.cnf

[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

festlegen können, nachdem Sie die Standardzeichensatzkodierung und die serverseitige Zeichensatzkodierung festgelegt haben, wenn Sie vorhandene Tabellen kodieren und Felder müssen Sie die folgenden Schritte ausführen:

Setzen Sie den Datenbankzeichensatz auf utf8mb4

ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

Setzen Sie den Datentabellenzeichensatz auf utf8mb4

ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Setzen Sie den Datenspaltenfeldzeichensatz auf utf8mb4

ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

COLLATE hier bezieht sich auf den Sortierzeichensatz, der zum Sortieren und Vergleichen gespeicherter Zeichen verwendet wird. In utf8mb4 gibt es zwei häufig verwendete Sortierungen: utf8mb4_unicode_ci und utf8mb4_general_ci. Es wird allgemein empfohlen, utf8mb4_unicode_ci zu verwenden, da es auf dem Standard-Unicode-Sortierungsalgorithmus (UCA) basiert. zum Sortieren und kann in verschiedenen Sprachen präzise durchgeführt werden. Informationen zu den spezifischen Unterschieden zwischen diesen beiden Sortiermethoden finden Sie unter: Was ist der Unterschied zwischen utf8_general_ci und utf8_unicode_ci?? Sequelize, Sie können sich auf das Sequelize-Dokument beziehen

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWie erfolgt die Benutzeranmeldung im Miniprogramm? Wie behalte ich den Anmeldestatus bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!