[Auth0] Auth0の埋め込みアプリケーションで実現する、ブランドに合わせたログイン体験

こんにちは。

ゲームソリューション部/業務効率化ソリューション部の西川です。

今回はAuth0の埋め込みアプリケーションを活用して、ログイン画面をカスタマイズする方法についてご紹介します。

はじめに

Auth0は、認証・認可を簡単に実装できるIDaaS（Identity as a Service）の一つです。埋め込みアプリケーション機能を使うと、自社のアプリケーション内にAuth0のログイン画面をシームレスに組み込むことができます。
https://auth0.com/docs/ja-jp/authenticate/login/embedded-login

やってみた

準備

Auth0のダッシュボードでアプリケーションの作成を行います。

また、ソースコードとして、Auth0公式サンプルを利用しています。
アプリケーションの作成方法、および、公式サンプルについては以下の弊社ブログをご参照ください。
https://dev.classmethod.jp/articles/auth0-react-tutorial/

実装

Auth0の埋め込みアプリケーションを実装するには、以下のようなコードを使用します。

// Auth0 Lockのインスタンスを作成
const lock = new Auth0Lock(
  auth0Config.clientId,
  auth0Config.domain,
  {
    auth: {
      redirectUrl: auth0Config.redirectUri,
      responseType: auth0Config.responseType,
      params: {
        scope: auth0Config.scope
      }
    },
    theme: {
      logo: 'hogehoge',
      primaryColor: '#007bff',
    },
    languageDictionary: {
      title: '',
    },
    language: 'ja',
    container: 'auth0-login-container'
  }
);

// ログイン画面の表示
lock.show();

lock.show()を記述することで、ログイン用のウィジェットが表示されます。
containerに埋め込みたい要素のclassを設定することで、埋め込みが可能です。

表示は以下のようになっています。

このように、任意のページにログイン用のウィジェットを簡単に埋め込むことができます。

カスタマイズ

Auth0の埋め込みアプリケーションは、以下のようなカスタマイズが可能です。
今回はtheme.logoに弊社のロゴを挿入してみました。

1. ブランディング

   • ロゴの変更
   • カラースキームの調整
   • フォントの変更

2. ログインフォームのカスタマイズ

   • 入力フィールドの配置変更
   • エラーメッセージのカスタマイズ
   • ソーシャルログインボタンの表示/非表示

3. 多言語対応

   • 日本語を含む複数言語のサポート

埋め込みログインで利用できるパラメータについては以下公式ドキュメントをご参照ください。
https://auth0.com/docs/ja-jp/libraries/lock/lock-api-reference

さいごに

Auth0の埋め込みアプリケーションを使うことで、セキュアな認証機能を手軽に実装できるだけでなく、自社のブランドイメージに合わせたカスタマイズも可能です。
特に、ユーザー体験を重視するアプリケーションでは、この機能を活用することで、より自然な認証フローを提供できます。

一方で、CSSを利用したデザインの変更はアップデートなどにより予期せず挙動が変更されてしまう可能性があるため、推奨されていない点にご注意ください。
基本的にはAuth0Lockで用意されている設定をご利用の上でのデザインのカスタマイズが推奨されています。

本記事がAuth0の導入を検討中、または既に利用中の方のご参考になっていれば幸いです。