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のセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

Mac に Windows サービスを備えた仮想マシンをインストールする方法

1. 仮想マシンをダウンロードする公式ダウンロードウェブサイト: https://www.vmwar...

Reactを使用して画像認識アプリを実装する方法

まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...

html2canvas で破線境界線を実装する例

html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...

MySQLでデータテーブルを作成するときにエンジンMyISAM/InnoDBを設定する

mysql を構成するときに、構成ファイル内のデフォルトのストレージ エンジンを InnoDB に設...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...

docker pull imageエラーの問題を解決する

説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

MySql 学習 3 日目: データ テーブル間の接続とクエリの詳細

主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

MySQL 8.0.13 zipパッケージのインストール方法について

MySQL 8.0.13 にはデフォルトでデータ フォルダがあります。このフォルダを削除する必要があ...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

Docker View プロセス、メモリ、カップ消費量

Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...