### 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 unique object Id for subject of the claims being returned string Will hold Hello World message string Given Name string Your given name (also known as first name). TextBox Surname string Your surname (also known as family name or last name). TextBox Display Name string Your display name. TextBox ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 https://contoso.com/oauth2/token GET json ``` -------------------------------- ### 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 ```