Configuring Entra External ID for React (MSAL) and ASP.NET Core API with Social, Organizational, and Personal Accounts - Stack O

admin管理员组

文章数量:1379719

I'm trying to set up a modern authentication flow with Entra External ID (the newer CIAM replacement for Azure AD B2C) for my React web app (using the MSAL library) and an ASP.NET Core Web API. Both apps are registered in my Entra External ID tenant with supported account types set to:

• Accounts in any anizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)

I also want to enable social identities (e.g., Google, Facebook) via the External ID configuration.

My current configuration in backend appsettings.Development.json is:

{
  "Frontend": {
    "AadClientId": "206b2071-c4ea-421a-81fc-000000"
  },
  "Authentication": {
    "AzureAd": {
      "TenantId": "992b716b-8f0e-48df-af83-000000",
      "Instance": "/",
      "Scopes": "access_as_user",
      "ClientId": "87480de7-9960-49b9-8cf7-000000",
      "Audience": "87480de7-9960-49b9-8cf7-000000"
    },
    "Type": "AzureAd"
  }
}

My react frontend will receive this json instance from /authConfig anonimous endpoint from my backend (and this will be :

{
    "authType": "AzureAd",
    "aadAuthority": ";,
    "aadClientId": "206b2071-c4ea-421a-81fc-000000",
    "aadApiScope": "api://87480de7-9960-49b9-8cf7-000000/access_as_user"
}

My react will configure Msal like this:

const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
    auth: {
        clientId: authConfig.aadClientId,
        authority: authConfig.aadAuthority,
        redirectUri: window.origin,
    },

getMsalConfig will be used like this (see link to webapp/src/index.tsx below)

msalInstance = new PublicClientApplication(AuthHelper.getMsalConfig(authConfig));
await msalInstance.initialize();

I am trying to make this app using all possible accounts I mentioned above.

.tsx

My questions are:

1. What modifications or settings do I need to ensure that the authentication flow supports anizational accounts, personal Microsoft accounts, and social identities in this Entra External ID scenario?
2. Are there any specific endpoints, policies, or configuration changes needed in both the frontend (React/MSAL) and the ASP.NET Core API to achieve this unified authentication flow?

Any guidance or reference articles on how to configure Entra External ID for this scenario would be greatly appreciated!

I'm trying to set up a modern authentication flow with Entra External ID (the newer CIAM replacement for Azure AD B2C) for my React web app (using the MSAL library) and an ASP.NET Core Web API. Both apps are registered in my Entra External ID tenant with supported account types set to:

• Accounts in any anizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)

I also want to enable social identities (e.g., Google, Facebook) via the External ID configuration.

My current configuration in backend appsettings.Development.json is:

{
  "Frontend": {
    "AadClientId": "206b2071-c4ea-421a-81fc-000000"
  },
  "Authentication": {
    "AzureAd": {
      "TenantId": "992b716b-8f0e-48df-af83-000000",
      "Instance": "https://myexternalid.ciamlogin/",
      "Scopes": "access_as_user",
      "ClientId": "87480de7-9960-49b9-8cf7-000000",
      "Audience": "87480de7-9960-49b9-8cf7-000000"
    },
    "Type": "AzureAd"
  }
}

My react frontend will receive this json instance from /authConfig anonimous endpoint from my backend (and this will be :

{
    "authType": "AzureAd",
    "aadAuthority": "https://myexternalid.ciamlogin/992b716b-8f0e-48df-af83-000000",
    "aadClientId": "206b2071-c4ea-421a-81fc-000000",
    "aadApiScope": "api://87480de7-9960-49b9-8cf7-000000/access_as_user"
}

My react will configure Msal like this:

const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
    auth: {
        clientId: authConfig.aadClientId,
        authority: authConfig.aadAuthority,
        redirectUri: window.origin,
    },

getMsalConfig will be used like this (see link to webapp/src/index.tsx below)

msalInstance = new PublicClientApplication(AuthHelper.getMsalConfig(authConfig));
await msalInstance.initialize();

I am trying to make this app using all possible accounts I mentioned above.

https://github/microsoft/chat-copilot

https://github/microsoft/chat-copilot/blob/main/webapp/src/index.tsx

My questions are:

1. What modifications or settings do I need to ensure that the authentication flow supports anizational accounts, personal Microsoft accounts, and social identities in this Entra External ID scenario?
2. Are there any specific endpoints, policies, or configuration changes needed in both the frontend (React/MSAL) and the ASP.NET Core API to achieve this unified authentication flow?

Any guidance or reference articles on how to configure Entra External ID for this scenario would be greatly appreciated!

• asp-core
• msal-react
• microsoft-entra-external-id

Share Improve this question Follow edited Mar 30 at 18:19 Lex Li 63.4k1111 gold badges124124 silver badges161161 bronze badges asked Mar 27 at 22:50 RadRad 96322 gold badges1616 silver badges3232 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The only changes you need are in the tenant.

Refer to this.

The other identity providers are on the menu on the left-hand side.

本文标签：