Azure Active Directory B2C

https://learn.microsoft.com/en-us/azure/active-directory-b2c
Admin
Azure Active Directory B2C is a customer identity access management (CIAM) solution that enables...
Tokens:557,504
Snippets:6,414
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install and start the application dependencies

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/quickstart-single-page-app

Install project dependencies and start the local development server for the SPA.

```bash
npm install
npm update
npm start

```

--------------------------------

### Install Dependencies and Run Web API

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

Install project dependencies and start the web API server. The console will indicate the port the API is listening on.

```bash
npm install && npm update
node index.js
```

--------------------------------

### Install Dependencies and Run Web App (Windows)

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-python-web-app

Install the required Python packages and start the Flask development server for the web application on Windows.

```bash
py -m pip install -r requirements.txt
py -m flask run --host localhost --port 5000
```

--------------------------------

### Install Dependencies and Run Web App (Linux/macOS)

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-python-web-app

Install the required Python packages and start the Flask development server for the web application on Linux or macOS.

```bash
python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000
```

--------------------------------

### Install Dependencies and Run Angular SPA

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

Install project dependencies and start the Angular development server. The console will show the port the SPA is hosted on.

```bash
npm install && npm update
npm start
```

--------------------------------

### Clone the sample application repository

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/quickstart-single-page-app

Clone the JavaScript SPA sample application from GitHub to get started.

```bash
git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

```

--------------------------------

### Install Bootstrap for React (Optional)

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-react-spa-app

Install Bootstrap and react-bootstrap for UI styling if needed.

```bash
npm i bootstrap react-bootstrap    
```

--------------------------------

### Start Node.js Web Server

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-a-sample-node-web-app

Run this command in your terminal to start the Node.js web server for the sample application.

```bash
node index.js

```

--------------------------------

### Start Node.js Web App Server

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-in-sample-node-web-app-with-api

Navigate to the web app directory and start the Node.js server using the 'node index.js' command.

```bash
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
node index.js
```

--------------------------------

### Start Node Server

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-in-node-web-app

Starts the Node.js server to listen on the configured port.

```javascript
app.listen(process.env.SERVER_PORT, () => {
    console.log("Msal Node Auth Code Sample app listening on port !" + process.env.SERVER_PORT);
});
```

--------------------------------

### Install Dependencies and Run SPA Application

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-spa-app

These PowerShell commands are used to install the necessary npm packages and run the SPA application locally. Ensure you have Node.js and npm installed.

```powershell
npm install  
npm ./index.js
```

--------------------------------

### Start Node.js Web API Server

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-in-sample-node-web-app-with-api

Navigate to the web API directory and start the Node.js server using the 'node index.js' command.

```bash
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```

--------------------------------

### Install MSAL Browser and MSAL React

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-react-spa-app

Install the MSAL Browser and MSAL React libraries using npm.

```bash
npm i @azure/msal-browser  @azure/msal-react 
```

--------------------------------

### Example Metadata URL with Tenant Domain

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-azure-ad-single-tenant

An example of the metadata URL using a specific tenant domain name.

```text
https://login.microsoftonline.com/contoso.onmicrosoft.com/v2.0/.well-known/openid-configuration
```

--------------------------------

### Install Express dependency

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-spa-app

Install the Express.js framework, which is used for building the web server. Run this command in your project's root directory.

```bash
npm install express

```

--------------------------------

### Full Trust Framework Policy Example

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policies-series-collect-user-input

An example of a complete Trust Framework Policy file including schema, transformations, and user journeys.

```XML
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<TrustFrameworkPolicy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns="http://schemas.microsoft.com/online/cpim/schemas/2013/06" 
    PolicySchemaVersion="0.3.0.0" TenantId="yourtenant.onmicrosoft.com" 
    PolicyId="B2C_1A_ContosoCustomPolicy" 
    PublicPolicyUri="http://yourtenant.onmicrosoft.com/B2C_1A_ContosoCustomPolicy">
    
    <BuildingBlocks>
        <ClaimsSchema>
            <ClaimType Id="objectId">
                <DisplayName>unique object Id for subject of the claims being returned</DisplayName>
                <DataType>string</DataType>
            </ClaimType>
            <ClaimType Id="message">
                <DisplayName>Will hold Hello World message</DisplayName>
                <DataType>string</DataType>
            </ClaimType>

            <ClaimType Id="givenName">
                <DisplayName>Given Name</DisplayName>
                <DataType>string</DataType>
                <UserHelpText>Your given name (also known as first name).</UserHelpText>
                <UserInputType>TextBox</UserInputType>
            </ClaimType>
            <ClaimType Id="surname">
                <DisplayName>Surname</DisplayName>
                <DataType>string</DataType>
                <UserHelpText>Your surname (also known as family name or last name).</UserHelpText>
                <UserInputType>TextBox</UserInputType>
            </ClaimType>
            <ClaimType Id="displayName">
                <DisplayName>Display Name</DisplayName>
                <DataType>string</DataType>
                <UserHelpText>Your display name.</UserHelpText>
                <UserInputType>TextBox</UserInputType>
            </ClaimType>
        </ClaimsSchema>
        <ClaimsTransformations>
            <ClaimsTransformation Id="GenerateRandomObjectIdTransformation" TransformationMethod="CreateRandomString">
                <InputParameters>
                    <InputParameter Id="randomGeneratorType" DataType="string" Value="GUID"/>
                </InputParameters>
                <OutputClaims>
                    <OutputClaim ClaimTypeReferenceId="objectId" TransformationClaimType="outputClaim"/>
                </OutputClaims>
            </ClaimsTransformation>

            <ClaimsTransformation Id="CreateDisplayNameTransformation" TransformationMethod="FormatStringMultipleClaims">
                <InputClaims>
                    <InputClaim ClaimTypeReferenceId="givenName" TransformationClaimType="inputClaim1"/>
                    <InputClaim ClaimTypeReferenceId="surname" TransformationClaimType="inputClaim2"/>
                </InputClaims>
                <InputParameters>
                    <InputParameter Id="stringFormat" DataType="string" Value="{0} {1}"/>
                </InputParameters>
                <OutputClaims>
                    <OutputClaim ClaimTypeReferenceId="displayName" TransformationClaimType="outputClaim"/>
                </OutputClaims>
            </ClaimsTransformation>

```

--------------------------------

### Navigate to Sample Directory

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-python-web-app

Change your current directory to the root of the cloned sample web application.

```console
cd ms-identity-python-webapp
```

--------------------------------

### Navigate to Sample App Directory

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-a-sample-node-web-app

Change your console directory to the root of the cloned Node.js sample application.

```bash
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```

--------------------------------

### Example Error Response URL

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/openid-connect

This URL demonstrates an example of an HTTP GET request for an error response from an OpenID Connect authentication flow. It includes parameters like error, error_description, and state for handling authentication failures.

```HTTP
GET https://jwt.ms/#
error=access_denied
&error_description=AADB2C90091%3a+The+user+has+cancelled+entering+self-asserted+information.%0d%0aCorrelation+ID%3a+xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx%0d%0aTimestamp%3a+xxxx-xx-xx+xx%3a23%3a27Z%0d%0a
&state=arbitrary_data_you_can_receive_in_the_response
```

--------------------------------

### Clone Sample iOS App Repository

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-ios-app

Clone the native MSAL iOS sample application from GitHub to get started.

```bash
git clone https://github.com/Azure-Samples/active-directory-b2c-ios-swift-native-msal

```

--------------------------------

### Initialize Node.js Project and Install Express

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-in-node-web-app-with-api

Initializes a new Node.js project and installs the Express framework. This is a foundational step for building a web API.

```bash
npm init -y
npm install express
```

--------------------------------

### Add using declarations to Startup.cs

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-web-app-with-api

Include necessary using declarations at the beginning of the Startup.cs class to support authentication and identity management.

```csharp
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

```

--------------------------------

### OAuth Redirect URI with Tenant ID

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-domain

An example of an OAuth redirect URI using a tenant ID GUID instead of the tenant name.

```HTTP
https://login.contoso.com/11111111-1111-1111-1111-111111111111/oauth2/authresp

```

--------------------------------

### StringSubstring Example

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/string-transformations

Extracts the first two characters from a phone number string to get the country prefix. Use this when you need to isolate a specific part of a string claim.

```xml
<ClaimsTransformation Id="GetPhonePrefix" TransformationMethod="StringSubstring">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="phoneNumber" TransformationClaimType="inputClaim" />
  </InputClaims>
<InputParameters>
  <InputParameter Id="startIndex" DataType="int" Value="0" />
  <InputParameter Id="length" DataType="int" Value="2" />
</InputParameters>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="phonePrefix" TransformationClaimType="outputClaim" />
  </OutputClaims>
</ClaimsTransformation>
```

--------------------------------

### Successful Implicit Flow Response

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/implicit-flow-single-page-application

This example shows a successful HTTP GET request response using response_mode=fragment, which includes an access token, token type, expiration, and scope.

```HTTP
GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier
&token_type=Bearer
&expires_in=3599
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read

```

--------------------------------

### Successful Authorization Code Response

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/authorization-code-flow

This is an example of a successful HTTP GET request to the redirect URI, containing the authorization code and the state parameter. The authorization code is used to request an access token and is short-lived.

```HTTP
GET urn:ietf:wg:oauth:2.0:oob?
code=AwABAAAAvPM1KaPlrEqdFSBzjqfTGBCmLdgfSTLEMPGYuNHSUYBrq...        // the authorization_code, truncated
&state=arbitrary_data_you_can_receive_in_the_response                // the value provided in the request

```

--------------------------------

### Complete Configure Function with Authentication

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-web-api

This is the complete Configure function in Startup.cs after adding the authentication middleware. Ensure it's placed correctly within the application's pipeline.

```csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();
    
    // Add the following line 
    app.UseAuthentication();
    // End of the block you add
    
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}
```

--------------------------------

### Example Authorization Endpoint Request

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/oauth2-technical-profile

This GET request demonstrates how Azure AD B2C directs a user to the OAuth2 identity provider's /authorize endpoint, including essential parameters for acquiring an access token.

```HTTP
GET https://login.contoso.com/oauth/v2/authorization?
client_id=12345
&response_type=code
&response_mode=query
&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob
&scope=profile%20offline_access
&redirect_uri=https%3a%2f%2fabrikam.b2clogin.com%2fabrikam.onmicrosoft.com%2foauth2%2fauthresp
&state=...

```

--------------------------------

### Error Response in Authorization Code Flow

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/authorization-code-flow

This is an example of an HTTP GET request to the redirect URI indicating an error. It includes an error code, a description of the error, and the state parameter. Applications should handle these errors appropriately.

```HTTP
GET urn:ietf:wg:oauth:2.0:oob?
error=access_denied
&error_description=The+user+has+cancelled+entering+self-asserted+information
&state=arbitrary_data_you_can_receive_in_the_response

```

--------------------------------

### Generate JSON with Dynamic and Static Values

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/json-transformations

This example demonstrates generating a JSON payload where array elements are populated using both dynamic input claims and static input parameters. Ensure array indices are sequential starting from zero.

```XML
<ClaimsTransformation Id="GenerateJsonPayload" TransformationMethod="GenerateJson">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="mailToName1" TransformationClaimType="emails.0.name" />
    <InputClaim ClaimTypeReferenceId="mailToAddress1" TransformationClaimType="emails.0.address" />
    <InputClaim ClaimTypeReferenceId="mailToName2" TransformationClaimType="emails.1.name" />
    <InputClaim ClaimTypeReferenceId="mailToAddress2" TransformationClaimType="emails.1.address" />
  </InputClaims>
  <InputParameters>
    <InputParameter Id="values.0.app" DataType="string" Value="Mobile app" />
    <InputParameter Id="values.0.appId" DataType="string" Value="123" />
    <InputParameter Id="values.1.program" DataType="string" Value="Holidays" />
    <InputParameter Id="values.2.color" DataType="string" Value="Yellow" />
    <InputParameter Id="values.2.language" DataType="string" Value="Spanish" />
    <InputParameter Id="values.2.logo" DataType="string" Value="contoso.png" />
    <InputParameter Id="values.2.background" DataType="string" Value="White" />
  </InputParameters>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="result" TransformationClaimType="outputClaim" />
  </OutputClaims>
</ClaimsTransformation>
```

--------------------------------

### Initialize a new Node.js project

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-spa-app

Use this command to create a package.json file for your Node.js application. Accept the default values when prompted.

```bash
npm init

```

--------------------------------

### Start Node.js Server

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-in-node-web-app

Starts the Node.js server and logs a message indicating the port it's listening on. Ensure the SERVER_PORT environment variable is set.

```javascript
app.listen(process.env.SERVER_PORT, () => {
    console.log(`Msal Node Auth Code Sample app listening on port !` + process.env.SERVER_PORT);
});

```

--------------------------------

### Clone Sample Application

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/multiple-token-endpoints

Download the sample application code to follow along with the configuration steps.

```git
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git
```

--------------------------------

### Install Node.js App Dependencies

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-a-sample-node-web-app

Install and update the application dependencies using npm.

```bash
npm install && npm update
```

--------------------------------

### Navigate to Web App Directory

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-in-sample-node-web-app-with-api

Change the console directory to the location of the Node.js sample app.

```bash
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
```

--------------------------------

### Clone the Sample Web Application

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-wpf-desktop-app

Clone the sample web application from the GitHub repository using Git.

```bash
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

```

--------------------------------

### Configure Token Endpoint Metadata for HTTP GET Binding with JSON Response

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/oauth2-technical-profile

Configure the AccessTokenEndpoint, HttpBinding to GET, and AccessTokenResponseFormat to JSON for identity providers that require HTTP GET requests and return JSON responses.

```XML
<Item Key="AccessTokenEndpoint">https://contoso.com/oauth2/token</Item>
<Item Key="HttpBinding">GET</Item>
<Item Key="AccessTokenResponseFormat">json</Item>

```

--------------------------------

### Navigate to Single-Page App Directory

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-spa-app

Change to the directory containing the JavaScript SPA sample.

```bash
cd ms-identity-b2c-javascript-spa
```

--------------------------------

### Example JSON Payload Generated

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policies-series-call-rest-api

This is an example of the JSON object generated by the GenerateJson claims transformation.

```JSON
{
   "customerEntity":{
      "email":"john.s@contoso.com",
      "userObjectId":"aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
      "firstName":"John",
      "lastName":"Smith",
      "accessCode":"88888",
      "role":{
         "name":"Administrator",
         "id": 1
      }
   }
}
```

--------------------------------

### Install React Router DOM v5

Source: https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-react-spa-app

Install a specific version of react-router-dom for web application routing.

```bash
npm i react-router-dom@5.3.3
```
Tokens:
Raw