はじめに
この記事はAuth0のCustom Social Connection Extensionを利用してYahoo! JAPANとAuth0を接続、Yahoo! IDでSingle Page Web Applicationにログインする手順をまとめています。Yahoo! IDの取得、およびAuth0の無料アカウントの取得とテナントの作成が完了していることが前提となっています。Auth0の無料アカウント取得がまだの方はこちらの記事を参照の上ご準備をお願いします。
検証環境
-
OS :
macOS Catalina 10.15.1 -
node :
10.15.3 -
npm :
6.12.0 -
Git :
2.23.0
手順
Yahoo! JAPAN側
Auth0からYahoo! JAPANにOAuth2.0で接続する際に必要となるアプリケーションを作成します。Chromeでデベロッパーネットワークにアクセスして"新しいアプリケーションを開発"を押します。
"アプリケーションの種類"で"サーバサイド"を選択、"アプリケーション名"に任意の名前を入力、ガイドラインで同意をチェックしてその他は全てデフォルトで画面下の"確認"ボタンを押します。
作成したアプリケーションを選択し、"コールバックURL"に "https://<auth0テナントのドメイン名>/login/callback" を入力、画面下の"更新"を押します。
Yahoo! JAPAN側でAuth0のコールバックエンドポイントへのアクセスを許可しています
画面上に記載されている"CLIENT ID"と"シークレットを"控えておきます。
Auth0側の設定で必要になります
Auth0側
Custom Extensionの設定
Auth0のダッシュボードにログイン、左ペインの"Extensions"をクリックして左上の"Custom Social Connections"をクリックし"INSTALL"を押します。
"Installed Extensions"タブから"Custom Social Connections"をクリック、右上の"NEW CONNECTION"をクリックします。
各パラメータを設定して画面下の"SAVE"を押します。
- Name : 任意
- Client ID : Yahoo! JAPAN側で作成したアプリケーションのClient ID
- Client Secret : Yahoo! JAPAN側で作成したアプリケーションのSecret
- Authorization URL : https://auth.login.yahoo.co.jp/yconnect/v2/authorization
- Token URL : https://auth.login.yahoo.co.jp/yconnect/v2/token
- Scope : openid profile email
- Custom Headers : ブランクのまま
- Fetch User Profile Script : 以下のコード
function(accessToken, ctx, cb) {
request.get('https://userinfo.yahooapis.jp/yconnect/v2/attribute', {
headers: {
'Authorization': 'Bearer ' + accessToken
}
}, function(e, r, b) {
if (e) return cb(e);
if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));
var profile = JSON.parse(b);
cb(null, {
user_id: profile.uid,
email: profile.email,
});
});
}
"Apps"タブをクリック、有効にするApplicationのフリップスイッチをオンにして画面したの"SAVE"を押します。
Single Page Web Applicationの登録
左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。
"Name"に任意の名前を入力、"Choose an application type"で"Simgle Page Web Applications"を選択して”CREATE”を押します。
"Settings"タブをクリックして"Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs"に"http://localhost:3000"を入力して画面下の"SAVE CHANGES"を押します。
Single Page Web Applicationの配備
ApplicationのGitHubリポジトリをローカルPCにクローンします。
$ git clone https://github.com/auth0-samples/auth0-react-samples.git
auth0-react-samples/01-Login/srcに移動します。
$ cd auth0-react-samples/01-Login/src
auth_config.json.exampleをコピーしてauth_config.jsonを作成します。
$ cp auth_config.json.example auth_config.json
auth_copnfig.jsonを編集します。"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。
{
"domain": "kiriko.auth0.com",
"clientId": "xxxx"
}
auth0-react-samples/01-Loginに移動します。
$ cd auth0-react-samples/01-Login
npm installを実行して必要なパッケージをインストールします。
$ npm install
npm startを実行してApplicationを起動します。
$ npm start
動作確認
Chromeで"http://localhost:3000"にアクセス、右上の"Login"を押します。
"LOG IN WITH <作成したCustom Connectionの名前>を押します。
Yahoo! IDでログインします。
Done!
おわりに
Auth0は業界標準のプロトコル(例/OAuth2.0, Open ID Connect)に幅広く対応しているため、Yahoo! JAPANをはじめOAuth2.0対応のAuthorizationサービスと簡単に接続することが可能です。ダッシュボードの"Connections"->"Social"に該当のSocial Providerが無い場合はこちらの記事をご参照の上Custom Social Extensionを利用して接続設定をお願いします。