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 をデプロイする方法

推薦する

音声キューイングシステムを実装するためのJavaScript

目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

docker の実行に必要な権限の分析

Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

MySQL の一般的なツール例の概要 (推奨)

序文この記事では主にMySQLでよく使われるツールに関する関連コンテンツを紹介し、皆さんの参考と学習...

Linux で Xfce デスクトップ環境を使用すべき 8 つの理由

いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...

Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

停止したすべてのDockerコンテナを1つのコマンドで再起動する

停止したすべてのDockerコンテナを1つのコマンドで再起動するdocker ps -a | gre...

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...

MySQL の準同期レプリケーションについての簡単な説明

導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...