> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# My Account API を使用して、セルフサービスのアカウントセキュリティ用インターフェースを構築する

> Universal Components を設定し、My Account API を使用したセルフサービスのアカウントセキュリティ用インターフェースを構築する方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

My Account コンポーネントを使用すると、セルフサービスで認証を管理できるインターフェースを Web アプリケーションに直接組み込めます。ユーザーは Web アプリケーション内で多要素認証 (MFA) の認証要素を登録・削除し、パスキーを管理できます。

<div id="how-it-works">
  ## 仕組み
</div>

My Account コンポーネントは、My Account API の[認証方法](/docs/ja-jp/manage-users/my-account-api#manage-authentication-methods)エンドポイントを使用して、アプリケーション内に認証方法を管理するための UI をレンダリングします。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  [My Account API](/docs/ja-jp/manage-users/my-account-api) には現在、特に Free ティアのテナントに対して低い[レート制限](/docs/ja-jp/troubleshoot/customer-support/operational-policies/rate-limit-policy/rate-limit-configurations)が設定されています。このため、これらのコンポーネントの使用中にエラーが発生する可能性があります。
</Callout>

認証済みのユーザーがアカウント設定画面を開くと、Auth0 SDK は My Account API の audience に対してスコープが設定された[アクセストークン](/docs/ja-jp/secure/tokens/access-tokens)を取得します。

コンポーネントはこのトークンを使用して、ログイン中のユーザーとして My Account API の [`/me/v1/authentication-methods`](/docs/ja-jp/api/myaccount/authentication-methods/get-authentication-methods) を呼び出します。これにより、各ユーザーは自身の認証方法のみを表示・変更できます。

<div id="available-components">
  ### 利用可能なコンポーネント
</div>

| **コンポーネント**                                                                                                                                                                        | **API エンドポイント**                                 |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- |
| [**UserMFAManagement**](/docs/ja-jp/get-started/universal-components/web/components/user-mfa-management) メール OTP、SMS OTP、TOTP (認証器アプリ) 、プッシュ通知、パスキー、リカバリーコードなどの MFA 認証要素を登録・削除します。 | `/me/v1/authentication-methods`                 |
| [**UserPasskeyManagement**](/docs/ja-jp/get-started/universal-components/web/components/user-passkey-management) WebAuthn パスキーを登録・取り消しします。                                         | `/me/v1/authentication-methods` (type: passkey) |

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  * これらのコンポーネントは、**エンドユーザー向けセルフサービス**インターフェースを作成します。エンドユーザーは、自身のアカウントでメール OTP、SMS OTP、TOTP (認証器アプリ) 、プッシュ通知、パスキー、リカバリーコードのすべての認証方法を登録、一覧表示、削除できます。
  * ユーザーが Auth0 の[組織](/docs/ja-jp/manage-users/organizations)を管理する**委任管理者**向けインターフェースについては、[Delegated Admin Interface を構築する](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin)を参照してください。
</Callout>

<Tabs>
  <Tab title="React（SPA）">
    ## 前提条件

    ### My Account API を有効化する

    1. [**Auth0 Dashboard > アプリケーション > APIs**](https://manage.auth0.com/#/apis) に移動します。
    2. **Activate My Account API** を選択して、テナントで有効化します。

    ### アプリケーションを作成し、My Account API の権限を設定する

    1. [**Auth0 Dashboard > アプリケーション > アプリケーション**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **Single Page Web Applications** を選択します。

    3. **設定** タブを選択し、**コールバック、ログアウト、Web オリジン URL** を追加します。例: `http://localhost:5173`。

    4. **API Access** タブを選択します。

    5. **Auth0 My Account API** の **Edit** を選択し、以下の **ユーザー委譲アクセス**権限を追加します。

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. **Save** を選択して権限を保存します。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * ユーザーのアクセストークンには、ログイン時に付与された権限のみが含まれます。
      * ユーザーが認証方法を登録、確認、削除できるようにするには、5 つすべてのスコープをリクエストします。
    </Callout>

    ## アプリケーションを設定する

    ### コンポーネントをインストールする

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `react-hook-form` と `@tanstack/react-query` はピア依存関係です。このコマンドでは、共有ユーティリティと Auth0 連携に必要な `@auth0/universal-components-core` もインストールされます。
    </Callout>

    ### 環境変数を設定する

    プロジェクトのルートに `.env` ファイルを作成します。

    ```bash wrap lines theme={null}
    VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
    VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID
    ```

    ### Universal Components を設定する

    `Auth0Provider` と `Auth0ComponentProvider` をインポートし、`interactiveErrorHandler="popup"` を設定すると、MFAの登録および削除時のチャレンジがページ遷移ではなくポップアップで処理されます。

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
    const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

    export default function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={clientId}
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler="popup"
        >
          <Auth0ComponentProvider domain={domain}>
            {/* お客様のアプリケーション */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * My Account コンポーネントをレンダリングするには、Users が認証されている必要があります。
      * コンポーネントは、ログイン中のユーザーの認証方法を My Account API から自動的に読み込みます。
    </Callout>
  </Tab>

  <Tab title="Next.js（RWA）">
    ## 前提条件

    ### My Account API を有効化する

    1. [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/apis) に移動します。
    2. **Activate My Account API** を選択して、テナントで有効化します。

    ### アプリケーションを作成し、My Account API の権限を設定する

    1. [**Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **Regular Web Application** を選択します。

    3. **Settings** タブを選択し、**Allowed Callback, and Allowed Logout URLs** を追加します。例：`http://localhost:3000`。

    4. **API Access** タブを選択します。

    5. **Auth0 My Account API** の **Edit** を選択し、**User-delegated Access** の権限を追加します。

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. **Save** を選択して、権限を保存します。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * ユーザーの access token には、login 時に付与された権限のみが含まれます。
      * ユーザーが認証方法を登録、確認、削除できるようにするには、5 つすべての scope をリクエストしてください。
    </Callout>

    ### データベースとテストユーザーを設定する

    1. [**Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) に移動し、データベース接続を作成します。
    2. データベース接続の **Applications** タブで、アプリケーションを有効化します。
    3. [**Dashboard > User Management > Users**](https://manage.auth0.com/#/users) に移動します。
    4. **Create User** を選択し、新しいデータベース接続に割り当てるユーザーを作成します。
    5. **Create** を選択して新しいユーザーを追加し、テストにはこのユーザーを使用します。

    ## アプリケーションを設定する

    ### コンポーネントをインストールする

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `react-hook-form` と `@tanstack/react-query` はピア依存関係です。このコマンドにより、共有ユーティリティと Auth0 連携に必要な依存関係である `@auth0/universal-components-core` もインストールされます。
    </Callout>

    ### 環境変数を設定する

    Next.js プロジェクトのルートに `.env.local` ファイルを作成します。

    ```js wrap lines theme={null}
    AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com
    AUTH0_CLIENT_ID=YOUR_RWA_CLIENT_ID
    AUTH0_CLIENT_SECRET=YOUR_RWA_CLIENT_SECRET
    AUTH0_SECRET=YOUR_AUTH0_SECRET
    APP_BASE_URL=http://localhost:3000
    NEXT_PUBLIC_AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com
    ```

    Next.js SDK の設定全体については、[Auth0 Next.js SDK のドキュメント](/docs/ja-jp/quickstart/webapp/nextjs)をご覧ください。

    ### Universal Components を設定する

    `/rwa` サブパスの `Auth0ComponentProvider` をルート layout に追加します。サーバーサイドの Auth0 セッションを使用できるよう、proxy モードで設定します。

    ```tsx app/layout.tsx wrap lines theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
              mode="proxy"
              proxyConfig={{ baseUrl: "/" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * My Accountコンポーネントをレンダリングする前に、ユーザーを認証する必要があります。
      * コンポーネントは、ログイン中のユーザーの認証方法をMy Account APIから自動的に読み込みます。
    </Callout>
  </Tab>

  <Tab title="shadcn">
    ## 前提条件

    ### My Account API を有効化する

    1. [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/apis) に移動します。
    2. **Activate My Account API** を選択して、テナントで有効化します。

    ### アプリケーションを作成し、My Account API の権限を設定する

    1. [**Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **Single Page Web Applications** を選択します。

    3. **Settings** タブを選択し、**Callback、Logout、Web Origins URLs** を追加します。例：`http://localhost:5173`。

    4. **API Access** タブを選択します。

    5. **Auth0 My Account API** の **Edit** を選択し、以下の **ユーザー委任アクセス**権限を追加します。

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. **Save** を選択して、権限を保存します。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * ユーザーのアクセストークンには、ログイン時に付与された権限のみが含まれます。
      * ユーザーが認証方法を登録、確認、削除できるように、5 つすべてのスコープをリクエストしてください。
    </Callout>

    ### データベース接続とテストユーザーを設定する

    1. [**Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) に移動し、データベース接続を作成します。
    2. データベース接続の **Applications** タブで、アプリケーションを有効化します。
    3. [**Dashboard > User Management > Users**](https://manage.auth0.com/#/users) に移動します。
    4. **Create User** を選択し、新しいデータベース接続に割り当てられたユーザーを作成します。
    5. **Create** を選択して新しいユーザーを追加し、このユーザーをテストに使用します。

    ## アプリケーションを設定する

    ### コンポーネントをインストールする

    shadcn CLI を実行して、コンポーネントをプロジェクトのソースコードに直接追加します。

    ```bash MFA management wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json
    ```

    ```bash Passkey management wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-passkey-management.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      インストールコマンドを実行すると、共有ユーティリティとAuth0連携に必要なすべてのUI依存関係および`@auth0/universal-components-core`依存関係とともに、コンポーネントのソースが`src/components/auth0/my-account/`に追加されます。
    </Callout>

    ### 環境変数を設定する

    プロジェクトのルートに`.env.local`ファイルを作成します。

    ```js wrap lines theme={null}
    VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
    VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID
    ```

    ### Universal Components を設定する

    `Auth0Provider` と `Auth0ComponentProvider` をインポートし、`interactiveErrorHandler="popup"` を設定すると、MFA の登録や削除に関するチャレンジがページ外へのリダイレクトではなくポップアップで処理されます。

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
    const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

    export default function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={clientId}
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler="popup"
        >
          <Auth0ComponentProvider domain={domain}>
            {/* アプリケーション */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * My Account コンポーネントをレンダリングする前に、ユーザーを認証する必要があります。
      * コンポーネントは、ログイン中のユーザーの認証方法を My Account API から自動的に読み込みます。
    </Callout>
  </Tab>
</Tabs>

<div id="learn-more">
  ## 詳細情報
</div>

<CardGroup cols={2}>
  <Card title="ユーザーMFA管理を設定する" icon="gear" href="/docs/ja-jp/get-started/universal-components/web/components/user-mfa-management">
    MFA認証要素のリファレンス: プロップス、カスタマイズ、TypeScript 型定義、Advanced サブコンポーネント。
  </Card>

  <Card title="ユーザーパスキー管理を設定する" icon="gear" href="/docs/ja-jp/get-started/universal-components/web/components/user-passkey-management">
    パスキー管理のリファレンス: Hooks、メッセージのオーバーライド、CSS クラスのターゲット。
  </Card>
</CardGroup>