Auth0を使って構築したカスタムの認証基盤をシングルサインオンできるようにする

諏訪悠紀

2019.03.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Auth0でAuth0にSingle Sign Onする

とても簡単に認証サービスが作れるAuth0。Auth0ではオリジナルの認証基盤やソーシャルログイン、SAML認証の他、独自実装の認証サービスを用いることもできます。

今回は独自実装の認証サービスと繋がる認証基盤を構築し、さらにその認証基盤からSingle Sign Onできるようにしてみました。

事前準備

Auth0のアカウント登録は事前に済ませている前提で進みます。

Applicationの作成

Applicationを2つ作ります。

Default App : プライマリとなる認証プロバイダとして使います。
Mock App : 既存環境の認証プロバイダとして使います。今回はサンプルということでデータベース層をモックし、実際にどこかに繋ぐような処理は書きません。

詳細な作成手順は割愛しますが、いずれも「Single Page Web Application」として作ります。

Custom Databaseの作成

今回「Mock App」側の認証先は「Custom Database」を使います。Custom Databaseは認証基盤へのアクセスをJavaScript関数内に記述することで実現しますが、今回は繋ぎに行かず、引数を加工してそのままコールバックするようにして、認証しているように見せます。

function login(email, password, callback) {
  const username = 'MockA-' + email
  const profile = {
    user_id:   username,
    nickname:  username,
    name:      username,
    email:     email,
  };
  callback(null, profile);
}

作成したCustom Databaseは「Mock App」の「Connection」で繋ぎにいくように設定します。

Mock AppのSingle Sign Onを設定する

カスタムのSingle Sign OnはExtensionを使って実現します。

「New Connection」を選び、新しい接続先として設定します。

Client ID, Client Secret, Authorization URL, Token URLは「Mock A」の詳細から確認できるので設定していきます。

Fetch User Profile Scriptはユーザー情報を照会するAPIなどを叩くような処理を記述する箇所です。Auth0の場合は /userinfo というAPIがあるのでこれを使います。

function(access_token, ctx, callback) {
  request.get('https://dev-cw0xum-z.auth0.com/userinfo', {
    'headers': {
      'Authorization': 'Bearer ' + access_token,
      'User-Agent': 'Auth0'
    }
  }, function(e, r, b) {
    if (e) {
      return callback(e);
    }
    if (r.statusCode !== 200) {
      return callback(new Error('StatusCode:' + r.statusCode));
    }
    const userinfo = JSON.parse(b)
    callback(null, {
      'user_id': userinfo.sub,
      'nickname': userinfo.nickname,
      'name': userinfo.name,
      'email': userinfo.email
    });
  });
}

最後に「Apps」タブでSingle Sign Onを実行する元のApplicationを有効化します。Single Sing Onする側のApplicationを有効化すると、無限ループ的なUI遷移になるのでご注意を。

以上で設定は完了です。