ミニプログラムでユーザーログインを行うにはどうすればよいですか?ログイン状態を維持するにはどうすればよいですか?

ユーザーにログインを許可し、ユーザーを識別してユーザー情報を取得し、ユーザーを中心としたサービスを提供することは、ほとんどの小規模なプログラムが行うことです。今日は、ミニ プログラムでユーザーをログインする方法と、ログイン後にセッション状態を維持する方法を学びます。 [関連する学習の推奨事項: ミニ プログラム開発チュートリアル ]

WeChat ミニ プログラムでは、通常、次の 3 種類のログイン方法が必要になります:

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

最初のメソッドと 2 番目のメソッドは、現在 Web アプリケーションで使用されている 2 つの最も一般的なメソッドです。これらは WeChat ミニ プログラムでも使用できますが、ミニ プログラムには # がないことに注意してください。 ##Cookie メカニズムを使用するため、これら 2 つのメソッドを使用する前に、自分またはサードパーティの API が Cookie; に依存する必要があるかどうかを確認してください。また、ミニ プログラムは HTML ページをサポートしていません。ログインにページ リダイレクトを使用するサードパーティ API は変更する必要があるか、使用できない可能性があります。

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

ログインプロセス

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

この図では、「ミニ プログラム」はミニ プログラム フレームワークを使用して作成したコード部分を指します。「サードパーティ サーバー」は通常、独自のバックグラウンド サービス プログラムであり、「WeChat サーバー」はWeChat の公式 API サーバー。

このフローチャートを段階的に見てみましょう。

ステップ 1: クライアント上で現在ログインしている WeChat ユーザーのログイン資格情報 (コード) を取得する

ミニ プログラムにログインするための最初のステップは次のとおりです。まずログイン認証情報を取得します。 wx.login()

メソッドを使用して、ログイン認証情報を取得できます。

主にミニ プログラムの実際のニーズに基づいて、ミニ プログラムのアプリ コードまたは他のページ コードでログイン認証情報のリクエストを開始できます。

ステップ 2: ログイン認証情報をサーバーに送信し、サーバー上の認証情報を使用して WeChat サーバーと WeChat ユーザーの一意の識別子 (openid) およびセッション キー (session_key ) を交換します。

まず、wx.request() メソッドを使用して、自分たちで実装したバックエンド API をリクエストし、そこにログイン認証情報 (コード) を渡します。たとえば、次のように追加します。次に、渡されたログイン認証情報を使用して、openid と session_key と引き換えに WeChat インターフェイスを呼び出す必要があります。 まず、openid を紹介しましょう。公式アカウントを使用したことのある子供たちは、この ID に精通しているはずです。公の場では、プラットフォームでは、サブスクリプション アカウント、サービス アカウント、ミニ プログラムの 3 つの異なるアプリケーションで各ユーザーの一意の ID を識別するために使用されます。つまり、各アプリケーションの各ユーザーの openid は一貫性がありません。そのため、ミニ プログラムでは、次のことができます。 openid を使用してユーザーの一意性を識別します。

それでは、session_key は何に使用されるのでしょうか?ユーザー ID を使用してユーザーにログインさせる必要があります。次に、現在のユーザーのセッション操作の有効性を確認するための session_key が WeChat サーバーによって配布されます。言い換えれば、この識別子を使用して、アプレット ユーザーのログイン ステータスを間接的に維持することができます。では、この session_key はどのように取得したのでしょうか?独自のサーバーで WeChat によって提供されるサードパーティ インターフェイスをリクエストする必要があります https://api.weixin.qq.com/sns/jscode2session

これらのパラメータから、これをリクエストする必要があることがわかります。インターフェース まず wx.login() を呼び出して、ユーザーの現在のセッションのコードを取得する必要があります。では、なぜサーバー側でこのインターフェイスをリクエストする必要があるのでしょうか?実はこれはセキュリティ上の理由からで、このインターフェースをフロントエンドのリクエストで呼び出すと必然的にミニプログラムのappidやミニプログラムのシークレットを外部に公開することになります。また、WeChat サーバーによって発行された session_key も公開されるため、「善意を持つ人々」にとって、これはビジネスのセキュリティに大きなリスクをもたらします。サーバー側で session_key を取得することに加えて、次の 2 点に注意する必要があります。

session_key は WeChat で配布されるコードと 1 対 1 に対応しており、同じコードです。 session_key と交換できるのは 1 回のみです。

wx.login()

が呼び出されるたびに、新しいコードと対応する session_key が発行されます。ユーザー エクスペリエンスとログイン状態の有効性を確保するために、開発者は、ユーザーが次のことを行う必要があることを認識する必要があります。呼び出す前に再度ログインしてください。

wx.login()

• session_key が無効です。wx.login を呼び出さなくても、session_key は期限切れになります。時間はユーザーによるアプレットの使用によって異なります。頻度は正の相関関係がありますが、開発者とユーザーは具体的な時間の長さを知ることができません

ステップ 3: 3rd_session を生成する

前述したように、session_key はログイン状態を「間接的に」維持するために使用されます。ユーザーを自分で管理する必要がある ログインステータス情報、セキュリティ要素もここで考慮されます WeChatサーバーから配布されたsession_keyがそのまま取引先のログインステータスとして使用されると、それは「意図的な人々」によって使用されてしまいます wx.getUserInfo() などのユーザーの機密情報を取得します。

このインターフェイスでは、WeChat ユーザーの機密情報を復号化するために session_key が必要です。

それでは、独自のログイン ステータス ID を生成したらどうなるでしょうか? ここでは、md5、sha1 などのいくつかの一般的な不可逆ハッシュ アルゴリズムを使用して、ログイン ステータス ID (ここでは総称して「ログイン ステータス ID」と呼びます) を生成できます。 'skey ') はフロントエンドに返され、ログイン ステータス識別子はフロントエンドで維持されます (通常はストレージに保存されます)。サーバー側では、生成された skey をユーザーに対応するデータテーブルに保存し、フロントエンドは skey を渡すことでユーザーの情報にアクセスします。

ステップ 4: セッション ID をクライアントに保存する

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

後で、アクセスにログインが必要なバックグラウンド サービスを呼び出すときに、ストレージに保存されているセッション ID を取り出してリクエストに含めることができます (ヘッダーまたはクエリ文字列に含めることも、それを含めることもできます)。本文で、必要に応じて使用してください)、バックグラウンド サービスに渡します。バックグラウンド コードでセッション ID を取得した後、セッション ID が Redis から存在するかどうかを確認します。存在する場合は、セッションが存在することを確認します。有効であり、後続のコードの実行を続行します。それ以外の場合は、エラー処理が実行されます。

先ほど、skey をフロントエンド ストレージに保存しました。ユーザー データ リクエストを行うたびに、skey を持ち出します。では、この時点で session_key の有効期限が切れたらどうなるでしょうか?したがって、wx.checkSession()

この API を呼び出して、現在の session_key の有効期限が切れているかどうかを確認する必要があります。この API は session_key に関する情報パラメータを渡す必要はありませんが、WeChat アプレットは自動的に調整します。ユーザーが最後に生成した session_key の有効期限が切れているかどうかをクエリします。現在の session_key の有効期限が切れた場合は、ユーザーを再度ログインさせ、session_key を更新し、最新の skey をユーザー データ テーブルに保存します。

ステップ 5: 絵文字表現の保存をサポートする

ユーザーの WeChat 名をデータ テーブルに保存する必要がある場合は、データ テーブルとデータのエンコード形式を確認してください。列。ユーザーの WeChat 名には絵文字アイコンが含まれている可能性があり、一般的に使用される UTF8 エンコーディングは 1 ～ 3 バイトしかサポートしていないため、絵文字アイコンはちょうど 4 バイトのエンコーディングで保存されます。

ここには 2 つの方法があります (mysql を例にします):

1. ストレージ文字セットを設定します

mysql5.5.3 バージョンの後、サポート データベース、データ テーブル、およびデータ列の文字セットを utf8mb4 に設定します。これにより、デフォルトの設定後、/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

でデフォルトの文字セット エンコーディングとサーバー側エンコーディング形式を設定できます。キャラクタ セット エンコーディングとサーバー側キャラクタ セット エンコーディング既存のテーブルとフィールドをエンコードする場合は、次の手順を実行する必要があります:

データベース キャラクタ セットを utf8mb4

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

に設定します。データ テーブルの文字セットを utf8mb4 に設定します

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

データ列フィールドの文字セットを utf8mb4 に設定します

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

ここでの COLLATE は、格納されている文字の並べ替えと比較に使用される並べ替え文字セットを指します。一般的に使用される utf8mb4 の照合順序 utf8mb4_unicode_ci と utf8mb4_general_ci の 2 種類がありますが、標準 Unicode 照合アルゴリズム (UCA) に基づいて並べ替えられ、さまざまな言語で正確に並べ替えられるため、通常は utf8mb4_unicode_ci を使用することをお勧めします。これら 2 つの並べ替え方法の具体的な違いについては、「utf8_general_ci と utf8_unicode_ci

2 の違い」を参照してください。Sequelize を使用して絵文字文字をライブラリにエンコードし、使用時にデコードします

Sequelize の構成は次のとおりです。Sequelize のドキュメントを参照してください。

{
 dialect: 'mysql', // 数据库类型
 dialectOptions: { 
  charset: 'utf8mb4',
  collate: "utf8mb4_unicode_ci"
 },
}

添付ファイル: バックエンド コード (tp5)

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がミニプログラムでユーザーログインを行うにはどうすればよいですか?ログイン状態を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。