序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト
>>: mysql8.0.11 winx64 手動インストールと設定チュートリアル
データ型が datetime であるフィールド add_time を持つテーブル product が...
目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...
以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...
1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...
導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...
問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...
前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...
Dockerfile の紹介Docker は、Dockerfile の内容を読み取ってイメージを自動...
序文Linux システムをインストールした後の最も一般的なタスクは、ネットワーク構成です。もちろん、...