ミニプログラム開発 -- ユーザーログインとメンテナンスのサンプルチュートリアル-ミニプログラム開発-php.cn

ユーザーログインの提供とユーザーのログインステータスの維持は、通常、ユーザーシステムを備えたソフトウェアアプリケーションが行う必要があることです。 WeChatのようなソーシャルプラットフォームの場合、小規模なプログラムアプリケーションを作る場合、ユーザー情報の連携を完全に切り離して放棄した純粋なツールソフトウェアを作ることは稀かもしれません。

ユーザーにログインを許可し、ユーザーを識別してユーザー情報を取得し、ユーザーを中心としたサービスを提供することは、ほとんどの小規模なプログラムが行うことです。今日は、ミニプログラムでユーザーをログインする方法と、ログイン後にセッション (セッション) ステータスを維持する方法を学びます。

WeChat ミニプログラムでは、通常、次の 3 種類のログイン方法を使用します:

自身のアカウント登録とログイン
他のサードパーティプラットフォームアカウントを使用してログイン
WeChat アカウントを使用ログインするには (つまり、現在ログインしている WeChat アカウントを直接使用して、ミニプログラムのユーザーとしてログインします)

1 番目と 2 番目の方法は、現在 Web アプリケーションで最も一般的な 2 つの方法であり、次の方法でも可能です。ただし、<a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie<strong> メカニズムに含まれているため、これら 2 つの方法を使用する前に、自分またはサードパーティの <a href="http://www.php.cn/js/js-weixinapp-api.html"> API</a></strong> は <code>Cookie に依存する必要がありますか? また、ログインにページリダイレクトを使用する必要があるサードパーティ API は、ミニプログラムではサポートされていません。は使用できません。 <a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie</a>的机制，所以在使用这2种方式前，请确认你们或第三方的API是否需要依赖Cookie；还有小程序中也不支持HTML页面，那些需要使用页面重定向来进行登录的第三方API就需要改造，或不能用了。

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

登录流程

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

ミニプログラム開発 -- ユーザーログインとメンテナンスのサンプルチュートリアル

登录流程图

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

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

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

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

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

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

ログイン後にコピー

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

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

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

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

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

ログイン後にコピー

你的后台服务(/wx/onlogin)接着需要使用这个传递过来的登录凭证，去调用微信接口换取openid和session_key，接口地址格式如下所示：

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

ログイン後にコピー

这里是我使用了Node.js Express构建的后台服务的代码，仅供参考：

router.get(&#39;/wx/onlogin&#39;, function (req, res, next) {
  let code = req.query.code

  request.get({
    uri: &#39;https://api.weixin.qq.com/sns/jscode2session&#39;,
    json: true,
    qs: {
      grant_type: &#39;authorization_code&#39;,
      appid: &#39;你小程序的APPID&#39;,
      secret: &#39;你小程序的SECRET&#39;,
      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)
    }
  })
})

ログイン後にコピー

这段后台代码成功执行的话，就可以得到openid和session_key。这个信息就是当前微信账户在微信服务器那边的登录态了。

但是，为了安全方面的原因，请不要直接使用这些信息作为你小程序的用户标识和session标识回传到小程序客户端中去，我们应该在服务器端做一层自己的session，将这个微信账号登录态生成一个session id并维护在我们自己的session机制中，然后把这个session id派发到小程序客户端作为session标识来使用。

关于如何在服务器端做这个session机制，我们现在一般采用键值对存储工具来做，比如redis。我们为每个session生成一个唯一的字符串作为键，然后可以将session_key和openid作为值，存入redis中，为了安全，存入的时候还应设置一个超时的时间。

步骤3：在客户端保存`sessionid`

今日は主に 3 番目の方法、つまり WeChat アカウントを使用してログインする方法について説明します。この方法は WeChat プラットフォームと最も緊密に統合されており、ユーザーエクスペリエンスが優れているためです。

ログインプロセス

ミニプログラムの公式ドキュメントのログインフローチャートを引用すると、ログインプロセス全体は基本的に次のようになります: 🎜

ミニプログラム開発 -- ユーザーログインとメンテナンスのサンプルチュートリアル
🎜

ログインフローチャート🎜🎜 この図では、「ミニプログラム」はミニプログラムフレームワークを使用して作成したコード部分を指します。「サードパーティサーバー」は通常、独自のバックグラウンドサービスプログラムです。「WeChatサーバー」」は、WeChatの公式APIサーバーです。 🎜🎜このフローチャートを段階的に見てみましょう。 🎜

ステップ 1: クライアントで現在ログインしている WeChat ユーザーの ログイン認証情報 (コード) を取得します 🎜🎜 ミニプログラムにログインするための最初のステップは、ログイン認証情報を取得することです。 wx.login() メソッドを使用して、ログイン認証情報を取得できます。 🎜🎜主にミニプログラムの実際のニーズに基づいて、ミニプログラムのアプリコードまたは他のページコードでログイン認証情報のリクエストを開始できます。 🎜

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

ログイン後にコピー

ステップ 2: ログイン認証情報をサーバーに送信し、サーバー上の認証情報を使用して WeChat サーバーと WeChat ユーザーの 一意識別子 (openid) および セッションキーを交換します。 (session_key)🎜🎜まず、wx.request() メソッドを使用して、自分たちで実装したバックエンド API をリクエストし、ログイン認証情報 (コード) を伝えます。たとえば、以前のコードに基づいて追加します: 🎜rrreee🎜バックグラウンドサービス (/wx/onlogin) は、渡されたログイン認証情報を使用して、openid と session_key と引き換えに WeChat インターフェイスを呼び出す必要があります。インターフェイスアドレスの形式は次のとおりです。 🎜rrreee🎜私が使用したものは次のとおりです。Node.js🎜 Express によって構築されたバックグラウンドサービスのコード (参考のみ): 🎜rrreee🎜このバックグラウンドコード正常に実行されると、 openid と session_key を取得できます。この情報は、WeChat サーバー上の現在の WeChat アカウントのログインステータスです。 🎜🎜 ただし、セキュリティ上の理由から、この情報をミニプログラムクライアントに送信するミニプログラムのユーザー ID とセッション ID として直接使用しないでください。サーバー側で独自のセッションを作成し、これを使用する必要があります。 WeChat アカウントのログイン状態によりセッション ID が生成され、それが独自のセッションメカニズムで維持され、このセッション ID がセッション ID として使用するためにミニプログラムクライアントに配布されます。 🎜🎜 このセッションメカニズムをサーバー側で実装する方法については、現在では Redis などのキーと値のストレージツールを使用するのが一般的です。各セッションのキーとして一意の文字列を生成し、session_key と openid を値として Redis に保存します。安全のため、保存時にタイムアウトを設定する必要があります。 🎜

ステップ 3: クライアントに sessionid を保存します🎜🎜 Web アプリケーションを開発する場合、クライアント (ブラウザ) では通常、セッション ID を Cookie に保存しますが、アプレットは Cookie メカニズムを使用しません。したがって、Cookie は使用できませんが、ミニプログラムにはローカルストレージがあるため、ストレージを使用して後続のバックグラウンド API 呼び出しのためにセッション ID を保存できます。 🎜

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

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

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

ログイン後にコピー

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

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