WeChatOpenID連携の使い方

2022年4月8日 16:34

「Facebookでログイン」や「LINEでログイン」と言ったソーシャルログインを実装しているウェブサイトを良く見かけますが、WeChatでもソーシャルログインが利用可能です。また、WeChatのソーシャルログインを利用する事で外部のサイトやネイティブアプリでもWeChatユーザーのOpenIDやUnionIDを取得する事が出来るようになるので、外部リソースをWeChatエコシステムへ組み込む事が出来ます。

WeChatには2種類のソーシャルログインが存在する

WeChatエコシステムが提供するソーシャルログインは2種類あります。1つは我々が一般的に想像するソーシャルログインで、自社のサービスに対してログインしてもらう手段の一つとしてWeChat用のQRコードを表示して、それをWeChatアプリでスキャンさせる方法です。
もう一つはWeChatブラウザで開く事を前提としてWeChatユーザーだけに提供するサービスを外部に構築する場合です。
ここでは便宜的に前者を「WeChatソーシャルログイン」、後者を「WeChatOpenID連携」と呼びます。
この記事では「WeChatOpenID連携」の使い方を紹介します。
「WeChatソーシャルログイン」の使い方についてはもう一つの記事をご覧ください。

WeChatOpenID連携の概要

WeChatOpenID連携機能はWeChatブラウザでウェブページを開いた際にそのWeChatユーザーのユーザー情報をシームレスに連携する機能です。ユーザーがWeChatOpenID連携機能を実装したサイトをWeChatブラウザで開くと一瞬「ログインしています」という表示が出ますが、特に何かを入力したりタップする事なくそのままサイトへ遷移する事も出来ます。（ニックネームやプロフィール画像を取得したい場合を除く）
しかしユーザーが訪れたサイト側ではこのユーザーのOpenIDが取得可能となっています。
ちなみにユーザーがWeChatブラウザ以外でページを開こうとすると以下のようなエラーになります。

WeChatOpenID連携を利用する為の準備

WeChatOpenID連携を利用する為に必要な物はWeChat公式アカウントのみです。WeChatオープンプラットフォームのアカウントは必要ありません。
WeChatオフィシャルアカウントプラットフォームにログインをして以下の手順で設定すればすぐに使えるようになります。

①公式アカウントのAppIDとAppSecretを確認する

WeChatオフィシャルアカウントプラットフォーム上で公式アカウントのAppIDとAppSecretを確認します。詳しい手順はこちらの記事をご参照ください。

②授権ドメイン設定画面を開く

管理画面の左にある「公众号设置」を開き、「功能设置」のタブを開くと「网页授权域名(ウェブページ授権ドメイン)」という項目があるので、その項目の右にある「设置」をクリックして設定画面を開きます。

③認証用ファイルをダウンロードする

設定画面がポップアップするので、その画面から「MP_verify」で始まるファイル名の認証用ファイルをダウンロードします。

④認証用ファイルをサーバへ設置する

ダウンロードした認証用ファイルをそのままのファイル名で設定したいドメインのドキュメントルートへアップロードします。

⑤ドメイン名を記入して「保存」ボタンを押す

最後に「域名1」の欄に設定したドメインを記入して「保存」ボタンをおします。ここで「强制https校验」をONにするとチェックリクエストはhttpsだけで行われます。
※認証ファイルを設置したディレクトリ以下のサブディレクトリでもWeChatOpenID連携が使えます

例えば「wechat.example.com」というドメイン上でWeChatOpenID連携を利用したい場合は、以下のようなURLで認証用ファイルへアクセス出来るようにしておく必要があります。
（認証ファイル名が「MP_verify_xxxxxxxxxxx.txt」であった場合）

https://wechat.example.com/MP_verify_xxxxxxxxxxx.txt

「保存」ボタンを押すとWeChatシステムは確認用のリクエストをして来ます。認証用ファイルにアクセス出来なかったり、内容がダウンロードした認証用ファイルと同じでなかった場合は設定が失敗します。
設定が完了したら認証用ファイルは削除してもOKですが、ドメインを追加する場合などで再度設定画面を開いて「保存」を押すとその都度確認用のリクエストが飛んで来ますので、そのまま置いておいても良いでしょう。
ちなみに認証用ファイルの中身はファイル名の「MP_verify_」以降の文字列（「xxxxxxxxxxx」の部分）と同じテキストが1行入っているだけで、トークンやパスワードと言った外部へ漏れて困るようなデータは含まれていません。

WeChatOpenID連携の利用方法

WeChatOpenID連携の利用方法は以下の手順の通りです。

①APIへのリンクを生成する

ユーザーを以下のAPIへアクセスさせる為のリンクを生成します。

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

パラメータの意味は以下の通りです。

APPID
WeChatOpenID連携を利用したい公式アカウントのAppIDを指定します。
REDIRECT_URI
WeChatOpenID連携を利用するウェブページのURLをURLエンコードしたものを指定します。

②生成したリンクを設置する

このリンクはWeChatブラウザで開いてもらう必要があるので、公式アカウントのメニューや自動応答の文言に設定すると良いでしょう。

③チケットを受け取る

ユーザーがWeChatブラウザで手順①で生成したリンクへアクセスすると、そのユーザーはAPIによってREDIRECT_URIで指定したURLへリダイレクトされて来ます。その際にWeChatシステムは「code」という名前のGETパラメータを追加します。これがOpenIDを取得する為のチケットです。

④チケットを使ってOpenIDを取得する

手順③で送られて来たチケットを使って以下のAPIを呼び出します。このAPIは実はアクセストークンを取得する為のAPIです。しかしWeChatOpenID連携の仕組みで使っているスコープが「snsapi_base」である為、この手順で取得出来るアクセストークンには何の権限も付与されません。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

このAPIに渡すパラメータは以下の3つです。

APPID
公式アカウントのAppIDを指定します。
SECRET
公式アカウントののAppSecretを指定します。
CODE
リダイレクトされて来た際に付与されたに送られて来たチケット（code）をそのまま指定します。

設定したパラメータに間違いがなく、リクエストが正常に受理されるとWeChatシステムは以下のようなJSONデータを返して来ます。

{ 
  "access_token":"ACCESS_TOKEN", 
  "expires_in":7200, 
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID", 
  "scope":"SCOPE"
}

返って来るJSONデータの各要素の意味は以下の通りです。

access_token
WeChatエコシステムのAPIを利用する為のトークンです。と言ってもWeChatOpenID連携で得られるチケットには何の権限もないので、このアクセストークンには意味がありません。
expires_in
このトークンの有効期限（秒単位）です。通常は7200秒（2時間）です。この有効期限も気にする必要はありません。
refresh_token
このトークンの有効期限を延長したり新しい「access_token」を取得する際に使うトークンですが、用途の無いアクセストークンの有効期限を延長する事に意味はないので無視してOKです。
openid
WeChatOpenID連携のリンクを踏んだユーザーのOpenIDです。
scope
このトークンに許可された権限です。WeChatOpenID連携の流れでは「snsapi_base」という文字列だけが返されます。
この要素の内容を気にする必要はありません。

上記の通り、戻されるJSONデータで意味があるのはOpenIDのみです。このOpenIDは公式アカウントに対してユニークになる事が保証されているので、ユーザー識別やユーザーIDとして利用する事が可能です。
なお、WeChatOpenID連携で得られるアクセストークンではUnionIDは取得出来ない事に注意しましょう。もしWeChatOpenID連携とUnionIDを組み合わせて使いたい場合は、得られたOpenIDを使って別途公式アカウント用のAPI（/cgi-bin/user/info）を呼び出すか、後述するWeChatOpenID連携のスキームでニックネームとプロフィール画像を取得する方法をご覧ください。
ただし、いずれの方法も公式アカウントがWeChatオープンプラットフォームのアカウントと紐づいている事が必要です。

WeChatOpenID連携の用途

WeChatOpenID連携はWeChatブラウザで開いてもらう必要がある上にOpenIDしか知る事が出来ませんが、ユーザー操作が不要なのでWeChatアプリから遷移させる前提であればUXとしては優れています。
キャンペーンの応募サイトやアンケートサイトといった訪れたユーザーをユニークに判別したい用途に適しているでしょう。
ちなみにユニークと聞くとGAのUserIDに使いたくなりますが、中国大陸からはGoogle関連のサービスへのアクセスが出来ない場合が多く、アクセス出来てもレスポンスが異常に遅い事が多いです。ですので、中国大陸からアクセスされる可能性のあるサイトにGAのタグなどを設置すると、サイトのレスポンスに影響します。タイムアウトで表示出来なくなる事もあるので、絶対に設置しないようにしましょう。
ちなみに同じ理由でFacebookやTwitterのシェアボタンやいいねボタンも設置すると中国大陸からアクセスしづらいサイトになってしまいます。中国大陸からのアクセスを想定するサイトを構築する場合は注意しましょう。

フォロワー以外がアクセスして来た場合

実はWeChatOpenID連携ではその公式アカウントのフォロワー以外のOpenIDも取得出来てしまいます。これがWeChatシステムの仕様なのかバグなのかは分かりませんので今後取得出来なくなるかも知れませんが、少なくとも2022年4月現在は取得出来ています。
現実問題としてフォロワーでないユーザーにWeChatブラウザでリンクを踏ませるのは結構難しいですが、例えば公式アカウントのメニューにリンクを設置しておけば、フォロワーでなくともそのリンクをクリックする事が出来ます。（フォローしていなくても公式アカウントのメニューにあるリンクは公式アカウントTOP画面の「サービス」タブからアクセス出来るため）
フォローしていないのにOpenIDが存在しているのは少し奇妙に感じますが、私の推測では恐らくWeChatシステムでは公式アカウントをフォローした時にOpenIDを生成しているのではなく、公式アカウントのAppIDとユーザーの原始IDを基にしてハッシュ化したものをOpenIDとしていると思われます。
フォロワーでないユーザーのOpenIDを取得出来たところで利用出来る場面は限られますが、例えば過去にフォローせずにキャンペーンだけに参加したユーザーが後日他のきっかけでフォローしてくれたとすると、そのきっかけがキャンペーンとよりも効果があったと分析する事が出来たりするかも知れません。

ニックネームやプロフィール画像を取得する

WeChatOpenID連携のスキーム内で得られるアクセストークンではユーザーのニックネームやプロフィール画像を取得する事は出来ないと書きましたが、APIへのリンクを生成する際にscopeに「snsapi_base」ではなく「snsapi_userinfo」を指定すると、アクセストークンにユーザー情報（ニックネームとプロフィール画像）にアクセスする権限が追加されます。
具体的にはAPIへのリンクを以下の様に変更します。
（「scope=snsapi_base」を「scope=snsapi_userinfo」に変更）

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

ただし、このように変更したAPIリンクの場合、ユーザーが初回にアクセスした際に以下のような情報提供確認画面が表示されます。

ここでユーザーが「許可」をタップすれば、その後に送られて来るチケットで取得したアクセストークンにはユーザー情報へのアクセス権限が付与されているので、ユーザー情報を取得するAPI（/sns/userinfo）を利用する事が出来ます。また、この同意画面が出るのは初回のみで、ユーザーが一度許可するとそれ以降は表示されずに直接リダイレクト先へ遷移します。
ユーザー情報を取得するAPIの使い方はWeChatソーシャルログインの解説記事をご覧ください。

参考ドキュメント

【网页授权】
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

この記事が気に入ったらサポートをしてみませんか？