ちょっと前にauth0のウェビナーに参加したんですが、その後放置しててすっかり内容を忘れたので、先日のうどんもくもく会に参加した時に改めてサンプルコードを動かして遊んでみました。
ユーザ作成とかは、終わってたのですっとばして、まずはauth0のトップページからログインします。
ログインすると、ダッシュボード画面に遷移するので、"Getting Started"メニューから
"Create Application"
"Regular web app"
と選んで、"CREATE"ボタンをクリックします。
次に、"What technology are you using for your project?"という質問が出てくるので、"node.js"を選ぶと
こんな感じでサンプルコードをダウンロードできる画面が表示されます。
この画面で下にスクロールしていくか、"I want to integrate with my app"と書かれた下の各リンクを辿っていくと 既存のwebアプリにauth0を使った認証を組込む方法が書かれてるんですが、とりあえず今はDownload sampleを選んでサンプルコードを取ってきます。
ダウンロード画面で指示されている通りに、auth0のapplication setting画面で、"Allowed Callback URLs"にhttp://localhost:3000/callbackを
"Allowed Logout URLs"にhttp://localhost:3000を設定します。
ここでうっかり、両方にhttp://localhost:3000と設定してしまったために、私は小一時間ほどはまりましたorz
あと、画面のほとんど一番下にある"SAVE CHANGES"ボタンを押さないと設定が反映されないので気をつけましょう。 こっちも最初気付かないでsaveボタンを探しまわってましたo...rz
なお、application setting画面へは、ちょっと上へスクロールして"Settings"からリンクを辿って移動することもできるし、 ダウンロード画面の説明文の中にもリンクが貼られてるので、こちらからでも行けます。
もし、うっかりダウンロード画面を閉じちゃったって時は、ダッシュボードの"Applications"メニューから作成したアプリを選ぶと設定画面に行けて、 その画面の上部にある"Quick Start"をクリックするとサンプルをダウンロードする画面に戻れます。
ダウンロードして展開したディレクトリで、npm installしてからnpm startをするとウェブサーバが立ちあがるので、ブラウザを開いて、http://localhost:3000にアクセスしてください。
次のような画面が表示されたら成功です。
この画面の"Log In"という文字列のリンク先が、http://localhost:3000/loginになっていて、クリックするとauth0の認証画面へとリダイレクトされます。
下の方に表示されている"サインアップ"のリンクをクリックすると、新規ユーザ登録画面に遷移します。 ログイン画面とほとんど同じ作りで区別し難いのが残念なところですが、その辺は後で頑張ってカスタマイズしましょう。
このUI、ありがたいことにパスワードの入力欄に移ると、パスワードの要件が下ににょろっと表示されます。
実際にパスワードを入力していくと、要件を満たす毎にこんな感じでチェックがついていって有効なパスワードかどうかがすぐに分かるようになっています。
デフォルトではgoogleアカウントとの連携が有効になっているので、googleのログイン情報を使ってサインアップすることもできます。 ここでサインアップしたユーザの一覧は、auth0のダッシュボードから"Users & Roles" -> "Users" とたどると確認することができます。
無事にアカウントを作成してログインすると、webアプリが受け取ったユーザ情報をまるっと表示してくれるプロフィール画面に遷移するので、 ここで何の情報が見れるのかを確認することができます。が、あまりに消すところが多すぎるんでスクショは貼りませんw
とりあえず第一弾としてはここまでにしますが、単にログインするだけでもまだ色々と設定できるところはあるようなので、もうしばらくこれで遊んでみようと思います。
おまけ
callback URLの設定を間違った状態で認証画面に遷移すると、次のようなエラー画面が表示されます。
サンプルアプリをコピペして使ってたら、この機能までうっかり組み込みそうだなぁw
