Auth0 My Account API: Let Users Manage Their Own Account

Auth0 My Account API: Let Users Manage Their Own Account の翻訳です。

従来、ユーザーが自分自身のアカウント情報（プロフィール情報の更新、Multi-Factor Authentication の登録、ソーシャルアカウントのリンクなど）を管理できるようにするには、開発者は Auth0 Management API に頼る必要がありました。しかし Management API は広範な管理権限を与えるため、そのトークンはサーバーサイドのコンポーネントで安全に扱う必要があります。その結果、Single Page Application（SPA）やモバイルアプリの開発者は、単純なセルフサービス操作を実現するだけのために専用のバックエンドプロキシを構築しなければならず、アーキテクチャが複雑化しがちでした。こうした複雑さは、開発時間の増加や API トークン管理の運用負荷といった課題を生みます。My Account API はこれらの問題を解消することを目的としており、SPA やモバイルアプリのユーザーでも、自分のプロフィールを安全かつ直接、簡単に管理できるための適切な仕組みを提供します。これがユーザーによるセルフサービス管理の本質です。

My Account API の紹介

My Account API は、クライアントサイドのセルフサービスのために特別に設計された専用エンドポイント群です。この API は 現在ログイン中のユーザーのコンテキスト内でのみ動作します。これは、すべての API コールが特別なパス /me にスコープされることで強制されます。

高権限トークンが必要な Management API とは異なり、My Account API は標準のユーザーログインプロセス中に発行されるアクセストークンを利用します。これらのトークンは、特定の audience とスコープのセットを指定して要求する必要があります。

この設計は重要です。API は認証済みユーザー自身のプロフィールに限定されるため、ブラウザベースの React アプリケーションのようなパブリッククライアントから直接呼び出しても、テナント全体のセキュリティを危険にさらすことがありません。

My Account API を有効化する

API を利用する前に、Auth0 ダッシュボードの Authentication > APIs からテナントで有効化する必要があります。以下のバナーが表示されるので、 Activate ボタンをクリックします。

安全なクライアントサイドのアカウント管理のため、Auth0 My Account API を有効化するよう促す Auth0 ダッシュボードのバナーのスクリーンショット。

これにより、API 一覧に Auth0 My Account API が追加されます。

API を呼び出すには、My Account API ページの Settings タブで確認できる API identifier（ audience ）の値を使用します。通常、次のような形式になります。

https://YOUR_AUTH0_DOMAIN/me/

また、アプリケーションで必要なスコープも有効化する必要があります。 Applications タブへ移動し、スイッチを切り替えて対象アプリケーションで API を有効にします。その後、以下のようにスコープセクションを展開して、有効化したいスコープを選択します。

read:me:connected_accounts のような、ユーザーセルフサービス管理機能を有効にするために必要な API スコープを選択する Auth0 ダッシュボード設定画面のスクリーンショット。

原則として、アプリケーションが実際に必要とするスコープだけを有効化してください。変更内容は Update ボタンをクリックして保存します。

執筆時点では My Account API は Limited Early Access（限定的な早期アクセス）で提供されているため、上記のスコープすべてが利用できるわけではありません。Limited Early Access プログラムへの参加方法についてはドキュメントを確認してください。

スコープにより、アプリケーションは特定のエンドポイントを呼び出したり、特定の HTTP メソッド（verb）を利用したりできます。たとえばユーザーが新しいパスキーを登録できるようにするには、次のスコープを要求する必要があります。

create:me:authentication-methods

他にも、リンクされたソーシャルアカウントを管理するためのスコープとして、以下があります。

read:me:connected_accounts
delete:me:connected_accounts

My Account API 用のアクセストークンを取得するには、ユーザーログイン時にアクセストークンを取得する一般的な手順を利用します。My Account API の audience と必要なスコープを指定するだけです。以下は My Account API のための認可リクエストの例です。

curl --request GET \
  --url 'https://YOUR_AUTH0_DOMAIN/authorize' \
  -d 'client_id=1234567890' \
  -d 'response_type=code' \
  -d 'redirect_uri=https://my-app.com/callback' \
  -d 'audience=https://YOUR_AUTH0_DOMAIN/me/' \
  -d 'scope=read:me:authentication-methods read:me:connected_accounts' \
  -d 'state=wo87trfgwcdf2' \
  -d 'nonce=dh9812hdd29' \
  -d 'code_challenge=p2g8guffhp9hf398yyhh328' \
  -d 'code_challenge_method=S256'

利用可能な Auth0 認証 SDK のいずれかを使用して、アプリケーションのユーザーを認証し、アクセストークンを取得してください。

API を直接呼び出す

基本的なやり取りを理解するために、プログラミング言語に依存しない形で、API とやり取りする生の HTTP リクエストを見ると役立ちます。直接呼び出す場合は、アクセストークンを Authorization ヘッダーに含めて送信する必要があります。

以下の cURL コマンドは、ユーザーが現在登録している認証手段を読み取る例です。

curl --request GET \
  --url 'https://YOUR_AUTH0_DOMAIN/me/authentication-methods' \
  --header 'Authorization: Bearer USER_ACCESS_TOKEN' \
  --header 'Content-Type: application/json'

この例では、Authorization ヘッダーで bearer アクセストークンを使い、authentication-methods エンドポイントを呼び出しています。ベース URL は My Account API の audience に設定した値を使う必要があり、アクセストークンには read:me:authentication-methods スコープが含まれていなければなりません。

これが、API を利用してクライアントサイドでアカウント管理を実装する基本的な方法です。HTTP リクエストを送れるアプリケーションであれば、このパターンを実装できます。

SDK を使って API 呼び出しを簡単にする

JavaScript ベースのアプリケーションでは、専用の myaccount-js SDK を利用できます。この SDK は生の HTTP ロジックを抽象化し、リクエスト作成、パラメータ処理、レスポンスのパースを簡素化します。

Node.js ベースの開発環境に SDK をインストールするには、以下を実行します。

npm install @auth0/myaccount-js

ここでは、クライアントサイドとサーバーサイドの 2 つの利用シナリオで、SDK の基本的な使い方を見ていきます。

クライアントサイドでの SDK 利用：React 例

クライアントサイドの SPA では、ユーザーがログインしてアクセストークンを取得した後に SDK を使うのが適しています。例では React を使いますが、SDK はフレームワークに依存しないため、どの開発フレームワークでも利用できます。

以下のコードスニペットは、ユーザーの接続アカウント（connected accounts）を簡単に取得する方法を示しています。

import { useEffect, useState } from "react";
import { MyAccount, MyAccountClient } from "@auth0/myaccount-js";

function ConnectedAccountsManager({ getAccessTokenSilently, domain }) {
  const [accounts, setAccounts] = useState<MyAccount.ConnectedAccount[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchConnectedAccounts() {
      try {
        // 1. 必要なスコープ付きでアクセストークンを取得
        const token = await getAccessTokenSilently({
          authorizationParams: {
            audience: `https://${YOUR_AUTH0_DOMAIN}/me/`,
            scope: "read:me:connected_accounts",
          },
        });

        // 2. MyAccount Client を初期化
        const myAccountClient = new MyAccountClient({
          domain: domain,
          token: token,
        });

        // 3. SDK のメソッドで接続アカウント一覧を取得
        const connectedAccounts = await myAccountClient.connectedAccounts
          .list();
        setAccounts(connectedAccounts.data);
      } catch (error) {
        console.error("接続アカウントの読み込みに失敗しました:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchConnectedAccounts();
  }, [getAccessTokenSilently, domain]);

  // ...（コンポーネントの描画ロジック）
}

React コンポーネント ConnectedAccountsManager は、現在のユーザーが接続しているアカウント一覧を表示することを想定しています。

まず getAccessTokenSilently() 関数で audience と必要スコープを指定してアクセストークンを取得します。次に SDK が提供する myAccountClient を、ドメインと取得したトークンで初期化します。SDK の myAccountClient.connectedAccounts.list() メソッドを呼ぶことで、ユーザーがリンクしているアカウント一覧を取得できます。最後に、accounts ステートを使って接続アカウントを表示します。

サーバーサイドでの SDK 利用：Node.js 例

myaccount-js SDK は、Node.js 環境のようなサーバーサイド JavaScript アプリケーションでも利用できます。

以下のコードは、delete:me:connected_accounts スコープを必要とする「接続アカウントをプログラムから削除する」例です。

const { MyAccountClient } = require("@auth0/myaccount-js");

// プレースホルダーを実際の値に置き換えてください
const DOMAIN = "YOUR_AUTH0_DOMAIN";
const ACCESS_TOKEN = "USER_ACCESS_TOKEN_WITH_SCOPES"; // delete:me:connected_accounts スコープが必要
const ACCOUNT_ID_TO_REMOVE = "auth0|1234567890"; // リンク解除したい接続アカウントの ID

async function unlinkConnectedAccount() {
  // 1. MyAccount Client を初期化
  const myAccountClient = new MyAccountClient({
    domain: DOMAIN,
    token: ACCESS_TOKEN,
  });

  try {
    console.log(
      `リンク解除を試みています。アカウント ID: ${ACCOUNT_ID_TO_REMOVE}`,
    );

    // 2. SDK のメソッドでアカウントを削除
    await myAccountClient.connectedAccounts.delete(ACCOUNT_ID_TO_REMOVE);

    console.log(
      `アカウント ID ${ACCOUNT_ID_TO_REMOVE} のリンク解除に成功しました`,
    );
  } catch (error) {
    console.error("接続アカウント削除時のエラー:", error.message);
  }
}

この unlinkConnectedAccount() 関数は、Auth0 ドメインとユーザーのアクセストークン（※ delete:me:connected_accounts スコープが必須）で MyAccountClient を初期化します。その後、myAccountClient.connectedAccounts.delete() メソッドを呼び出し、削除対象のアカウント ID を渡します。リンク解除できれば成功メッセージを出し、失敗すればエラーログを出力します。

いま始めるセルフサービス型アカウント管理の効率化

Auth0 My Account API は、安全なセルフサービス型ユーザー管理機能の実装を大きくシンプルにする重要な一歩です。ユーザーにスコープされた専用エンドポイントを提供することで、開発者はパスキー登録やアカウントリンクといった主要なアカウント機能を、複雑なバックエンドプロキシから切り離し、クライアントサイドアプリケーションへ自信を持って移せるようになります。その結果、よりクリーンなアーキテクチャ、より速い開発サイクル、そしてより洗練されたユーザー体験につながります。

繰り返しになりますが、執筆時点ではこの機能は Limited Early Access で提供されています。利用したい場合は Auth0 のアカウントマネージャーに連絡し、アクセス申請を行ってください。

myaccount-js SDK をダウンロードし、JavaScript ベースのアプリケーションで利用してみてください。感想や質問があれば、ぜひ下で教えてください。