Auth0でソーシャルログインの実装

Tweet

yoshino が 2023年2月10日 - 13:25 に投稿

前提条件

Yahoo! JAPAN IDの取得
Auth0アカウントの取得
Auth0にアプリケーションが登録済
- 登録方法はAuth0の導入方法を参照

はじめに

ソーシャルログインとは、FacebookやTwitterのような普段から使用しているサービスのアカウントを利用してログインを行う仕組み。サービスごとに必要な会員登録を省略することができ、IDとパスワードを新たに覚える必要もなくなるためユーザーの負担を減少できる。

実装するソーシャルログイン

Facebook
Twitter
Yahoo! JAPAN ID

実装手順

Facebook

1.Auth0のダッシュボードから「Authentication」の「Social Connections」を選択
2.画面右上の「Create Connection」を選択

3.連携可能なサービスの一覧が表示されるため、「Facebook」を選択

4.連携サービスの設定画面が表示されるが、変更は行わずに「Create」を選択

5.Auth0に登録してあるアプリケーションのConnectionsで「Facebook」が有効化されていることを確認

6.アプリケーションを起動し、ログイン画面に認証が追加されていることを確認

7.ソーシャルログインが正常に行えることを確認

Twitter

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,
    });
  });
}