Mini-Programmentwicklung – Beispiel-Tutorial zur Benutzeranmeldung und Wartung

Die Bereitstellung der Benutzeranmeldung und die Aufrechterhaltung des Benutzeranmeldestatus sind im Allgemeinen Dinge, die eine Softwareanwendung mit einem Benutzersystem tun muss. Wenn wir für eine soziale Plattform wie WeChat eine kleine Programmanwendung erstellen, erstellen wir möglicherweise selten eine reine Tool-Software, die vollständig von der Verknüpfung von Benutzerinformationen getrennt ist und diese aufgibt.

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 (Session) nach der Anmeldung beibehält.

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

• Registrierung und Anmeldung eines eigenen Kontos

• Verwenden Sie andere Plattformkonten von Drittanbietern, um sich anzumelden.

• Verwenden Sie das WeChat-Konto, um sich anzumelden (d. h., verwenden Sie direkt das aktuell angemeldete WeChat-Konto, um sich als Benutzer anzumelden des Miniprogramms)

Die erste und die zweite Methode sind derzeit die beiden häufigsten Methoden in Webanwendungen. Sie können auch in WeChat-Miniprogrammen verwendet werden, sind aber kostenpflichtig Achtungauf: Es gibt keinen <a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie<code><a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie</a>-Mechanismus im Mini-Programm, also wenn Sie diese verwenden 2 Bevor Sie diese Methode verwenden, überprüfen Sie bitte, ob Ihre API auf Cookie angewiesen sein muss. Das Mini-Programm unterstützt keine HTML-Seiten und diese von Drittanbietern -Partei-APIs, die zum Anmelden eine Seitenumleitung verwenden müssen, müssen renoviert werden oder sind nicht mehr verwendbar.

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

Anmeldevorgang

Unter Berufung auf das Anmeldeablaufdiagramm des offiziellen Miniprogrammdokuments ist der gesamte Anmeldevorgang im Wesentlichen wie folgt:

Login-Flussdiagramm

In dieser Abbildung bezieht sich „Miniprogramm“ auf den Codeteil, den wir mit dem Miniprogramm-Framework schreiben. „Drittanbieterserver“ ist im Allgemeinen unser eigenes Hintergrunddienstprogramm server“ ist der offizielle API-Server von WeChat.

Lassen Sie uns dieses Flussdiagramm Schritt für Schritt aufschlüsseln.

Schritt 1: Erhalten Sie den aktuell angemeldeten WeChat-Benutzer auf dem Client 登录凭证(code)

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.

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);
        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

Schritt 2: Senden Sie die Anmeldeinformationen an Ihren Server und verwenden Sie die Anmeldeinformationen auf Ihrem Server, um zuerst den WeChat-Server gegen die 唯一标识(openid) und 会话密钥(session_key)

des WeChat-Benutzers auszutauschen , verwenden wir die Methode wx.request(), um eine Backend-API anzufordern, die wir selbst implementiert haben, und bringen dort die Anmeldeinformationen (Code) ein, indem wir beispielsweise auf der Grundlage unseres vorherigen Codes Folgendes hinzufügen:

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);

          // --------- 发送凭证 ------------------
          wx.request({
            url: 'https://www.my-domain.com/wx/onlogin',
            data: { code: code }
          })
          // ------------------------------------

        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

Ihr Hintergrunddienst (/wx/onlogin) muss dann die übergebenen Anmeldeinformationen verwenden, um die WeChat-Schnittstelle im Austausch für openid und session_key aufzurufen. Das Schnittstellenadressformat ist wie folgt:

api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Hier ist, was ich verwenden Der von Node.js Express erstellte Code des Hintergrunddienstes dient nur als Referenz:

router.get('/wx/onlogin', function (req, res, next) {
  let code = req.query.code

  request.get({
    uri: 'https://api.weixin.qq.com/sns/jscode2session',
    json: true,
    qs: {
      grant_type: 'authorization_code',
      appid: '你小程序的APPID',
      secret: '你小程序的SECRET',
      js_code: code
    }
  }, (err, response, data) => {
    if (response.statusCode === 200) {
      console.log("[openid]", data.openid)
      console.log("[session_key]", data.session_key)

      //TODO: 生成一个唯一字符串sessionid作为键，将openid和session_key作为值，存入redis，超时时间设置为2小时
      //伪代码: redisStore.set(sessionid, openid + session_key, 7200)

      res.json({ sessionid: sessionid })
    } else {
      console.log("[error]", err)
      res.json(err)
    }
  })
})

Wenn dieser Hintergrundcode erfolgreich ausgeführt wird, können Sie die openid und den session_key abrufen. Bei diesen Informationen handelt es sich um den aktuellen Anmeldestatus des WeChat-Kontos auf dem WeChat-Server.

Verwenden Sie diese Informationen jedoch aus Sicherheitsgründen nicht direkt als Benutzer-ID und Sitzungs-ID Ihres Miniprogramms, um sie an den Miniprogramm-Client zurückzusenden. Wir sollten unsere eigene Ebene auf der Serverseite erstellen. Sitzung, generieren Sie eine Sitzungs-ID aus diesem Anmeldestatus des WeChat-Kontos und verwalten Sie sie in unserem eigenen Sitzungsmechanismus. Anschließend verteilen Sie diese Sitzungs-ID an den Miniprogramm-Client zur Verwendung als Sitzungskennung.

In Bezug auf die Implementierung dieses Sitzungsmechanismus auf der Serverseite verwenden wir jetzt im Allgemeinen Schlüsselwertspeichertools wie Redis. Wir generieren für jede Sitzung eine eindeutige Zeichenfolge und speichern dann session_key und openid als Werte in Redis. Aus Sicherheitsgründen sollte beim Speichern ein Timeout festgelegt werden.

Schritt 3: Auf dem Client speichern sessionid

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

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

这是一个需要session验证的后台服务示例，我的sessionid是放在header中传递的，所以在这个示例中，是从请求的header中获取sessionid：

router.get('/wx/products/list', function (req, res, next) {
  let sessionid = req.header("sessionid")
  let sessionVal = redisStore.get(sessionid)
  if (sessionVal) {
    // 执行其他业务代码
  } else {
    // 执行错误处理
  }
})

好了，通过微信账号进行小程序登录和状态维护的简单流程就是这样，了解这些知识点之后，再基于此进行后续的开发就会变得更容易了。

另外，腾讯前端团队也开源了他们封装的相关库，可以借鉴和使用。

• 服务器端库 weapp-session

• 小程序端库 weapp-session-client

感谢阅读我的文章，如有疑问或写错的地方请不吝留言赐教。

【相关推荐】

1. 微信小程序完整源码下载

2. 简单的左滑操作和瀑布流布局

3. 微信小程序游戏类demo挑选不同色块

Das obige ist der detaillierte Inhalt vonMini-Programmentwicklung – Beispiel-Tutorial zur Benutzeranmeldung und Wartung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!