You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Use MSAL with Azure Active Directory B2CLearn | Azure
3
3
titleSuffix: Microsoft identity platform
4
-
description: Microsoft Authentication Library (MSAL) enables applications to interoperate with Azure AD B2C and acquire tokens to call secured Web APIs. These web APIs can be Microsoft Graph, other Microsoft APIs, web APIs from others, or your own web API.
4
+
description: Microsoft Authentication Library for JavaScript (MSAL.js) enables applications to work with Azure AD B2C and acquire tokens to call secured Web APIs. These web APIs can be Microsoft Graph, other Microsoft APIs, web APIs from others, or your own web API.
5
5
services: active-directory
6
6
author: negoe
7
7
manager: CelesteDG
@@ -17,105 +17,125 @@ ms.custom: aaddev
17
17
#Customer intent: As an application developer, I want to learn about Microsoft Authentication Library so that I can decide if this platform meets my application development needs and requirements.
18
18
---
19
19
20
-
# Use Microsoft Authentication Library to interoperate with Azure Active Directory B2C
20
+
# Use Microsoft Authentication Library for JavaScript to work with Azure Active Directory B2C
21
21
22
-
Microsoft Authentication Library (MSAL) enables application developers to authenticate users with social and local identities by using [Azure Active Directory B2C (Azure AD B2C)](https://docs.microsoft.com/azure/active-directory-b2c/). Azure AD B2C is an identity management service. By using it, you can customize and control how customers sign up, sign in, and manage their profiles when they use your applications.
22
+
[Microsoft Authentication Library for JavaScript (MSAL.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) enables JavaScript developers to authenticate users with social and local identities using [Azure Active Directory B2C (Azure AD B2C)](https://docs.microsoft.com/azure/active-directory-b2c/). By using Azure AD B2C as an identity management service, you can customize and control how customers sign up, sign in, and manage their profiles when they use your applications.
23
23
24
-
Azure AD B2C also enables you to brand and customize the UI of your applications to provide a seamless experience to your customers.
24
+
Azure AD B2C also enables you to brand and customize the UI of your applications during the authentication process in order to provide a seamless experience to your customers.
25
25
26
-
This tutorial demonstrates how to use MSAL to interoperate with Azure AD B2C.
26
+
This article demonstrates how to use MSAL.js to work with Azure AD B2C and summarizes key points that you should be aware of. For a complete discussion and tutorial, please consult [Azure AD B2C Documentation](https://docs.microsoft.com/azure/active-directory-b2c/overview).
27
27
28
28
## Prerequisites
29
29
30
-
If you haven't already created your own [Azure AD B2C tenant](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant), create one now. You also can use an existing Azure AD B2C tenant.
30
+
If you haven't already created your own [Azure AD B2C tenant](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant), start with creating one now (you also can use an existing Azure AD B2C tenant if you have one already).
31
31
32
-
## JavaScript
32
+
This demonstration contains two parts:
33
33
34
-
The following steps demonstrate how a single-page application can use Azure AD B2C to sign up, sign in, and call a protected web API.
34
+
- how to protect a web API.
35
+
- how to register a single-page application to authenticate and call *that* web API.
36
+
37
+
## Node.js Web API
38
+
39
+
> [!NOTE]
40
+
> At this moment, MSAL.js for Node is still in development (see the [roadmap](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki#roadmap)). In the meantime, we suggest using [passport-azure-ad](https://github.com/AzureAD/passport-azure-ad), an authentication library for Node.js developed and supported by Microsoft.
41
+
42
+
The following steps demonstrate how a **web API** can use Azure AD B2C to protect itself and expose selected scopes to a client application.
35
43
36
44
### Step 1: Register your application
37
45
38
-
To implement authentication, you first need to register your application. See [Register your application](https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp#step-4-register-your-own-web-application-with-azure-ad-b2c) for detailed steps.
46
+
To protect your web API with Azure AD B2C, you first need to register it. See [Register your application](https://docs.microsoft.com/azure/active-directory-b2c/add-web-application?tabs=applications) for detailed steps.
39
47
40
48
### Step 2: Download the sample application
41
49
42
50
Download the sample as a zip file, or clone it from GitHub:
1. Configure the sample with the client ID and key that you recorded earlier while registering your application. Change the following lines of code by replacing the values with the names of your directory and APIs:
60
+
2. Configure the sample with the application credentials that you obtained earlier while registering your application. Change the following lines of code by replacing the values with the names of your clientID, host, tenantId and policy name.
53
61
54
-
```javascript
55
-
// The current application coordinates were pre-registered in a B2C tenant.
62
+
```JavaScript
63
+
constclientID="<Application ID for your Node.js Web API - found on Properties page in Azure portal e.g. 93733604-cc77-4a3c-a604-87084dd55348>";
64
+
constb2cDomainHost="<Domain of your B2C host eg. fabrikamb2c.b2clogin.com>";
65
+
consttenantId="<your-tenant-ID>.onmicrosoft.com"; // Alternatively, you can use your Directory (tenant) ID (GUID)
66
+
constpolicyName="<Name of your sign in / sign up policy, e.g. B2C_1_signupsignin1>";
The following steps demonstrate how a **single-page application** can use Azure AD B2C to sign up, sign in, and call a protected web API.
76
+
77
+
### Step 1: Register your application
78
+
79
+
To implement authentication, you first need to register your application. See [Register your application](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-register-applications) for detailed steps.
80
+
81
+
### Step 2: Download the sample application
77
82
78
-
The name of the [user flow](https://docs.microsoft.com/azure/active-directory-b2c/active-directory-b2c-reference-policies) in this tutorial is **B2C_1_signupsignin1**. If you're using a different user flow name, set the **authority** value to that name.
83
+
Download the sample as a zip file, or clone it from GitHub:
79
84
80
-
### Step 4: Configure your application to use `b2clogin.com`
You can use `b2clogin.com` in place of `login.microsoftonline.com` as a redirect URL. You do so in your Azure AD B2C application when you set up an identity provider for sign-up and sign-in.
89
+
### Step 3: Configure authentication
83
90
84
-
Use of `b2clogin.com` in the context of `https://your-tenant-name.b2clogin.com/your-tenant-guid` has the following effects:
91
+
There are two points of interest in configuring your application:
85
92
86
-
-Microsoft services consume less space in the cookie header.
87
-
-Your URLs no longer include a reference to Microsoft. For example, your Azure AD B2C application probably refers to `login.microsoftonline.com`.
93
+
-Configure API endpoint and exposed scopes
94
+
-Configure authentication parameters and token scopes
88
95
89
-
To use `b2clogin.com`, you need to update the configuration of your application.
96
+
1. Open the `apiConfig.js` file in the sample.
90
97
91
-
- Set the **validateAuthority** property to `false`, so that redirects using `b2clogin.com` can occur.
98
+
2. Configure the sample with the parameters that you obtained earlier while registering your web API. Change the following lines of code by replacing the values with the address of your web API and exposed scopes.
92
99
93
-
The following example shows how you might set the property:
100
+
```javascript
101
+
// The current application coordinates were pre-registered in a B2C tenant.
102
+
constapiConfig= {
103
+
b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"], //API scopes you exposed during api registration
4. Configure the sample with the parameters that you obtained earlier while registering your single-page application. Change the following lines of code by replacing the values with your ClientId, authority metadata and token request scopes.
cacheLocation:"localStorage", // This configures where your cache will be stored
122
+
storeAuthStateInCookie:false// Set this to "true" to save cache in cookies
123
+
}
124
+
};
110
125
111
-
> [!NOTE]
112
-
> Your Azure AD B2C application probably refers to `login.microsoftonline.com` in several places, such as your user flow references and token endpoints. Make sure that your authorization endpoint, token endpoint, and issuer have been updated to use `your-tenant-name.b2clogin.com`.
126
+
// Add here scopes for id token to be used at the MS Identity Platform endpoint
127
+
constloginRequest= {
128
+
scopes: ["openid", "profile"],
129
+
};
130
+
```
113
131
114
-
Follow [this MSAL JavaScript sample](https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp#single-page-application-built-on-msaljs-with-azure-ad-b2c) on how to use the MSAL Preview for JavaScript (MSAL.js). The sample gets an access token and calls an API secured by Azure AD B2C.
132
+
For more information, check out this [JavaScript B2C single-page application sample](https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp).
0 commit comments