Skip to content

enable-authentication-azure-static-app-options.md

Latest commit

 

History

History
108 lines (76 loc) · 4.95 KB

enable-authentication-azure-static-app-options.md

File metadata and controls

108 lines (76 loc) · 4.95 KB
title Enable Azure Static Web App authentication options using Azure Active Directory B2C
description This article discusses several ways to enable Azure Static Web App authentication options.
author kengaderdus
manager CelesteDG
ms.service azure-active-directory
ms.topic reference
ms.date 01/11/2024
ms.author kengaderdus
ms.subservice b2c
ms.custom b2c-support

Enable authentication options in an Azure Static Web App by using Azure AD B2C

[!INCLUDE active-directory-b2c-end-of-sale-notice-b]

This article describes how to enable, customize, and enhance the Azure Active Directory B2C (Azure AD B2C) authentication experience for your Azure Static Web Apps.

Before you start, it's important to familiarize yourself with the Configure authentication in an Azure Static Web App by using Azure AD B2C article.

[!INCLUDE active-directory-b2c-app-integration-custom-domain]

To use a custom domain and your tenant ID in the authentication URL, follow the guidance in Enable custom domains. Open the configuration file. This file contains information about your Azure AD B2C identity provider.

In the configuration file, follow these steps:

  1. Under the customOpenIdConnectProviders locate the wellKnownOpenIdConfiguration element.
  2. Update the URL of your Azure AD B2C well-Known configuration endpoint with your custom domain and tenant ID. For more information, see Use tenant ID.

The following JSON shows the app settings before the change:

"openIdConnectConfiguration": {
    "wellKnownOpenIdConfiguration": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
    }
}

The following JSON shows the app settings after the change:

"openIdConnectConfiguration": {
    "wellKnownOpenIdConfiguration": "https://login.contoso.com/00000000-0000-0000-0000-000000000000/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
    }

[!INCLUDE active-directory-b2c-app-integration-domain-hint]

  1. Check the domain name of your external identity provider. For more information, see Redirect sign-in to a social provider.
  2. Open the configuration file.
  3. Under the login element, locate the loginParameterNames.
  4. Add the domain_hint parameter with its corresponding value, such as facebook.com.

The following code snippets demonstrate how to pass the domain hint parameter. It uses facebook.com as the attribute value.

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["domain_hint=facebook.com"]
}

[!INCLUDE active-directory-b2c-app-integration-ui-locales]

  1. Configure language customization.
  2. Open the configuration file.
  3. Under the login element, locate the loginParameterNames.
  4. Add the ui_locales parameter with its corresponding value, such as es-es.

The following code snippets demonstrate how to pass the ui_locales parameter. It uses es-es as the attribute value.

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["ui_locales=es-es"]
}

[!INCLUDE active-directory-b2c-app-integration-custom-parameters]

  1. Configure the ContentDefinitionParameters element.
  2. Open the configuration file.
  3. Under the login element, locate the loginParameterNames.
  4. Add the custom parameter, such as campaignId.

The following code snippets demonstrate how to pass the campaignId custom query string parameter. It uses germany-promotion as the attribute value.

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["campaignId=germany-promotion"]
}

Next steps