WeChat ミニプログラム ユーザー認証のベストプラクティス ガイド

WeChat ミニプログラム ユーザー認証のベストプラクティス ガイド

序文

WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることがよくあります。たとえば、ログインする場合は個人情報を取得する必要があります。顔認識を行う場合はカメラの権限を取得する必要があります。位置マップ機能を使用する場合は、ユーザーの位置情報の権限を取得する必要があります。ユーザーのアルバムに写真を保存する場合は、アルバムの権限を取得する必要があります。

WeChatスコーププロセス:

ほとんどの機能は、承認なしでは利用できません。通常、権限が有効になっているかどうかを確認し、有効になっている場合は引き続き使用します。有効になっていない場合は、引き続き承認を要求するようにプロンプ​​トを表示します。それでも拒否される場合は、プロンプトを表示し、ユーザーが手動で設定ページに移動してオンにできるようにします...

#通常のロジック

しかし、これを書き出すと次のようになるかもしれません:

wx.getSetting({
    成功(res)=>{
        res.authSetting['scope']の場合{
          console.log('権限がありません')
              wx.authorize({
                スコープ: 'スコープ',
                成功() {
                    console.log('認証に成功しました')
                },
                失敗() {
                    console.log('認証に失敗しました。ユーザーが手動で認証してください')
                    wx.showModal({
                        タイトル: 「温かいヒント」
                        内容: 'xxx 権限が有効になっていません'、
                        表示キャンセル: false、
                        成功(res) {
                        (res.confirm)の場合{
                            console.log('ユーザーがOKをクリック')
                            wx.openSetting({
                                成功(res) {
                                    コンソールログ(res.authSetting)
                                    res.authSetting = {
                                    "スコープ.カメラ": true,
                                    }
                                }
                            })
                        } そうでない場合 (res.cancel) {
                            console.log('ユーザーがキャンセルをクリック')
                        }
                        }
                  })
                }
             })
        } それ以外 {
          console.log('承認済み')
        }
    },
    失敗(エラー)=>{}
})

今は 2012 年です。これを文書化してビジネス ロジックと混ぜると、ひどいことになります。

我慢できなかったので、関数をカプセル化するのに時間を費やしました。指定された権限名を渡すだけで、ユーザーが権限を有効にしたかどうかを検出できます。有効になっていない場合は、プロンプトが表示されます。それでも有効になっていない場合は、設定ページに移動して手動で有効にします (つまり、有効にする必要があります)。

当初はコード スニペットを記述したかったのですが、後でツールで openSetting を呼び出すときに問題があることがわかったので、断念しなければなりませんでした。

#コードの詳細

// utils/auth.js

/**
 * @パラメータ {
 * authType: 認証タイプ* }
 */

module.exports = 非同期関数 wxAuth(authType) {
  // スコープArr 参照: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
  スコープArr = [
    「ユーザー情報」、
    「ユーザーの場所」、
    「ユーザーロケーション背景」、
    "住所"、
    「請求書タイトル」、
    "請求書"、
    「ウェルン」、
    "記録"、
    「写真アルバムを書き込む」
    "カメラ"、
  ];
  (スコープArr.indexOf(authType)== -1)の場合{
    return console.error("正しい認証タイプを入力してください");
  }
  scope = "scope." + authType とします。
  isUserSet = getSettingSync(scope) を待機します。
  if (isUserSet) が true を返す;
  isAuthorize = authorizeSync(scope) を待機します。
  if (isAuthorize) が true を返す;
  showModalMes = showModalSync(scope) を待機します。
  // 認証を促すポップアップウィンドウ if (showModalMes) {
    // 手動認証に進みます let openSet = await openSettingSync(scope);
    (オープンセット)の場合{
      true を返します。
    } それ以外 {
      false を返します。
    }
  } それ以外 {
    // 認証を拒否します。false を返します。
  }
};

// ユーザーが認証機能を有効にしているかどうかを判定する getSettingSync(scope) {
  新しい Promise を返します ((resolve, reject) => {
    wx.getSetting({
      成功(res) {
        if (!res.authSetting[スコープ]) {
          console.log("権限がありません");
          解決(偽);
        } それ以外 {
          console.log("承認されました");
          解決します(true);
        }
      },
      失敗(エラー) {
        拒否する();
        console.error("wx.getSetting エラー", err);
      },
    });
  });
}
// ユーザー認証を要求する function authorizeSync(scope) {
  新しい Promise を返します ((resolve, reject) => {
    wx.authorize({
      スコープ: スコープ、
      成功() {
        解決(true);
        console.log("認証が成功しました");
      },
      失敗() {
        解決(偽);
        console.log("認証に失敗しました");
      },
    });
  });
}
// ポップアップウィンドウがユーザーに手動で承認するよう促す function showModalSync(scope) {
  新しい Promise を返します ((resolve, reject) => {
    wx.showModal({
      タイトル: 「ヒント」、
      コンテンツ: `ユーザーエクスペリエンスを向上させるために、${scope} 関数を承認してください`、
      confirmText: "承認に進む",
      表示キャンセル: false、
      成功(res) {
        (res.confirm)の場合{
          console.log("クリックして確認");
          解決(true);
        } そうでない場合 (res.cancel) {
          解決(偽);
        }
      },
      失敗(エラー) {
        拒否する();
        console.error(err, "wx.showModal エラー");
      },
    });
  });
}
// クライアントアプレット設定インターフェースを呼び出し、ユーザーが設定した操作結果を返します。関数 openSettingSync(scope) {
  新しい Promise を返します ((resolve, reject) => {
    wx.openSetting({
      成功(res) {
        コンソールにログ出力します。
        res.authSetting[スコープ]の場合{
          解決します(true);
        } それ以外 {
          解決(偽);
        }
      },
      失敗(エラー) {
        拒否する();
        console.error(err, "wx.openSetting エラー");
      },
    });
  });
}

#使用

JS コードリファレンス:

'./../../utils/auth' から auth をインポートします。
ページ({
   データ:{
     isCameraAuth: false
   },
   オンロード(){
         // 認証コード auth('camera').then(() => {
      console.log('認証に成功しました')
      this.setData({
        カメラ認証: true
      }
    }).catch((エラー) => {
      console.error('認証に失敗しました');
    })
   }
})

wxml コードリファレンス:

<!-- index.wxml -->
<view>承認されていますか: {{isCameraAuth}}</view>
<カメラ wx:if="{{isCameraAuth}}" スタイル="幅: 100%; 高さ: 300px;"></カメラ>

#プレビュー

この目的のために、デモを作成しました。デモ プレビューをクリックすると、開発ツールで直接プレビューが開きます。

要約する

これで、WeChat ミニプログラムのユーザー認証のベストプラクティスに関するこの記事は終了です。WeChat ミニプログラムのユーザー認証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChat アプレット認証によるユーザー詳細の取得 OpenID の例の詳細な説明
  • WeChatミニプログラムでユーザー認証を通じて携帯電話番号を取得する方法(getPhoneNumber)
  • WeChatアプレットのユーザー認証、およびログインの有効期限が切れているかどうかを確認する方法
  • WeChatアプレットは、ユーザーのログイン機能を承認するために携帯電話番号を取得します
  • WeChatミニプログラムのユーザー認証、位置情報認証、WeChatにバインドされた携帯電話番号の取得
  • WeChatミニプログラムは、ユーザーが個人情報の取得を再度承認する必要があるかどうかを決定します。
  • WeChatミニプログラムのユーザー認証ポップアップウィンドウが拒否された場合、ユーザーに再認証を案内します。
  • WeChat ミニプログラム - ユーザーの地理的な場所名を取得する方法 (ユーザーの許可なし)
  • WeChatミニプログラムでユーザー認証を再度取得する方法
  • WeChatアプレット開発ユーザー認証ログインの詳細な説明

<<:  リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト

>>:  mysql8.0.11 winx64 手動インストールと設定チュートリアル

推薦する

psdカット画像をdiv+css形式に変換する

PSD から div css へのウェブページ切り取り例ステップ 1: まず、すべてのタグの内側と外...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

Dockerをクリーンアンインストールする方法の詳細な説明

まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...

Mysql 5.7.19 無料インストール版 (64 ビット) の設定方法に関する詳細なチュートリアル

公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...

Dockerコンテナのセルフスタートを実装する方法

コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...

Win10にMySQL8圧縮パッケージ版をインストールするチュートリアル

1 公式サイトからMySQL8をダウンロードしてインストールするMySQL8 ダウンロードアドレスこ...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

MySQL ストアド関数の詳細な紹介

目次1. ストアド関数を作成する2. ストアド関数の呼び出し3. 保存された関数を削除する4. スト...

Nexus を使用して jar パッケージをプライベート サーバーに追加する方法

なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

Vueプラグインの詳しい説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)

インストール プロセスは、コンパイル手順を除いて、基本的にソース バージョンと同じです。この記事では...

VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...