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

序文

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

作業開始前の準備

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

WeChat 認証には時間制限があります。一定期間内に一度認証されると、再度クリックして確認する必要はありません。 WeChat をアンインストールして再インストールする場合でも、認証を再確認する必要があります。
初めて承認を確認する場合でも、承認後でも、WeChat サーバーを使用して、バックエンドインターフェイスコールバックへのコールバックを承認できます。
WeChat 認証コールバック後、コードと状態パラメータが返されます。バックエンドはコードを通じて accessToken を取得し、accessToken を通じてユーザー情報を取得できます。
バックエンドがサーバーコールバックを受信した後、フロントエンドにコールバックするときに 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を応援していただければ幸いです。

以下もご興味があるかもしれません: