WeChatアプレット認証ログインを処理するエレガントな方法

WeChatアプレット認証ログインを処理するエレガントな方法

序文

WeChat ミニプログラム プロジェクトでユーザー情報を取得し、ユーザー ログインを実装する場合、WeChat が公式に提供するログイン機能を通じて WeChat ユーザー ID を簡単に取得し、ミニプログラム内でユーザー システムを迅速に構築できます。公式ドキュメントでは、認証ログインの呼び出し方法のみが提供されています。ドキュメントをそのままコピーしてコードを記述すると、必然的にコードの保守性が低下します。そのため、この記事では、WeChat アプレットの認証ログインをよりエレガントに処理する方法に焦点を当てています。

承認ログインの基本手順

上の図は、WeChatミニプログラムの公式サイトで提供されている認証ログインの基本的なフローチャートです。ここでは、フロントエンド開発の観点からのみプロセスを説明します。

  • wx.login() を介して一時的なログイン資格情報コードを取得します。
  • コードは、サーバーが提供するインターフェースを呼び出すことによってサーバーに渡され、サーバーは openid と session_key をフロントエンドに返します。これは、認可されたログインが正常に完了したことを意味します。openid と session_key の目的については、後ほど説明します。

一般的なログイン プロセスを理解したら、コードの記述を開始できます。 WeChat が提供する API インターフェース呼び出しはコードのメンテナンスに適していないため、promise を使用してプロセスをカプセル化しました (理解できない場合は、詳細な紹介については ES6 ドキュメントを参照してください)。これの利点は、将来的にインターフェース呼び出しを連鎖できることと、async/await (ES6 構文) を組み合わせて非同期インターフェースを同期できることです。

get/postインターフェースのカプセル化

ルート ディレクトリにサービス フォルダーを作成し、インターフェイスに関連するコードを保存してください。サービス フォルダーに myRequest.js ファイルを作成し、アプレットの get/post リクエストをカプセル化します。コードは次のとおりです。

//リクエストのカプセル化を取得(ジャンプページ判定)
// グローバル変数はグローバル関数 getApp を通じて取得できます。グローバル データはルート ディレクトリの app.js で設定できます。let app=getApp();
const myGet = (url, データ)=>{
 新しい Promise を返します ((resolve, reject)=>{
 wx.リクエスト({
  URL: `${app.globalData.HTTP}${url}`,
  データ:データ、
  メソッド:"GET",
  //この承認は、openid と session_key 情報ヘッダーを含む値です: { 'authorization': app.globalData.authorization}, //グローバル変数内のユーザー情報を取得し、リクエスト ヘッダーに挿入します success:(res)=>{
  (res.data.code == 409)の場合{
   //409はユーザーがログインしていないことを意味するため、記述されたログインページに強制的にジャンプしますwx.navigateTo({
   url: '../ログイン/ログイン'
   })
  } それ以外{
   解決(res.data);
  }
  },
  失敗:(res)=>{
  拒否する();
  }
 })
 })
}
//ポストリクエストのカプセル化(ジャンプページ判定)
const myPost = (url, データ) => {
 新しい Promise を返します ((resolve, reject) => {
 wx.リクエスト({
  URL: `${app.globalData.HTTP}${url}`,
  データ: データ、
  メソッド: "POST",
  ヘッダー: { 'authorization': app.globalData.authorization},
  成功: (res) => {
  (res.data.code == 409)の場合{
   wx.navigateTo({
   url: '../ログイン/ログイン'
   })
  }それ以外{
   解決(res.data);
  }
  
  },
  失敗: (res) => {
  拒否する();
  }
 })
 })
}
モジュール.エクスポート = {
 マイゲット、
 私の投稿、
}

グローバル変数設定の app.js コードは次のとおりです (グローバル変数データは、ページを更新するかミニプログラムを再入力すると初期化され、現在のデータ ステータスは永続的に保存できないことに注意してください)。

//アプリ.js
アプリ({
 onLaunch: 関数() {
 //ここでは、プロジェクトの実際のニーズに応じて、プロジェクトの初期化のために実行する必要があるコードを記述できます},
 グローバルデータ: {
 HTTP: "https://shop.yamecent.com/",
 //openid と session_key を取得したら、それらをアプレット メモリの認証に保存します。これにより、アプレット認証が削除されない限り、データが失われることはありません: wx.getStorageSync('authorization') || "", //アプレット メモリに保存されている認証を取得します
 }
})

認証ログインインターフェースのカプセル化

このカプセル化の部分では、非同期インターフェースを同期的に処理するために async/await を使用します。わからない場合は、ES6 ドキュメントの説明を参照してください。サービス フォルダーに login.js を作成します。コードは次のとおりです。

'./myRequest.js' を require します。
const app = getApp();
HTTP をグローバルデータとして保存します。
//コードカプセル化を取得するためのWeChatログインインターフェース const myLogin=()=>{
 新しい Promise を返します ((resolve, reject)=>{
 wx.ログイン({
  成功:(res)=>{
  解決(res.code);
  },
  失敗:(res)=>{
  拒否(res.errMsg);
  console.log("WeChatログインとコード取得に失敗しました");
  }
 })
 })
}
//openid と session_key インターフェースのカプセル化を取得します。const getUserMsg=(myUrl,myData)=>{
 新しい Promise を返します ((resolve,reject)=>{
 wx.リクエスト({
  URL: myUrl、
  メソッド: "POST",
  データ: myData、
  成功:(res)=>{
  res.data.code==500の場合{
   //失敗したwx.showToast({
   タイトル: res.data.msg、
   アイコン: 'なし'、
   期間: 2000,
   マスク:true、
   })
   resolve(500); //失敗した場合は500を返す   
  }それ以外{
   データを解決します。
  }  
  },
  失敗:(res)=>{
  拒否(res.data.msg);
  console.log("openid および session_key インターフェースの取得に失敗しました");  
  }
 })
 })
}

//ストレージをカプセル化します(注: ここでのストレージ プロセスは非同期です)
const mySetStorage=(キー,値)=>{
 新しい Promise を返します ((resolve, reject) => {
 wx.setStorage({
  キー: キー、
  データ: 値、
  成功: () => {
  解決します(true);
  },
  失敗: () => {
  拒否(偽);
  }
 })
 }) 
}

//ストレージをカプセル化する const myGetStorage=(key)=>{
 新しい Promise を返します ((resolve,reject)=>{
 wx.getStorage({
  キー: 'キー',
  成功: (res)=>{
  解決(res.data);
  },
  失敗:()=>{
  拒否("ストレージの取得に失敗しました");
  }
 })
 })
}


// 認証メソッドのカプセル化 // sendData は認証ボタンから取得したユーザー情報です。ここでは、ユーザーの情報を保存するためにバックグラウンドにパラメータとして渡されます // cb は認証ログインが成功した後に実行される関数です。具体的な関数はプロジェクトの要件によって異なり、必須ではない場合があります const myAuthorize = (sendData,cb="") => {
 非同期関数accredit() {
 wx.showLoading({
  タイトル: 「認証進行中」
  マスク:true
 })
 let code = await myLogin(); //WeChat ログインしてコードを取得する interface sendData.code=code;
 let author = await getUserMsg(`${HTTP}auth`, sendData); //バックグラウンド openid session_key を取得します interface wx.hideLoading();
 著者の場合==500{
  戻る;
 }
 await mySetStorage("authorization", author.Authorization); //メモリに保存し、取得するアプレットを入力して app.globalData に保存します。app.globalData.authorization = author.Authorization;
 typeof cb == "function" && cb(author); //コールバックに必要なログインステータスパラメータ //タブバーユーザーのショッピングカートの数など、その他のビジネスロジックをここに追加できます。wx.showToast({
  タイトル: 「認証成功」
  アイコン: '成功'、
  期間: 2000,
  マスク: 真
 });    

 
 }
 認定する();
}

モジュール.エクスポート = {
 マイオーソライズ、
 マイセットストレージ、
 マイストレージ
}

認証ログインがパッケージ化されたら、プロジェクトでどのように使用するかを見てみましょう。WeChat アプレットの認証はボタンによってのみトリガーできるため、ボタン コンポーネントを使用し、getUserInfo タイプとして open-type を指定して、ユーザーの基本情報を取得します。 login.wxml コードは次のとおりです。

<button class='btn' open-type="getUserInfo" bindgetuserinfo='gotoLogin'>今すぐログイン</button>

login.js コードは次のとおりです。

// ページ/ログイン/ログイン.js
'../../common/script/myRequest.js' が必要です。
const login = require('../../common/script/login.js');
const app = getApp();
HTTP を app.globalData.HTTP に設定します。
ページ({

 /**
 * ページの初期データ */
 データ: {
 
 },
 ログインへ移動: 関数 (e) {
 let sendOjb={};//ユーザー情報を保存するために使用されますif (e.detail.errMsg == "getUserInfo:ok"){
  sendOjb = { アバター: e.detail.userInfo.avatarUrl,
     ニックネーム: e.detail.userInfo.nickName, 
     性別: e.detail.userInfo.gender,
     州: e.detail.userInfo.province、 
     都市: e.detail.userInfo.city}; 
  login.myAuthorize(sendOjb,()=>{
  wx.navigateBack(); // 成功後に前のページに戻るか、プロジェクトの要件に応じて他のロジックを記述します}) 
 }それ以外{
  
 }
 },
 /**
 * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {

 },
})

結論

上記のコードは、ご自身の WeChat アプレット プロジェクトにコピーして貼り付けることができ、正常に実行されます。エラーや改善が必要な箇所がある場合は、ご連絡ください。すぐに修正いたします。

これで、WeChat ミニプログラムの認証ログインを処理するエレガントな方法についての記事は終了です。WeChat ミニプログラムの認証ログインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)
  • springboot+jwt+springSecurity WeChat アプレット認証ログインの問題
  • ユーザー情報(アバター、ニックネーム)を取得するためのWeChatアプレットwx.getUserInfo認証の実装
  • uni-app WeChatアプレットのログイン認証の実装
  • WeChat ミニプログラム ユーザーの背景位置情報と記録の承認とリクエストの例

<<:  Win7 での mysql5.5 インストール グラフィック チュートリアル

>>:  Docker で Node.js をデプロイする方法

推薦する

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

Reactのコンテキストとプロパティの説明

目次1. 文脈1. 使用シナリオ2. 使用手順3. 結論2. 小道具の詳細1. 子供の財産2. 小道...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

MySQL 最適化 query_cache_limit パラメータの説明

クエリキャッシュ制限query_cache_limit は、単一のクエリで使用できるバッファ サイズ...

Node-Redを使用してMySQLデータベースに接続する方法

Node-red をデータベース (mysql) に接続するには、まずコンピューターに MySQL ...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Linux におけるゼロコピー技術の使用に関する簡単な分析

この記事では、Linux におけるいくつかの主要なゼロコピー テクノロジと、ゼロコピー テクノロジを...

Docker での WSL の構成と変更の問題について

https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

Vue+Openlayer をベースに geojson を動的に読み込む方法

1つ以上の機能をロードする <テンプレート> <div id="map&...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...