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. アプリケーションの作成が完了したら、概要ページに移動し、「能力を追加」(添加能力) をクリックして、「サードパーティアプリケーション認可」(第三方应用授权)、「メンバー情報の取得」(获取会员信息)、「App Alipay ログイン」(App 支付宝登录) を追加し、Alipay サインインを有効にします。
6. Alipay カスタマーセンター に移動し、Alipay 開発者アカウントでサインインします。トップバーの「アカウントセンター」(账号中心) をクリックし、サイドバーの下部にある「APPID バインディング」(APPID 绑定) に移動します。ステップ 4 で作成した Web アプリケーションの APPID を入力して「バインディングを追加」(添加绑定) します。
7. 「App 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 のヘッダーとフッターを削除し、すべての改行文字を削除して、残りの内容を「公開鍵」用のテキスト入力ボックスに貼り付ける必要があります。

Logto Alipay Web コネクター設定をセットアップする

1. Alipay コンソールワークスペース の「マイアプリケーション」(我的应用) パネルに移動し、「Web & Mobile Apps」(网页&移动应用) タブをクリックすると、すべてのアプリケーションの APPID を見つけることができます。
2. 前の部分のステップ 7 で、秘密鍵と公開鍵を含む鍵ペアをすでに生成しています。
3. Logto コネクター設定を入力します：
   • ステップ 1 で取得した APPID を appId フィールドに入力します。
   • ステップ 2 で言及した秘密鍵ファイルの内容を privateKey フィールドに入力します。改行文字をすべて '\n' に置き換え、秘密鍵ファイルのヘッダーとフッターを削除しないようにしてください。
   • ステップ 7 の「Alipay アプリの作成と設定」で選択した 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 - アプリの作成