Alipay を使用してソーシャルログインを設定する (Web)

Web アプリでの Alipay ソーシャルサインイン用の公式 Logto コネクター。

ヒント:

このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。

はじめに

Alipay Web コネクターはデスクトップ Web アプリケーション向けに設計されています。Alipay の OAuth 2.0 認証 (Authentication) ワークフローを活用し、Alipay ユーザーが面倒な登録プロセスを経ずに、公開された Alipay ユーザープロファイルを使用して他のアプリにサインインできるようにします。

Alipay 開発者アカウントを登録する

Alipay 開発者アカウントを登録 します。まだアカウントをお持ちでない場合は登録してください。

Alipay アプリを作成して設定する

1. Alipay コンソール に、登録したアカウントでサインインします。
2. 「マイアプリケーション」(我的应用) パネルの「Web & Mobile Apps」(网页&移动应用) タブに移動します。
3. 「アプリを作成」(立即创建) ボタンをクリックして、アプリケーションの設定を開始します。
4. 「アプリケーション名」(应用名称) にアプリケーションの名前を命名規則に従って入力し、「アプリケーションアイコン」(应用图标) をアップロードします。「アプリタイプ」(应用类型) として「Web アプリケーション」(网页应用) を選択してください。
5. アプリケーションの作成が完了したら、概要ページに移動し、「能力を追加」(添加能力) をクリックして、「サードパーティアプリケーション認可」(第三方应用授权)、「会員情報の取得」(获取会员信息)、「アプリ Alipay ログイン」(App 支付宝登录) を追加し、Alipay サインインを有効にします。
6. Alipay カスタマーセンター に移動し、Alipay 開発者アカウントでサインインします。トップバーの「アカウントセンター」(账号中心) をクリックし、サイドバーの下部にある「APPID バインディング」(APPID 绑定) に移動します。ステップ 4 で作成した Web アプリケーションの APPID を入力して「バインディングを追加」(添加绑定) します。
7. 「アプリ Alipay ログイン」の「サイン」ボタンをクリックし、ガイドに従ってサインプロセスを完了します。このステップを完了すると、ステップ 5 で追加した能力が有効になります。
8. Alipay オープンプラットフォームコンソールページに戻り、「開発情報」(开发信息) セクションの「インターフェースサイン方式（密钥/证书）」(接口加签方式（密钥/证书）) を見つけます。「設定」(设置) ボタンをクリックすると、サイン方式を設定するページに移動します。「公開鍵」(公钥) が推奨されるサインモードであり、生成した公開鍵ファイルの内容をテキスト入力ボックスに入力します。
9. Alipay コンソールページの下部にある「設定」(设置) ボタンをクリックして「認可リダイレクト URI」(授权回调地址) を設定します。${your_logto_origin}/callback/${connector_id} は Logto コアで使用されるデフォルトのリダイレクト URI です。connector_id は Logto 管理コンソールのコネクター詳細ページのトップバーで確認できます。
10. これらのステップをすべて完了したら、Alipay コンソールページの右上隅に戻り、「レビューのために提出」(提交审核) をクリックします。レビューが承認されると、スムーズな Alipay サインインフローを利用できます。

注記:

ローカルマシンで openssl を使用してキーペアを生成するには、ターミナルで次のコードスニペットを実行します。

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem

Alipay アプリ設定ウェブサイトで公開鍵を入力する際には、public.pem のヘッダーとフッターを削除し、すべての改行文字を削除して、残りの内容を「公開鍵」(public key) のテキスト入力ボックスに貼り付ける必要があります。

Logto Alipay Web コネクター設定を設定する

1. Alipay コンソールワークスペース の「マイアプリケーション」(我的应用) パネルに移動し、「Web & Mobile Apps」(网页&移动应用) タブをクリックすると、すべてのアプリケーションの APPID を確認できます。
2. 前の部分のステップ 7 で、プライベートキーと公開鍵を含むキーペアを既に生成しています。
3. Logto コネクター設定を入力します：
   • ステップ 1 で取得した APPID を appId フィールドに入力します。
   • ステップ 2 で言及したプライベートキーファイルの内容を privateKey フィールドに入力します。プライベートキーファイルのヘッダーとフッターを削除せずに、すべての改行文字を '\n' に置き換えることを確認してください。
   • 「Alipay アプリの作成と設定」のステップ 7 で選択した Public key サインモードに基づいて、signType フィールドに 'RSA2' を入力します。
   • charset フィールドには 'gbk' または 'utf8' を入力します。このフィールドはオプションであり、空白のままにしておくこともできます。デフォルト値は 'utf8' に設定されています。
   • scope フィールドには 'auth_base' または 'auth_user' を入力します。このフィールドはオプションであり、空白のままにしておくこともできます。デフォルト値は 'auth_user' に設定されています。異なる値の 違い を確認できます。

設定タイプ

名前	タイプ	列挙値
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 & Mobile Apps - アプリの作成