利点
- 1 つのテナントで複数ブランドに対応できるよう、Auth0 の Universal Login の機能を拡張できます。
- 認証ロジックを作り直すことなく、Passkeys、Bot Detection、MFA などの Auth0 の機能を活用できます。
- 高度な分析や A/B テストを統合して、ユーザージャーニーを最適化できます。
- ACUL SDK を使用して、お使いの技術スタックで構築できます。具体的には次のことが可能です。
- 任意のサードパーティ製 CSS、JS、またはコンポーネントライブラリを使用する
- Heap、Mixpanel など、好みの分析プラットフォームを統合する
- Vue や React など、好みのフロントエンドフレームワークで構築する
ユースケース
次の場合は、Universal Login の実装で ACUL を使用するとよいでしょう。- 認証フローに特定のブランド基準を適用する必要がある。
- マルチブランド対応を提供する必要がある。
- UI レベルでの A/B テストや詳細な分析を行う必要がある。
- Auth0 が現在サポートしていない言語で、ローカライズされた Universal Login を提供する必要がある。
- 認証フローに複雑なロジックやカスタム ロジックを追加する必要がある。
仕組み
ビルド時 は、独自の環境でカスタマイズした認証画面の構築を開始した時点で始まります。
ACUL SDK を使用してカスタムコードを送信し、React や Angular など好みのフロントエンド技術スタックで、プロンプトや画面を定義します。コミットをプッシュすると、CI/CD パイプラインでビルドプロセスが実行され、アプリケーションは静的な JavaScript と CSS アセットにコンパイルされます。続いて、それらのアセットはプライベートクラウドストレージにアップロードされ、独自のコンテンツ配信ネットワーク (CDN) として配信されます。
実行時 は、アプリケーションがエンドユーザーを Auth0 のログインページにリダイレクトした時点で始まります。
Auth0 は、ACUL を使用するよう設定された認証画面を認識し、最小限のホストページを配信します。ユーザーのブラウザーはこのページを読み込みます。このページには、CDN 上のアセット URL を指す HTML タグが含まれています。ブラウザーは JavaScript と CSS をダウンロードし、Subresource Integrity (SRI) ハッシュで整合性を検証して、カスタム UI を表示します。以降のユーザー操作は、アプリケーションコードと ACUL SDK が処理します。
要件
Universal Login の高度なカスタマイズを始めるには、以下が必要です。- Universal Login と カスタムドメイン が設定された Auth0 開発テナント。
適切な環境タグを付けた、テスト用、開発用、本番用のテナントを作成することをお勧めします。
- Auth0 の First Party Application
- アセットをホストするための、GitHub などの CI/CD パイプラインを備えた CDN。