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モジュールのデータ保存構造の概要

推薦する

SQL文のANDとORの実行順序で発生する問題

質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...

Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築

IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...

Linux で実行可能ファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される場合の解決策

最近、Linux オペレーティング システムを使用して実行可能ファイルを実行していたところ、「そのよ...

MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]

テーブル パーティショニングは、データベース パーティショニングとは異なります。では、テーブル パー...

DockerToolBox ファイルマウント実装コード

docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

JavaScript での && および || 演算子の使用例

目次序文&& 演算子|| 演算子|| 演算子の簡単なデモ章の目的ケース演習(json...

MySQL 5.7.20 Green Edition のインストールの詳細なグラフィックチュートリアル

まず、MySQL とは何かを理解しましょう。 MySQL は、スウェーデンの会社 MySQL AB ...

セマンティック HTML 構造の利点は何ですか?

1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...

ウェブサイト構築経験概要

<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...

Vue3.0 は虫眼鏡効果のケーススタディを実装します

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

Docker-compose を使用して ELK クラスターを構築する方法

すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...

CentOS 7 で MySQL 5.7 をインストールして設定する

この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

CocosCreator でレイヤー管理に常駐ノードを使用する方法

CocosCreator バージョン: 2.3.4ほとんどのゲームにはレイヤー管理機能があり、例えば...