JavaScript 用 Microsoft Authentication Library を使用して Azure AD B2C を操作する

Important

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。詳細については、AZURE AD B2C を引き続き購入できますか?に関する FAQ を参照してください。

JavaScript 用 Microsoft Authentication Library (MSAL.js) を使用すると、JavaScript 開発者は Azure Active Directory B2C (Azure AD B2C) を使用して、ソーシャル ID とローカル ID でユーザーを認証できます。

Id 管理サービスとして Azure AD B2C を使用すると、顧客がアプリケーションを使用する際のプロファイルのサインアップ、サインイン、および管理方法をカスタマイズおよび制御できます。

Azure AD B2C を使用すると、認証プロセス中にアプリケーションに表示される UI をブランド化およびカスタマイズすることもできます。

サポートされているアプリの種類とシナリオ

MSAL.js を使用すると、シングルページアプリケーションは、PKCE を用いた認可コードフローを利用して Azure AD B2C にユーザーがサインインできます。 MSAL.js と Azure AD B2C の場合:

ユーザーは、ソーシャル ID とローカル ID で認証できます。
ユーザーは、Azure AD B2C で保護されたリソースへのアクセスを承認 できます (ただし、Microsoft Entra で保護されたリソースにはアクセスできません)。
ユーザーは、委任されたアクセス許可を使用して Microsoft API (MS Graph API など) のトークンを取得できません。
管理者特権を持つユーザーは、委任されたアクセス許可を使用して Microsoft API (MS Graph API など) のトークンを取得できます。

詳細については、「Azure AD B2C の使用」を参照してください。

次のステップ

次の方法に関するチュートリアルに従ってください。

⚠️ ここで開始する前に、アプリオブジェクトを初期化し、リソースとスコープを操作する方法を理解していることを確認してください。 Azure AD B2C に関する一般的な知識もお勧めします。詳細については、 B2C のドキュメントを参照してください。

MSAL.js では、ソーシャル（Microsoft、Google、Facebook など）、エンタープライズ（ADFS、Salesforce など）、および ローカル（Azure AD B2C ディレクトリに格納される）ID による認証が、Azure AD B2C（略して B2C）を使用してサポートされます。 MSAL.jsを使用して B2C アプリを開発する場合は、注意すべき重要な詳細がいくつかあります。

クイックファクト

B2C の場合:

ユーザーはソーシャル ID で認証できます。
ユーザーは許可されてB2C で保護されたリソースにアクセスできます（ただし、Microsoft Entra で保護されたリソースにはアクセスできません）。
ユーザーは、委任されたアクセス許可を使用してMicrosoft API (MS Graph API など) のトークンを取得できません。
アプリケーションは、アプリケーションのアクセス許可 (ユーザー管理シナリオ) を使用して、Microsoft API のトークンを取得できます。

B2C アプリの構成

B2C アプリの構成例を次に示します。

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Microsoft Entraと B2C エンドポイント

Microsoft Entra IDと Azure AD B2C テナントの主な違いは、そのエンドポイントです。

1 つの Microsoft Entra ID テナント:

Microsoft Entraエンドポイント (login.microsoftonline.com/*) のみを含みます。
1 つのトークンエンドポイント (login.microsoftonline.com/.../token) を公開します。
Microsoft Entraエンドポイントを使用すると、次のトークンを取得できます。
- Microsoft Entra IDによって保護されたアプリケーション。
- MICROSOFT API (MS Graph APIなど)。

B2C テナント:

MICROSOFT ENTRA IDとAzure AD B2C エンドポイント (login.microsoftonline.com/*と<your-domain>.b2clogin.com/*) が含まれます。
(、login.microsoftonline.com/.../token) ごとに<your-domain>.b2clogin.com/.../tokenのトークンエンドポイントを公開します。
B2C エンドポイントを使用すると、次のトークンを取得できます。
- B2C によって保護されているアプリケーション。

B2C と委任されたアクセス許可

委任されたアクセス許可では、サインインしているユーザーからの対話型承認を使用して、スコープベースのアクセスを指定します。これらのアクセス許可は、実行時にリソース (Web API、MS Graph API など) に、クライアントのscpの要求として提示されます。

ユーザーの B2C 認証は、Microsoft Entra で保護されたアプリ、または Microsoft APIs (これらも Microsoft Entra ID によって保護されています) への認可に使用することはできません。そのため、MSAL.jsを使用する場合、<your-tenant>.b2clogin.com/.../token エンドポイントを使用して MS Graph APIのトークンを取得することはできません。

OpenID Connect のアクセス許可

上記の規則の例外は、 OpenID Connect (OIDC) アクセス許可と呼ばれる特殊なスコープセットに由来します。これには、 openid と profileが含まれます。もう 1 つの特別なアクセス許可は offline_accessであり、ユーザーに代わってアプリにリソースへのアクセスを長時間 ( 更新トークンを使用して) 付与します。 MSAL.js は、openidおよびprofile要求中に、既定でoffline_access、loginPopup()、およびloginRedirect()を提供します。

B2C テナントに対する Microsoft Entra 認証

B2C テナントに対してlogin.microsoftonline.comパラメーターを指定せずに policyID エンドポイントを使用すると、B2C テナントのMicrosoft Entra エンドポイントにヒットします。この場合にのみ、サインインしているユーザーのコンテキストを使用して、MS Graph API リソースのトークンを取得できます。

B2C とアプリケーションのアクセス許可

アプリケーションのアクセス許可 は、クライアントアプリケーションの資格情報/ID を使用して ロールベースのアクセス を指定します。これらのアクセス許可は、クライアントのrolesの要求として実行時にリソースに提示されます。

ユーザー管理シナリオ

login.microsoftonline.com エンドポイントは、B2C に固有の場合でも、ユーザーと属性の管理に関する非対話型の作業をバックグラウンドで引き続き使用できます。 MS Graph API を使用してクライアント資格情報付与を使用して B2C リソースを管理するアプリのアプリケーション登録を作成する場合は、管理アプリがアクセス許可を取得するために必要なGraph APIスコープを選択する必要があります (詳細については、ドキュメントを参照してください)。留意すべき点:

アプリケーションのアクセス許可を取得するには、(クライアント資格情報の付与を使用して) アプリケーション認証を実行する必要があります。
委任されたアクセス許可を取得するには、管理者アカウントでユーザー認証を実行する必要があります。
管理アプリは、通常、対象ユーザー タイプ 1 または タイプ 2 として登録されます ( 下記参照)。

その他のトピック

B2C とアカウント/対象ユーザーの種類

アプリケーションの登録中に、 対象ユーザーを選択するように求められます。選択した対象ユーザーの種類は、対象とする認証の種類を示します。

対象ユーザーの種類	説明	認証の種類
#1	この組織ディレクトリ内のアカウントのみ (シングルテナント)	Microsoft Entra 認証
#2	任意の組織ディレクトリ (マルチテナント) 内のアカウント。	Microsoft Entra 認証
#3	任意の組織ディレクトリまたは任意の ID プロバイダー内のアカウント	B2C 認証

独自の API のアクセストークンの取得

独自の API のアクセストークンを取得するには、次の 2 つの方法があります。

スコープとして clientId を要求します。

msal.loginRedirect({
    scopes: ["client_Id"]
});

詳細については、こちらを参照してください

アプリの登録で独自のカスタムスコープを公開し、このスコープを要求します。

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

B2C とサインアウトエクスペリエンス

サインアウトにより、Azure AD B2C を使用してユーザーのシングルサインオン状態がクリアされますが、ユーザーがソーシャル ID プロバイダー セッションからサインアウトしない可能性があります。ユーザーが後続のサインイン時に同じ ID プロバイダーを選択した場合、資格情報を入力せずに再認証する可能性があります。ここでの前提は、ユーザーがアプリケーションからサインアウトしたい場合、必ずしもソーシャルアカウント (Facebook など ) 自体からサインアウトすることを意味するとは限りません。

B2C と招待フロー

MSAL.js は、最初に要求したトークンのみを処理します。フローでサインアップに使用できるリンクをユーザーに送信する必要がある場合は、B2C サービスではなく、リンクがアプリを直接指していることを確認する必要があります。招待フローの例を次に示します。

ユーザーがアプリへのリンクをクリックする
アプリは msal.loginRedirect を呼び出し、extraQueryParameters に id_token_hint を含めます

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

アプリが B2C サービスにリダイレクトされ、ユーザーが資格情報を入力/サインアップする
B2C サービスは、応答を処理してトークンを保存するために await msal.handleRedirectPromise() を呼び出すアプリにリダイレクトします

B2C と iframe の使用

Azure AD B2C には、iframe でカスタムログイン UI をレンダリングできる埋め込みサインインエクスペリエンスが用意されています。 MSAL では既定で iframe でのリダイレクトが禁止されるため、この機能を利用するには allowRedirectInIframe 構成オプションを true に設定する必要があります。 iframe を使用する場合のその他の考慮事項については、「iframed アプリでの MSAL の使用」を参照してください

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-07-02