WeChat公式アカウントでopenidを取得する方法

先日、他の方のWeChat公式アカウント作成をお手伝いさせていただいたので、その際に発生した問題点とその解決方法を中心に、その過程を数回に分けて投稿していきたいと思います。
最初に遭遇したポイント、つまり WeChat 公式アカウントの openid を取得する方法を見てみましょう。これについては WeChat の公式ドキュメントで説明されています。
次のように進めます。

1. Webページ認可コールバックドメイン名に関する説明

1. WeChat公式アカウントがユーザーのWebページ認可を要求する前に、開発者はWeChat公式Webサイトの「設定と開発」-「機能設定」-「Webページ認可ドメイン名」の設定オプションで認可コールバックドメイン名を変更する必要があります。公式プラットフォーム。ここでは URL ではなくドメイン名 (文字列) が入力されるため、http:// などのプロトコルヘッダーを追加しないでください。 2.
認可コールバックのドメイン名構成仕様は完全なドメイン名です。たとえば、Web ページの認証が必要なドメイン名は www.qq.com、構成後のページは http://www.qq.com/music.html および http://www.qq.com/login です。このドメイン名の html は OAuth2.0 認証を行うことができます。ただし、http://pay.qq.com、http://music.qq.com、http://qq.com は OAuth2.0 認証を実行できません。
3. 公式アカウントのログインがサードパーティの開発者に管理許可されている場合は、何も設定する必要はなく、サードパーティが公式アカウントを置き換えて Web ページの承認を実現できます。

2. Webページ認可の2つの範囲の違いについての説明

1. snsapi_base をスコープとして開始された Web ページの承認は、ページに入るユーザーの openid を取得するために使用され、サイレントに承認され、自動的にコールバックページにジャンプします。ユーザーが認識するのは、コールバックページ (多くの場合ビジネスページ) に直接入ることです
2.スコープとして snsapi_userinfoで開始された Web ページの承認は、ユーザーの基本情報を取得するために使用されます。ただし、この種の認可にはユーザーの手動による同意が必要であり、ユーザーは同意しているため、認可後は特に意識することなくユーザーの基本情報を取得できる。
3. ユーザー管理インターフェースの「ユーザー基本情報取得インターフェース」は、ユーザーと公式アカウントがメッセージやり取りを行ったり、イベントプッシュをフォローしたりした後、ユーザーのOpenIDに基づいてユーザーの基本情報を取得します。他の WeChat インターフェイスを含むこのインターフェイスでは、ユーザー (つまり、openid) が公式アカウントを正常に呼び出す前に、そのアカウントをフォローする必要があります。

3. 開発ガイド

Web ページの認証プロセスは 4 つのステップに分かれています。

1. 認証ページにアクセスして認証に同意し、コードを取得するようにユーザーを誘導します;
2.コードを Web ページ認証 access_token (基本サポートの access_token とは異なります) に交換します;
3. 必要に応じて、開発者は更新できます有効期限を回避するための Web ページ認証 access_token;
4.合格 Web ページは、基本的なユーザー情報を取得するための access_token と openid を認証します(UnionID メカニズムをサポート)。

ステップ 1: ユーザーはコードを承認して取得することに同意します。

WeChat パブリックアカウントに承認スコープ (scope パラメーター) が設定されていることを前提として (認証されたサービスアカウントには、デフォルトでスコープパラメーターに snsapi_base および snsapi_userinfo 権限が設定されています)、フォロワーに次のページを開くように誘導します。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

toAuthorize() {
    
    
    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7f02bc77e643ad90&redirect_uri=https://www.yihaohealth.cn/test4.html&response_type=code&scope=snsapi_base&state=123#wechat_redirect'           
},

パラメータの説明:

パラメータ	それは必要ですか	説明する
アプリケーション	はい	公式アカウントの一意の識別子
リダイレクト_uri	はい	承認後にリダイレクトされるコールバックリンクの URL。urlEncode を使用してリンクを処理してください。
応答タイプ	はい	戻り値のタイプ、コードを入力してください
範囲	はい	アプリケーション認可スコープ、snsapi_base (認可ページをポップアップせず、直接ジャンプし、ユーザーの openid のみを取得できます)、snsapi_userinfo (認可ページをポップアップし、openid を通じてニックネーム、性別、場所を取得できます。また、たとえあなたが注意していなくても、ユーザーが許可した限り情報を取得することもできます）
州	いいえ	state パラメータはリダイレクト後に追加され、開発者は a-zA-Z0-9 のパラメータ値を最大 128 バイトで入力できます。
#wechat_リダイレクト	はい	直接開く場合でも、ページ 302 リダイレクトを行う場合でも、このパラメータを含める必要があります。
力ポップアップ	いいえ	この認可にはユーザーのポップアップ確認が必須です。デフォルトは false です。特別なシナリオでユーザーがサイレント認可ロジックに到達した場合、このパラメータは有効になりませんので注意してください。

ユーザーが認可に同意した後、
ユーザーが認可に同意すると、ページはredirect_uri/?code=CODE&state=STATEにジャンプします。

コードの説明:
コードは access_token と引き換えのチケットとして使用されます。コードはユーザーが認証するたびに異なります。コードは 1 回のみ使用でき、使用されない場合は 5 分後に自動的に期限切れになります。

ステップ 2: Web ページ認証 access_token のコードを交換する

まず、ここでコードを通じて交換されるのは特別な Web ページ認証 access_token であり、基本サポートの access_token (access_token は他のインターフェイスを呼び出すために使用されます) とは異なることに注意してください。公式アカウントは、以下のインターフェースを通じて Web ページ認可 access_token を取得できます。Web ページ認可のスコープが snsapi_base の場合、このステップで Web ページ認可 access_token が取得され、openid も取得され、snsapi_base スタイルの Web ページ認可プロセスはここで終了します。

特に注意してください: 公式アカウントのシークレットと取得した access_token は非常に高いセキュリティレベルを持つため、サーバー上にのみ保存する必要があり、クライアントに渡すことはできません。access_token の更新や access_token を介したユーザー情報の取得などの後続のステップもサーバーから開始する必要があります。

リクエストメソッド

コードを取得したら、次のリンクをリクエストして access_token を取得します:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

パラメータの説明:

パラメータ	それは必要ですか	説明する
アプリケーション	はい	公式アカウントの一意の識別子
秘密	はい	公式アカウントのアプリシークレット
コード	はい	最初のステップで取得したコードパラメータを入力します
許可の種類	はい	authorization_code として入力します

返品指示

正しい場合に返される JSON データパケットは次のとおりです。

{
    
    
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE",
  "is_snapshotuser": 1,
  "unionid": "UNIONID"
}

この方法で、openid を取得でき、openid を取得した後、WeChat 支払いなどのフォローアップ操作を実行できます。