Блог

Я пытаюсь использовать e msal 2.0 (msal-browser) для своего приложения react для аутентификации с помощью пользовательской политики Azure AD B2C, у меня не было надлежащей документации или образцов для того же

Этот пример должен быть вам полезен, он использует Azure AD B2C пользовательские политики MSAL.js Поток кодов авторизации 2.0 .

 <!-- The AAD Common Endpoint Claims Provider. Matches on the existence of AAD-Common in the claimsProvider collection -->
<ClaimsProvider>
  <DisplayName>Login with AAD OIDC</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="AAD-OIDC">
      <DisplayName>Login with AAD (OIDC)</DisplayName>
      <Description>Login with AAD (OIDC)</Description>
      <Protocol Name="OpenIdConnect" />
      <OutputTokenFormat>JWT</OutputTokenFormat>
      <Metadata>
        <Item Key="METADATA">https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration</Item>
        <!-- TODO: Create multi-tenant App Registration and add client ID here -->
        <Item Key="client_id">xxxxx</Item>
        <Item Key="response_types">code</Item>
        <Item Key="scope">openid profile</Item>
        <Item Key="response_mode">form_post</Item>
        <Item Key="HttpBinding">POST</Item>
        <Item Key="UsePolicyInRedirectUri">false</Item>
        <Item Key="DiscoverMetadataByTokenIssuer">true</Item>
        <!-- TODO: Add the Tenant IDs of each Valid Token Issuer -->
        <!-- The key below allows you to specify each of the Azure AD tenants that can be used to sign in. Update the GUIDs below for each tenant. -->
        <Item Key="ValidTokenIssuerPrefixes">https://login.microsoftonline.com/xxxxx</Item>
        <Item Key="ClaimTypeOnWhichToEnable">claimsProvider</Item>
        <Item Key="ClaimValueOnWhichToEnable">AAD-Common</Item>
      </Metadata>
      <CryptographicKeys>
        <!-- TODO: Update the storage reference ID for the client secret of the Multi-Tenant App Registration Client -->
        <Key Id="client_secret" StorageReferenceId="B2C_1A_ADDMultiTenantAngularSPA" />
      </CryptographicKeys>
      <InputClaims>
        <!--pass the login_hint to Azure AD home realm discovery page to bypass email address entry again-->
        <InputClaim ClaimTypeReferenceId="signInName" PartnerClaimType="login_hint" />
        <!--Disable the prompt on the partner IdP to "Sign in with another account"-->
        <InputClaim ClaimTypeReferenceId="hsu" PartnerClaimType="hsu" DefaultValue="1" AlwaysUseDefaultValue="true" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="oid" />
        <OutputClaim ClaimTypeReferenceId="tenantId" PartnerClaimType="tid" />
        <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="given_name" />
        <OutputClaim ClaimTypeReferenceId="surName" PartnerClaimType="family_name" />
        <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name" />
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" PartnerClaimType="iss" />
        <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="email" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
      <EnabledForUserJourneys>OnItemExistenceInStringCollectionClaim</EnabledForUserJourneys>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>
  

(Переход от комментариев к ответу)

MSAL.js 2.0 в настоящее время не поддерживает Azure AD B2C для использования с потоком кода авторизации PKCE. В настоящее время Azure AD B2C рекомендует использовать неявный поток.

Пожалуйста, обратитесь Note к документу для получения дополнительной информации, и вы можете увидеть в библиотеке GitHub, что он был указан как еще недоступный для B2C.