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

推薦する

Redis イメージの Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する落とし穴を避けるための注意MySQLコン...

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

Linux プラットフォームの MySQL でリモート ログインを有効にする

開発中、MySQL へのリモートアクセスでよく問題に遭遇します。そのたびに検索する必要があり、面倒に...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...

Linux+ApacheサーバURLの大文字と小文字の区別の問題を解決する

今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...

ウェブサイトに天気予報を挿入する方法

天気予報をウェブサイトに挿入すると、次のような効果が得られます。次のコードを挿入する必要があります:...

MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

jQuery はパーセンテージスコアリングの進捗バーを実装します

この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

Linux での SELinux を理解する方法

目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...

MySQL のインデックス障害の一般的なシナリオと回避方法

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...

Docker はクラスター MongoDB 実装手順を構築します

序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...