パスワードでのIdentifier Firstログインを構築する

始める前に

以下が必要です。

ユニバーサルログインが構成されたAuth0開発テナント。
カスタムドメイン構成のアプリケーション。
ローカルホスト上で動作する開発用アプリまたはサンプルアプリ（Reactサンプルアプリなど）
Identifier First認証が有効になっている
パスワードを使用するデータベース接続

このガイドの終わりには、カスタマイズしたログインID画面とログインパスワード画面のあるIdentity Firstフローが完成します。詳細については、「使用の開始ガイド」をお読みの上で、SDKリファレンスガイド」を参照してください。

セットアップする

でユニバーサルログイン、Identifier First認証、パスワードを使用するデータベース接続をセットアップします。シングルページアプリケーションを実行して、カスタムログイン画面を構築します。高度なカスタマイズインターフェイスのコンテキストを理解するには、Auth0が提供するボイラープレートアプリをクローンしてください：git clone https://github.com/auth0/auth0-acul-react-boilerplate ACUL 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

以下は完全な画面の例です。

ログインID ログインIDのサンプル画面

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

// UI Components
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { Link } from "@/components/ui/link";
import {
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";

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

  // Handle the submit action
  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 });
  };

  // Render the form
  return (
    <form noValidate onSubmit={formSubmitHandler}>
      <CardHeader>
        <CardTitle className="mb-2 text-3xl font-medium text-center">
          {screenProvider.screen.texts?.title ?? "Welcome"}
        </CardTitle>
        <CardDescription className="mb-8 text-center">
          {screenProvider.screen.texts?.description ?? "Login to continue"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.emailPlaceholder ??
              "Enter your email"}
          </Label>
          <Input
            type="text"
            id="identifier"
            name="identifier"
            defaultValue={
              screenProvider.screen.data?.username ??
              screenProvider.untrustedData.submittedFormData?.username
            }
          />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
        <Text className="mb-2">
          {screenProvider.screen.texts?.footerText ??
            "Don't have an account yet?"}
          <Link className="ml-1" href={screenProvider.screen.signupLink ?? "#"}>
            {screenProvider.screen.texts?.footerLinkText ??
              "Create your account"}
          </Link>
        </Text>
        <Text>
          Need Help?
          <Link
            className="ml-1"
            href={screenProvider.screen.resetPasswordLink ?? "#"}
          >
            {screenProvider.screen.texts?.forgottenPasswordText ??
              "Forgot your Password?"}
          </Link>
        </Text>
      </CardContent>
    </form>
  );
}

SDKをインポートして初期化する

auth0-acul-react-boilerplate/srcフォルダー内に「screens」という名前のフォルダーと「Login.tsx」という名前のファイルを作成します。SDKをインポートして、Reactコンポーネント内で画面にSDKを初期化します。

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

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

SDKで画面のプロパティやメソッドにアクセスする

SDKを使用すると、画面のプロパティやメソッドにアクセスできます。Auth0 ACUL JS SDKにはデータにアクセスするためのプロパティとメソッドがあります。コンテキストデータの詳細については、「ユニバーサルログインのコンテキストデータ」をお読みください。

<CardContent>
    <div className="mb-2 space-y-2">
      <Label htmlFor="identifier">
        {screenProvider.screen.texts?.emailPlaceholder ??
          "Enter your email"}
      </Label>
      <Input
        type="text"
        id="identifier"
        name="identifier"
        defaultValue={
          screenProvider.screen.data?.username ??
          screenProvider.untrustedData.submittedFormData?.username
        }
      />
    </div>
    <Button type="submit" className="w-full">
      {screenProvider.screen.texts?.buttonText ?? "Continue"}
    </Button>
    ...
  </CardContent>
</form>

送信アクションを呼び出す

SDKを使用して、画面で捉えたデータをサーバーに送信します。サーバーはこのデータを処理し、フローにある次の手順にユーザーを進めます。エラーがあれば画面を再度読み込んで、ユーザーにエラーのある箇所を示します。エラーはSDKからアクセスされます。

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.loginid({ username: identifierInput?.value });
  };

以下は完全な画面の例です。

ログインのパスワード

import { ChangeEvent } from "react";
import { LoginPassword as ScreenProvider } from "@auth0/auth0-acul-js";

// UI Components
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { Link } from "@/components/ui/link";
import {
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";

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

  // Handle the submit action
  const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();

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

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

  // Render the form
  return (
    <form noValidate onSubmit={formSubmitHandler}>
      <CardHeader>
        <CardTitle className="mb-2 text-3xl font-medium text-center">
          {screenProvider.screen.texts?.title ?? "Enter Your Password"}
        </CardTitle>
        <CardDescription className="mb-8 text-center">
          {screenProvider.screen.texts?.description ??
            "Enter your password to continue"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Text className="mb-4 text-large">
          <span className="inline-block">
            Log in as
            <span className="inline-block ml-1 font-bold">
              {screenProvider.screen.data?.username}.
            </span>
          </span>
          <Link
            href={screenProvider.screen.editIdentifierLink ?? "#"}
            className="ml-2"
          >
            {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
          </Link>
        </Text>
        <Input
          type="hidden"
          name="identifier"
          id="identifier"
          value={screenProvider.screen.data?.username}
        />
        <div className="mb-2 space-y-2">
          <Label htmlFor="password">
            {screenProvider.screen.texts?.passwordPlaceholder ?? "Password"}
          </Label>
          <Input type="password" id="password" name="password" />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
        <Text>
          Need Help?
          <Link
            href={screenProvider.screen.resetPasswordLink ?? "#"}
            className="ml-1"
          >
            {screenProvider.screen.texts?.forgottenPasswordText ??
              "Forgot your Password?"}
          </Link>
        </Text>
      </CardContent>
    </form>
  );
}

SDKをインポートして初期化する

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

export default function LoginPassword() {
  // Initialize the SDK
  const [SDK] = useState(() => new ScreenProvider());\
  ...
  }

SDKで画面のプロパティやメソッドにアクセスする

<CardContent>
        <Text className="mb-4 text-large">
          <span className="inline-block">
            Log in as
            <span className="inline-block ml-1 font-bold">
              {screenProvider.screen.data?.username}.
            </span>
          </span>
          <Link
            href={screenProvider.screen.editIdentifierLink ?? "#"}
            className="ml-2"
          >
            {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
          </Link>
        </Text>
        <Input
          type="hidden"
          name="identifier"
          id="identifier"
          value={screenProvider.screen.data?.username}
        />
        <div className="mb-2 space-y-2">
          <Label htmlFor="password">
            {screenProvider.screen.texts?.passwordPlaceholder ?? "Password"}
          </Label>
          <Input type="password" id="password" name="password" />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
...
      </CardContent>
    </form>

送信アクションを呼び出す

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

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

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

3. ACULにローカルアセットの使用を構成する

Auth0 CLI、Terraform、またはを使用してACULを有効化します。構成可能な項目については、「ACUL画面を構成する」をお読みください。

Auth0 CLI（推奨）
Auth0 Terraform
Auth0 Management API

プロジェクトのルートディレクトリにsettingsフォルダーを作成して、{SCREENNAME}.jsonファイルを格納します。

//settings.json
{
  "rendering_mode": "advanced",
  "context_configuration": [
    "screen.texts"
  ],
  "head_tags": [
    {
      "attributes": {
        "async": true,
        "defer": true,
        "integrity": [
          "ASSET_SHA"
        ],
        "src": "http://127.0.0.1:8080/index.js"
      },
      "tag": "script"
    },
    {
      "attributes": {
        "href": "http://127.0.0.1:8080/index.css",
        "rel": "stylesheet"
      },
      "tag": "link"
    }
  ]
}

Auth0 CLIでACULを有効にするには以下を行います。

auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json

ローカルサーバーで構成をテストする

ACULではアセットを公開URLでホストする必要があります。アセットをデプロイする前に、ローカルサーバーを実行してアセットをテストしてください。

// Creates the local assets 

npm run build 
cd dist 

// Serves the assets from localhost

npx serve -p 8080 --cors

4. アセットをデプロイしてテナント構成を更新する

ユニバーサルログインの高度なカスタマイズは、ViteやWebpackなどを含むすべてのModern Javascriptバンドルで動作します。詳細については、「高度なカスタマイズを運用にデプロイする」をお読みください。テナントにACULをデプロイする詳細については、「ACUL画面を構成する」をお読みください。

トピック	説明
ユニバーサルログインの高度なカスタマイズ	高度なカスタマイズの仕組みを説明します。
高度なカスタマイズの使用を開始する	高度なカスタマイズの入門ガイドです。
ユニバーサルログインの高度なカスタマイズ：画面	高度なカスタマイズに利用可能な画面のリストです。

ブランドのカスタマイズ

コードのカスタマイズ

サードパーティーのカスタマイズ

パスワードでのIdentifier Firstログインを構築する

始める前に

セットアップする

SDKをインポートして初期化する

SDKで画面のプロパティやメソッドにアクセスする

送信アクションを呼び出す

SDKをインポートして初期化する

SDKで画面のプロパティやメソッドにアクセスする

送信アクションを呼び出す

3. ACULにローカルアセットの使用を構成する

ローカルサーバーで構成をテストする

4. アセットをデプロイしてテナント構成を更新する

関連コンテンツ

ブランドのカスタマイズ

コードのカスタマイズ

サードパーティーのカスタマイズ

始める前に

​セットアップする

​1. login-id画面を構築する

​SDKをインポートして初期化する

​SDKで画面のプロパティやメソッドにアクセスする

​送信アクションを呼び出す

​2. login-password画面を構築する

​SDKをインポートして初期化する

​SDKで画面のプロパティやメソッドにアクセスする

​送信アクションを呼び出す

​3. ACULにローカルアセットの使用を構成する

​ローカルサーバーで構成をテストする

​4. アセットをデプロイしてテナント構成を更新する

​関連コンテンツ

セットアップする

1. login-id画面を構築する

SDKをインポートして初期化する

SDKで画面のプロパティやメソッドにアクセスする

送信アクションを呼び出す

2. login-password画面を構築する

SDKをインポートして初期化する

SDKで画面のプロパティやメソッドにアクセスする

送信アクションを呼び出す

3. ACULにローカルアセットの使用を構成する

ローカルサーバーで構成をテストする

4. アセットをデプロイしてテナント構成を更新する

関連コンテンツ