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 手動インストールと設定チュートリアル

推薦する

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...

el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明

目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...

CSS 境界線の長さ制御機能の実装

以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...

VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明

1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

JS 面接の質問: forEach はループから抜け出すことができますか?

この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...

kindとDockerを使用してローカルKubernetes環境を起動する

導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

ミニプログラムはリストのカウントダウン機能を実装します

この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...

ログインと登録機能を実現するjs

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

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

Dockerfile を使用して nginx イメージを構築する例

Dockerfile の紹介Docker は、Dockerfile の内容を読み取ってイメージを自動...

Linux で利用可能なネットワーク インターフェイスを表示する方法

序文Linux システムをインストールした後の最も一般的なタスクは、ネットワーク構成です。もちろん、...