H5 WeChatパブリックアカウント認証を実装するための簡単な手順

H5 WeChatパブリックアカウント認証を実装するための簡単な手順

序文

昨日、h5 WeChat認証の実装が必要なプロジェクトがありました。したがって、この機能を完了するには 2 時間かかりました。​

作業開始前の準備

プロセスの説明 [事前に伝えられたプロセス]

  1. WeChat 認証には時間制限があります。一定期間内に一度認証されると、再度クリックして確認する必要はありません。 WeChat をアンインストールして再インストールする場合でも、認証を再確認する必要があります。
  2. 初めて承認を確認する場合でも、承認後でも、WeChat サーバーを使用して、バックエンド インターフェイス コールバックへのコールバックを承認できます。
  3. WeChat 認証コールバック後、コードと状態パラメータが返されます。バックエンドはコードを通じて accessToken を取得し、accessToken を通じてユーザー情報を取得できます。
  4. バックエンドがサーバー コールバックを受信した後、フロントエンドにコールバックするときに 2 つの主要なフィールドがあります。isAuth は承認されているかどうかを表し、isBindFlag はシステムに登録され、ログインされているかどうかを表します。ここで、現在のシステムではユーザー認証登録が必要なため、これら 2 つのフィールドが存在します。

ドメイン名、ポート

  • 準備されたドメイン名 - 公安部に登録されたドメイン名
  • ポート番号は80です。

ドメイン名とポート番号は、WeChat パブリック アカウントの構成と WeChat サーバー コールバックにドメイン名とポート 80 が必要であるため、必須です。

ここでは、同じドメイン名とポートがフロントエンドとバックエンドの IP アドレスに適合され、nginx 統合プロキシを介して処理されます。

仕事の準備

  • ドメイン名: http.xxx.cn
  • フロントエンドリソースの展開: http.xxx.cn
  • バックエンドコールバックインターフェース: http.xxx.cn/api/auth

WeChatパブリックアカウントを設定する

ドメイン名の設定

検証ファイルをサーバーのルート パスにアップロードします。そうしないと、ドメイン名の構成を保存できません。

ホワイトリストの設定

コードを書く

React をインポートし、{useEffect} を "react" から取得します。
"@tarojs/components" から View をインポートします。

エクスポートデフォルト()=> {
  使用効果(() => {
    // バックエンド コールバックのパスの形式: http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
    
    var isBindFlag = false、isAuth = false、opendId = '', paramsArray = [];


    /*
     * 省略されたコード: アドレスの決定、パラメータの処理、isAuth、isBindFlag、openIdへの割り当て
     */ 

    if (!isAuth) { // 権限がありません window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'xxxxxxx'}&redirect_uri=http://xxxxx/api/auth?response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
    } else if (!isBindFlag) { // 登録されていません window.location.href = '#/pages/login'
    } else { // ログイン window.location.href = '#/pages/index'
    }
  }, []);

  戻る (
    <表示>
    </表示>
  );
};

要約する

H5 WeChatパブリックアカウント認証に関するこの記事はこれで終わりです。WeChatパブリックアカウント認証に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat公式アカウント - ユーザー情報取得手順(Web認証取得)
  • WeChat パブリックアカウントは、スキャンコードを実現し、WeChat ユーザー情報を取得します (Web ページ認証)
  • WeChatパブリックアカウントWebページの認証ログインとコードが使用されているソリューションの詳細な説明
  • WeChat 公式アカウント OAuth2.0 Web 認証問題の簡単な分析

<<:  MySQLに画像を保存する方法

>>:  nginx httpモジュールのデータ保存構造の概要

推薦する

Mysqlの同時パラメータ調整の詳細な説明

目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析

Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...

Vueはツリーテーブルを実装する

この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...

CSS3でシャトル星空のアニメーションを実現

結果: html <canvas id="スターフィールド"><...

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

MySQL のマスタースレーブレプリケーションと読み取り書き込み分離の原理と使用法の詳細な説明

この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...