15
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Auth0のApplication Login URIはちゃんと設定しようという話

Posted at

この記事を書いていたらAuth0のAdvent Calendarがあることに気づいたので、せっかくの機会と思い参加してみました。

はじめに

Auth0を触るようになってから、WEBサイトやWEBサービスのログイン画面を見て
「あ、Auth0だ」と思うことがでてきました。
これ、Auth0に限らずIDaaSを使っている人あるあるネタらしいです。

そんな中、つい最近もAuth0が使われているWebサイトを見つけたんですが、ログイン画面でエラーが発生してしまいました。
エラーが発生した状況から推察するに、Auth0のApplication Login URIが設定されていなさそう…。

実はApplication Login URIを設定せずにAuth0を利用している人が他にも結構いるんでは?
という気がしてきたので、設定しないとどうなるかを紹介しようと思います。

※この記事の内容は全部Auth0のドキュメントに書いてある内容なので本当はこっち見た方がいいです。
Tenant's and Application’s Default Login Route

Application Login URIとは?

Auth0のDashBoadから操作できるアプリケーション設定のひとつです。
DashBoadのApplications->登録済みの任意のアプリを選択->Settings の中にある
「Application Login URI」という項目がそれです。
スクリーンショット 2019-12-10 19.06.23.png

「Application Login URI」にはhttpsから始まるURIをひとつだけ設定することができます。
ここには、アプリケーションのログインの起点となるエンドポイントを設定します。
Auth0を利用しているWEBサイトのログインボタンのリンク先のURLのことだと思ってもらえれば大抵の場合OKだと思います。

ここに設定したURLがそのアプリケーションのデフォルトのログインパスになります。

設定しないとどうなる?

Auth0のログイン画面に直接遷移するとエラーが表示される

Auth0のUniversal Login画面を利用している場合、WEBサイトからログイン処理を実行すると、いったんAuth0のログイン画面にリダイレクトされ、認証が完了すると元のWEBサイトに戻ってくるようなフローを描くかと思います。

このリダイレクト先のログイン画面をブックマークに登録し、その後ブックマークから直接ログイン画面にやってきてしまうとエラー画面が表示されてしまうことがあります。
Web 1920 – 2.png
Auth0を利用している人にはお馴染みのエラー画面。

エラーになる理由

Auth0のログイン画面を開いてブラウザのアドレスバーを見ると、クエリパラメータとしてstateパラメータが存在していることがわかります。
https://{ドメイン}/login?state=g6Fo2SBpYV9wQ1...

Web 1920 – 1.png

Auth0のドキュメントによると、このstateパラメータは一連の認証処理のトランザクションの状態を追跡するための値であり、Auth0内部のデータベースに保存されているとのことです。
また、このstateの値は認証処理が完了するか、一定時間経過後にAuth0内部のデータベースから削除されます。

こういった背景から、ブックマークから直接遷移するなどして、すでにAuth0内部データベースから削除されているstateを使ったログイン画面へのアクセスが発生した場合、Auth0は認証処理を継続することができなくなってしまいます。

このとき、「Application Login URI」を正しく設定しておくと、エラーとならずに設定したログインURLにリダイレクトされるので、改めて認証処理をスタートすることができるので、忘れずにちゃんと設定しましょう。

Application Login URIを設定するその他のメリット

エラー回避以外にも、Application Login URIを設定するメリットがあります。
New Universal Login画面のほうを利用している場合限定ですが以下の2つのメリットがあります。
どちらもUXを高める良い機能なので、New Universal Login画面を利用している人は設定するべきだと思います。

パスワードリセット再設定完了後の画面にログイン画面に戻るためのリンクが表示されるようになる

Auth0のログイン画面からパスワードリセットを行うと、登録してあるメールアドレスにパスワード変更画面へのリンクが記載されたメールが飛びます。
このリンク先でパスワードを変更した後に表示される完了画面にアプリに戻るためのリンクが表示されるようになります。
リンク先はApplication Login URIに設定したURLです。

Web 1920 – 3.png

メール確認完了後の画面にログイン画面に戻るためのリンクが表示されるようになる

「Force email verification」等のRulesを設定し、サインアップ時にメールアドレスの有効性確認のメールを送信している場合、メールに記載されているリンク先の画面にアプリに戻るためのリンクが表示されるようになります。
こちらも同様にリンク先はApplication Login URIに設定したURLになります。

Web 1920 – 4.png

おわりに

チュートリアルとかだと飛ばされがちな設定なので、以外と設定を忘れている人がいるかもしれません。こういったところも忘れずに設定するようにしたいですね。

15
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?