Auth0の新機能「Universal Login Text Customization API」を触ってみた

はじめに

こんにちは。
2019年4月入社の市川です。
研修修了後に配属されたプロジェクトで、
Auth0の認証・認可基盤を利用したアプリケーション開発を行っています。

今回は、Auth0に最近追加されたUniversal Login Text Customization API を
実際に触ってみたので、機能概要、利用方法を書いていきたいと思います。

皆さまからご要望が多かった、Universal Login Text Customization APIをリリースしました！このAPIを使うことによって、ユニバーサルログインフロー中にレンダリングされたテキストを、エラーメッセージも含めて任意のものにオーバーライドできます！ぜひお試しを！👀https://t.co/WAOZpb6DVO

— Auth0 Japan (@auth0_jp) December 5, 2019

そもそもAuth0とはなんぞや

Auth0はWebアプリやモバイル、APIなどに対して認証・認可のサービスを
クラウドで提供しているIDaaS (Identity as a Service)の一つです。

認証・認可基盤を一から構築せずにスピーディーかつ安全な認証基盤を
アプリケーションに組み込むことができます。

Universal Login Text Customization API

Auth0のUniversal Loginでは、ログインやパスワード変更、
MFAやEmailの検証などの機能が提供されています。

今回紹介するUniversal Login Text Customization APIを使用することで、
Universal Loginで提供されているビューの文言を各々のニーズに合わせて変更することができます。

実際にやってみた

今回はクライアントがリソースオーナーに対して認可を要求した時に表示される
同意画面(consent)で検証を行っていきます。

サンプルアプリケーションのダウンロード

Auth0のダッシュボード上にあるサイドバーからApplicationをクリックし、
Quickstartを選択し、サンプルのアプリケーションをダウンロードすると
ローカル環境でAuth0の挙動を確認することが出来ます。

Auth0では、VueやReactを使用したSPAのサンプルアプリケーションだけでなく、
Ruby on RailsやGo、Spring Bootなど多くのサンプルアプリケーションを用意してくれているので、
自分の環境にあったものをダウンロードしましょう。
今回はVueのサンプルを使用して進めていきます。

また、ローカルで動かす時に必要となる設定がダウンロード時に表示されるので忘れずに設定を行いましょう。

サーバーの起動

次にサーバーの起動を行います。

> npm run serve 

Universal Login Text Customization APIを使用して文言を変更する

Universal Login Text Customization APIを使用して変更できる文言は下記の12種類です。

• consent
• device-flow
• email-verification
• login
• mfa
• mfa-email
• mfa-otp
• mfa-push
• mfa-recovery-code
• mfa-sms
• reset-password
• signup

上述の通り、クライアントがリソースオーナーに対して認可を要求した時に表示される
同意画面(consent)で検証を行ないます。
デフォルトのconsent画面は下記のとおりです。

B2Cのサービスを運用している場合は、デフォルトの文言からユーザーにわかりやすい文言に
カスタマイズしたい時があります。これまでAuth0ではそのような機能は提供されてきませんでしたが、
今後はUniversal Login Text Customization API を使用することで可能になります。

今回は、検証のためcurlコマンドでUniversal Login Text Customization APIを呼び出します。

curl --request PUT \
--url 'https://<テナントのドメイン名>.auth0.com/api/v2/prompts/consent/custom-text/ja' \
--header 'authorization: Bearer '<アクセストークン(jwt)>' \
      --header 'content-type: application/json' \
      --data '{ "consent": { "title": "XXXにアカウントへのアクセスを許可しますか",　\
                             "pickerTitle": "おはようございます。",　\
　　　　　　　　　　　　　　　　"messageMultipleTenants": "Xは下記の権限を求めています", \
                             "acceptButtonText": "連携アプリを認証",　\
                             "declineButtonText": "キャンセル"　\
               } }'

上記のcurlコマンドを実行した結果が下記の画像の通りです。
指定した文言に簡単に変更することが出来ました。

最後に

認証と認可はどんなアプリケーションでも必要とされますが、
APIとの連携やログイン機能、ソーシャルログインやSSOなどを
限られた時間・リソースの中で1から実装するのは難しいです。

Auth0を利用することで、認証・認可の実装にかかる時間的コストを短縮でき、
開発者が本来集中すべきビジネス機能の実装に時間を費やすことができるのは
大きなメリットだと考えています。
引き続きAuth0の情報をウォッチしていきたいと思います。