Auth0 ACUL JS SDKクイックスタート

Before you start

以下が必要です。

  • ユニバーサルログインが構成されたAuth0開発テナント。

  • カスタムドメイン構成のアプリケーション。

  • ローカルホスト上で動作する開発用アプリまたはサンプルアプリ（Reactサンプルアプリなど）

  • Identifier First認証が有効になっている

  • パスワードを使用するデータベース接続

Auth0 ACUL JS SDKを使用すると、ユニバーサルログイン（ACUL）の高度なカスタマイズを実装できます。シームレスな実装に必要なツールが用意されており、認証画面（ログイン、サインアップ、パスワードレス、パスキー登録など）を簡単にWebアプリケーションに統合できます。

このクイックスタートは、カスタマイズしたログインID画面のプレビューを作成するのに役立ちます。 詳細については、Auth0 ACUL JS SDK GitHub repoを参照してください。

1. SDKをインストールする

reactボイラープレートのクローンを作成してから、ディレクトリをauth0-acul-react-boilerplateフォルダーに変更し、SDKをインストールします。

//Clone the ACUL sample application into the root folder of your project

git clone https://github.com/auth0-samples/auth0-acul-samples.git

//Change directory to install the ACUL sample application 

cd auth0-acul-samples && npm i

Was this helpful?

/

2. SDKをインポートしてインスタンス化する

auth0-acul-react-boilerplate/srcフォルダー内で、App.tsxファイルの先頭部分を編集して、SDKをインポートしてインスタンス化します。

import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js";

export default function LoginId() {
  // Initialize the SDK for this screen
  const screenProvider = new ScreenProvider();
  ...
}

Was this helpful?

/

3. ログインアクションを実装する

ログインアクションを実装するApp.tsxファイル内のbutton click関数を見つけます。

const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();

    // grab the value from the form
    const identifierInput = event.target.querySelector(
      "input#identifier"
    ) as HTMLInputElement;

    // Call the SDK
    screenProvider.login({ username: identifierInput?.value });
  };

Was this helpful?

/

4. アセットを構築して提供する

ACULでは、アセットがパブリックURLにホストされていなければなりません。このクイックスタートのために、アセットはローカルホストから提供されます。

// Creates the local assets 

npm run build 
cd dist 

// Serves the assets from localhost

npx serve -p 8080 --cors

Was this helpful?

/

5. ACULの高度なレンダリングモードを有効にする

テスト用のAuth0 Management API Explorerのトークンと、サンプルアプリ用に設定したカスタムドメインアドレスを使用して、ログインID画面で高度なモードを有効にします。

curl --location --request PATCH 'https://{<CUSTOM-DOMAIN>/api/v2/prompts/login-id/screen/login-id/rendering' \
    --header 'Content-Type: application/json' \
    --header 'Authorization: Bearer <API-TOKEN>' \
    --data '{
"rendering_mode": "advanced",
"head_tags": [
  {
  "tag": "base",
  "attributes": {
    "href": "http://127.0.0.1:8080/"
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/main.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "link",
    "attributes": {
      "rel": "stylesheet",
      "href": "http://127.0.0.1:8080/assets/shared/style.<hash>.css"
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/login-id/index.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/shared/common.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/shared/vendor.<hash>.js",
      "type": "module",
      "defer": true
    }
  }
]
    }'

Was this helpful?

/

高度なカスタマイズを有効にする詳細な方法については、「高度なカスタマイズをデプロイおよびホスティングする」をお読みください。

6. ログインID画面を表示する

Auth0 Reactサンプルアプリをローカルホストで実行し、ログインを選択します。

ログイン画面が、カスタマイズが有効になった高度なモードで表示されます。

利用できる画面の詳細については、「ACUL画面」をお読みください。

SDKリファレンス

Auth0 ACUL JS SDKの詳細については、「SDKリファレンスGitHub repo」を参照してください。