0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Auth0のFormsを使ってメールアドレス変更機能を実装する

Posted at

Auth0ではユーザーがセルフサービスでアカウント管理を行うための機能(画面)が提供されていない。たいていのアプリケーションではこの機能は必須となるため、Auth0の外部に自前で実装することになるが、これを最近リリースされたFormsを使って実現できないか検討した。

なお、Formsの典型的なユースケースとしては同意取得や追加属性収集が挙げられており、アカウント管理機能の実装に利用することは、イレギュラーなケースにあたると考えられる。今回の検証はあくまで技術的な実現性(課題の洗い出し)を目的としている。

プロトタイプ実装

Auth0 Deploy CLIでエクスポートしたテナント設定をauth0-forms-change-emailにプッシュしている。

構成要素

  • Forms

    • Dashboard

      現在のメールアドレスの表示とメールアドレス変更画面へのリンクを配置する画面

      Dashboard

    • Change Email

      メールアドレス変更の一連の画面

      Change Email

  • Flows

    • Generate & Send Email OTP

      メールアドレスの受信確認のためのワンタイムパスワードを生成してメール送信を行う。

      Generate Email OTP

    • Verify Email OTP & Change Email

      ワンタイムパスワードの検証を行い、ユーザーのメールアドレスを更新する。

      Verify Email OTP

わかったこと

  • Formsを利用したメールアドレス変更機能の実装は、下記の要領で実現できる。
    • Authorization Requestにカスタムクエリを付与(プロトタイプ実装では form)を付与して、Formsを呼び出す。
    • Flowsのワンタイムパスワード生成・検証 (Data verification) 機能を利用して、メールアドレスの受信確認を行い、Update user機能でメールアドレスを更新する。
  • ただし、IDトークンやアクセストークンの取得のための機能であるAuthorization Requestを、Formsの呼び出しのためだけに利用して認可コードを返却せずに中断するという、本来の目的通りではない使い方となる。
  • ワンタイムパスワードの有効期限は5分固定で、1つのトランザクション10回検証に失敗すると以後は Rate limit reached エラーとなる。新規トランザクションのRate LimitはRate Limit Configurationによるようであるが、具体的にどの項目が該当するのかの明記はない。
  • ワンタイムパスワードのメール送信は、MailjetもしくはSendGrid以外のサービスを利用する場合、HTTP Requestで実装する必要がある。(Amazon SESにも対応してほしいところ。)
  • 変更先のメールアドレスが既に他のユーザーに使用されているかどうかを確認する機能は提供されていないため、Management APIを呼び出すFlowを作って検証するか、Update userの重複エラーをハンドリングして対応する必要がある。
  • Formsでは前のStep (画面) に戻る遷移を作ることができないため、Authorization RequestのURLに転送して、最初のStepに戻す方法を取るしかない。
    • 例えば、上記のUpdate userの重複エラーが起きたときには、変更先のメールアドレス入力画面に戻すというケースが相当する。プロトタイプ実装では Try Again という文字列をAuthorization RequestのURLのリンクにすることで対応している。

その他Auth0 FormsのTips

  • Step (画面) のタイトルは Form | All Applications となる。このカスタマイズはHTMLコンポーネント内でJavaScriptで対応する必要がある。
  • FlowのIntegrationの結果はFormsからは参照できない。Formから参照するにはShared Variablesに設定する必要がある。
  • HTTP Requestの認証方法はBearer認証もしくはBasic認証のみがサポートされているため、その他の認証方法は別途作りこみが必要となる。
    • 例えば、OAuth2 Client Credentials Grantを利用する場合は、トークン取得用のHTTP Requestを作るか、Actionの処理で予めトークンを取得してShared Variablesで引き渡す必要がある。
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?