IDaaSとして有名な認証サービス「Auth0」を触ってみました。その過程のメモ書きです。
スムーズに行けば５分くらい(?)でアプリのファーストコールができそうです。
以下、手順です。
- Auth0 のアカウントを作成する
- ダッシュボードの情報を確認する
- ダッシュボードからApplicationを登録
- サンプルアプリをダウンロード
- npmコマンドで関連ファイルをダウンロード
- server.js の configを書き換え
- 起動
前提条件・環境は以下としました。
- node.js + Express でローカル起動
- Macを利用
- Auth0が配布しているサンプルアプリを利用
Auth0のアカウントを作成する
Auth0のトップページにアクセスして「Sign up」をクリックします。
https://auth0.com/jp
アカウント作成方法を選ぶ。今回はGoogle アカウントを利用しました。
アカウント作成後、ダッシュボードに遷移します。
ダッシュボードからアプリケーションを作成する
ダッシュボード→Applications→Applications→Create Application を選択して、新しいアプリを作成。「Regular Web Applicationsを選択します。
作成が完了すると、アプリ一覧に新しいアプリが追加されます。
このタイミングで、作成したアプリケーションの詳細画面からSettingsタブを開き、Clinet ID、Domainなどの値を確認します。後ほど設定の際に必要になります。
サンプルアプリをダウンロードする
Applicationのタブ「Quick Start」からサンプルアプリをダウンロードします。「QuickStart」タブ→「Explore Sample App」をクリックします。
「SAVE AND DOWNLOAD APP」をクリックしてダウンロードします。
もしくは、GitHub
https://github.com/auth0-samples/auth0-express-webapp-sample
から、「01-login」をダウンロードします。
ダウンロード後、起動するディレクトリに、展開したサンプルアプリを配置します。こんな感じになるはず。
├── package-lock.json
├── package.json
├── routes
│ └── index.js
├── server.js
└── views
├── README.md
├── error.ejs
├── index.ejs
├── package-lock.json
├── package.json
├── partials
│ ├── footer.ejs
│ └── header.ejs
├── profile.ejs
├── routes
│ └── index.js
└── server.js
配置が終わったら、以下のコマンドで必要なファイルをダウンロードします。
npm install
次に、server.js の「const config」を以下のように書き換えます。
const config = {
authRequired: false,
auth0Logout: true,
baseURL: 'http://localhost:3000',
clientID: 'サンプルアプリのClient IDをコピペ',
issuerBaseURL: 'サンプルアプリのDomainをhttpsから始まる書式でコピペ',
secret: 'ランダムな文字列、なんでも良い’'
};
ポイントは「baseURL」「clientID」「issuerBaseURL」の3点。
baseURLは、アプリを起動した際のURL。今回はexpressを利用したローカルアプリとして利用するため、localhostを利用。
cientIDは、先ほどダッシュボードで確認したClient IDの値をそのまま利用します。
issuerBaseURLは、アプリで設定されたDomainの値となります。https:// をつけ、URLの書式で設定する。
設定変更が完了したら、保存。
設定がしたら、
npm start
と打ち込むことで、サンプルアプリが起動します。
「Login」をクリックすると、認証画面が表示されます。
以下は、Googleでサインインしたところ。View Profileをクリックすると、Googleから取得したユーザー情報が表示されます。
以上で、サンプルアプリのファーストコールが完了しました。お疲れ様でした！