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

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遷移になるのでご注意を。

以上で設定は完了です。

Vueサンプルアプリケーションで試す

動かしてみましょう。

「Default App」側の設定の「Quick Start」より「Vue」を選び、ソースコードをダウンロードします。Zipファイルを解凍したらルートディレクトリで以下を実行します。

$ yarn
$ yarn serve

https://localhost:3000 で立ち上がります。

右上にある「Login」を選ぶとログイン画面に遷移し「LOG IN WITH MOCK-A」ボタンが表示されます。これを選びます。

こちらはMock側のログイン画面です。適当にメールアドレスとパスワードを入力します。

無事に「Mock App」のSingle Sign On経由で「Default App」にログインできました。

柔軟に簡単に認証サービスを作れます!

柔軟な繋ぎ込みができる上に、設定なども直感的なので簡単に様々な振る舞いをする認証サービスを構築できます。是非とも使っていきましょう!

Auth0についてのお問い合わせはこちら

Auth0にご興味がありましたら、ぜひクラスメソッドへお問い合わせください!

お問い合わせはこちら