はじめに

この記事は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を利用して接続設定をお願いします。

Auth0のCustom Social Connectionを利用してYahoo! JAPANと接続する