Alipay を使用してソーシャルログインを設定する (Web)
Web アプリ向けの公式 Logto Alipay ソーシャルサインインコネクターです。
ヒント:
このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。
はじめに
Alipay Web コネクターは、デスクトップ Web アプリケーション向けに設計されています。Alipay の OAuth 2.0 認証 (Authentication) ワークフローを活用し、Alipay ユーザーが面倒な登録プロセスを経ることなく、公開されている Alipay ユーザープロファイルを使って他のアプリにサインインできるようにします。
Alipay 開発者アカウントの登録
Alipay 開発者アカウントを登録 してください（まだお持ちでない場合）。
Alipay アプリの作成と設定
- Alipay コンソール に、先ほど登録したアカウントでサインインします。
- 「マイアプリケーション」(我的应用) パネルの「Web & モバイルアプリ」(网页&移动应用) タブに移動します。
- 「アプリを作成」(立即创建) ボタンをクリックして、アプリケーションの設定を開始します。
- 「アプリケーション名」(应用名称) に命名規則に従って名前を入力し、「アプリケーションアイコン」(应用图标) をアップロードします。「アプリタイプ」(应用类型) には必ず「Web アプリケーション」(网页应用) を選択してください。
- アプリケーションの作成が完了したら、概要ページに移動します。ここで「機能を追加」(添加能力) をクリックし、「サードパーティアプリ認可」(第三方应用授权)、「会員情報の取得」(获取会员信息)、「App Alipay ログイン」(App 支付宝登录) を追加して、Alipay サインインを有効にします。
- Alipay カスタマーセンター にアクセスし、Alipay 開発者アカウントでサインインします。トップバーの「アカウントセンター」(账号中心) をクリックし、サイドバー下部にある「APPID バインディング」(APPID 绑定) に進みます。「バインディングを追加」(添加绑定) をクリックし、手順 4 で作成した Web アプリケーションの APPID を入力します。
- 「App Alipay ログイン」の「署名」ボタンをクリックし、ガイドに従って署名プロセスを完了します。この手順が完了すると、手順 5 で追加した機能が有効になります。
- Alipay オープンプラットフォームコンソールページに戻り、「開発情報」(开发信息) セクションの「インターフェース署名方法」(接口加签方式（密钥/证书）) を見つけます。「設定」(设置) ボタンをクリックすると、署名方法の設定ページに移動します。「公開鍵」(公钥) が推奨される署名モードです。生成した公開鍵ファイルの内容をテキスト入力欄に入力してください。
- Alipay コンソールページ下部の「設定」(设置) ボタンをクリックして「認可リダイレクト URI」(授权回调地址) を設定します。
${your_logto_origin}/callback/${connector_id}が Logto コアで使用されるデフォルトのリダイレクト URI です。connector_idは Logto 管理コンソールのコネクター詳細ページのトップバーで確認できます。 - すべての手順が完了したら、Alipay コンソールページ右上の「審査提出」(提交审核) をクリックします。審査が承認されれば、スムーズな Alipay サインインフローを利用できます。
注記:
ローカルマシンで openssl を使ってキーペアを生成するには、以下のコードスニペットをターミナルで実行してください。
openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem
Alipay アプリ設定サイトで公開鍵を入力する際は、public.pem のヘッダーとフッターを削除し、すべての改行文字を削除して、残りの内容を「公開鍵」入力欄に貼り付けてください。
Logto Alipay Web コネクターの設定
- Alipay コンソールワークスペース の「マイアプリケーション」(我的应用) パネルで「Web & モバイルアプリ」(网页&移动应用) タブをクリックすると、すべてのアプリケーションの APPID を確認できます。
- 前述の手順 7 で、秘密鍵と公開鍵を含むキーペアをすでに生成しています。
- Logto コネクター設定を入力します：
appIdフィールドには、手順 1 で取得した APPID を入力します。privateKeyフィールドには、手順 2 で生成した秘密鍵ファイルの内容を入力します。秘密鍵ファイル内のすべての改行文字を '\n' に置き換え、ヘッダーとフッターは削除しないでください。signTypeフィールドには、手順 7 の「公開鍵」署名モードに従い 'RSA2' を入力します。charsetフィールドには 'gbk' または 'utf8' を入力します。このフィールドは省略可能で、デフォルト値は 'utf8' です。scopeフィールドには 'auth_base' または 'auth_user' を入力します。このフィールドも省略可能で、デフォルト値は 'auth_user' です。異なる値の 違い を確認できます。
設定タイプ
| Name | Type | Enum values |
|---|---|---|
| appId | string | N/A |
| privateKey | string | N/A |
| signType | enum string | 'RSA' / 'RSA2' |
| charset | enum string (OPTIONAL) | 'gbk' / 'utf8' / undefined |
| scope | enum string (OPTIONAL) | 'auth_user' / 'auth_base' |
Alipay Web コネクターのテスト
以上です。サインアップ・サインインでソーシャルコネクターを有効化する のを忘れないでください。
Alipay Web コネクターが有効化されると、Web アプリをビルドして動作を確認できます。
参考資料
Alipay ドキュメント - アクセス準備 - アプリの作成方法
Alipay ドキュメント - Web & モバイルアプリ - アプリの作成