前提条件
- Yahoo! JAPAN IDの取得
- Auth0アカウントの取得
- Auth0にアプリケーションが登録済
- 登録方法はAuth0の導入方法を参照
はじめに
ソーシャルログインとは、FacebookやTwitterのような普段から使用しているサービスのアカウントを利用してログインを行う仕組み。 サービスごとに必要な会員登録を省略することができ、IDとパスワードを新たに覚える必要もなくなるためユーザーの負担を減少できる。
実装するソーシャルログイン
- Yahoo! JAPAN ID
実装手順
- 1.Auth0のダッシュボードから「Authentication」の「Social Connections」を選択
- 2.画面右上の「Create Connection」を選択
- 3.連携可能なサービスの一覧が表示されるため、「Facebook」を選択
- 4.連携サービスの設定画面が表示されるが、変更は行わずに「Create」を選択
- 5.Auth0に登録してあるアプリケーションのConnectionsで「Facebook」が有効化されていることを確認
- 6.アプリケーションを起動し、ログイン画面に認証が追加されていることを確認
- 7.ソーシャルログインが正常に行えることを確認
Facebookの実装手順3で「Twitter」を選択することで、同様の手順で実装できる。
Yahoo! JAPAN ID
Yahoo! JAPAN IDはAuth0の連携可能サービスの一覧には含まれていないため、連携用の設定を作成する必要がある。 連携設定の注意点として、設定後に即時連携できるようになるわけではなく、1〜2時間程度待つ必要がある。(設定直後でもログイン画面に表示はされるが403エラーとなる)
Yahoo! JAPAN側の設定
- 1.Yahoo! JAPANのサービス一覧から「デベロッパーネットワーク」を選択
- 2.ページ中央部付近にある「アプリケーションの管理」を選択
- 3.アプリケーションの管理画面が表示されるため、「新しいアプリケーションの開発」を選択
- 4.設定画面が表示されるため、以下のように設定し、それ以外の必須入力欄を環境に合わせて入力してアプリケーションを作成
- ID連携利用有無 : ID連携を利用する
- 属性取得APIを利用しますか? : 属性取得APIを利用する
- アプリケーションの種類 : サーバーサイド(Yahoo! ID連携 v2)
- 属性取得APIで追加して取得する情報 : 姓名などの氏名を取得する メールアドレスを取得する
- 5.作成が完了すると「Client ID」、「シークレット」が表示されるため、控えておく
- 6.アプリケーション管理画面の一覧に作成したアプリケーションが表示されているため、「編集」を選択
- 7.コールバックURLを「https://{auth0テナントのドメイン名}/login/callback」に変更し、設定を更新
Auth0側の設定
- 1.Auth0のダッシュボードから「Authenticationメニュー」の「Social Connections」を選択
- 2.画面右上の「Create Connection」を選択
- 3.連携可能なサービスの一覧にYahoo! JAPAN IDは存在しないため、画面最下部にある「Create Custom」を選択
- 4.設定画面が表示されるため以下のように設定し、作成
- 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 adderss
- 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.sub,
email: profile.email,
});
});
}
- 5.Auth0に登録してあるアプリケーションのConnectionsで「Yahoo JAPAN」が有効化されていることを確認
- 6.アプリケーションを起動し、ログイン画面に認証が追加されていることを確認
- 7.ソーシャルログインが正常に行えることを確認
- 閲覧数 807
画像

















コメントを追加