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
Copy file name to clipboardExpand all lines: articles/active-directory-b2c/implicit-flow-single-page-application.md
+8-6Lines changed: 8 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,13 +16,13 @@ ms.subservice: B2C
16
16
17
17
# Single-page sign in using the OAuth 2.0 implicit flow in Azure Active Directory B2C
18
18
19
-
Many modern applications have a single-page app front end that is written primarily in JavaScript. Often, the app is written by using a framework like React, Angular, or Vue.js. Single-page apps and other JavaScript apps that run primarily in a browser have some additional challenges for authentication:
19
+
Many modern applications have a single-page app (SPA) front end that is written primarily in JavaScript. Often, the app is written by using a framework like React, Angular, or Vue.js. SPAs and other JavaScript apps that run primarily in a browser have some additional challenges for authentication:
20
20
21
21
- The security characteristics of these apps are different from traditional server-based web applications.
22
22
- Many authorization servers and identity providers do not support cross-origin resource sharing (CORS) requests.
23
23
- Full-page browser redirects away from the app can be invasive to the user experience.
24
24
25
-
The recommended way of supporting single-page applications is [OAuth 2.0 Authorization code flow (with PKCE)](./authorization-code-flow.md).
25
+
The recommended way of supporting SPAs is [OAuth 2.0 Authorization code flow (with PKCE)](./authorization-code-flow.md).
26
26
27
27
Some frameworks, like [MSAL.js 1.x](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core), only support the implicit grant flow. In these cases, Azure Active Directory B2C (Azure AD B2C) supports the OAuth 2.0 authorization implicit grant flow. The flow is described in [section 4.2 of the OAuth 2.0 specification](https://tools.ietf.org/html/rfc6749). In implicit flow, the app receives tokens directly from the Azure Active Directory (Azure AD) authorize endpoint, without any server-to-server exchange. All authentication logic and session handling is done entirely in the JavaScript client with either a page redirect or a pop-up box.
At this point, the user is asked to complete the policy's workflow. The user might have to enter their username and password, sign in with a social identity, sign up for the directory, or any other number of steps. User actions depend on how the user flow is defined.
66
66
67
-
After the user completes the user flow, Azure AD returns a response to your app at the value you used for `redirect_uri`. It uses the method specified in the `response_mode` parameter. The response is exactly the same for each of the user action scenarios, independent of the user flow that was executed.
67
+
After the user completes the user flow, Azure AD B2C returns a response to your app at the value you used for `redirect_uri`. It uses the method specified in the `response_mode` parameter. The response is exactly the same for each of the user action scenarios, independent of the user flow that was executed.
68
68
69
69
### Successful response
70
70
A successful response that uses `response_mode=fragment` and `response_type=id_token+token` looks like the following, with line breaks for legibility:
@@ -122,7 +122,9 @@ One of the properties of this configuration document is the `jwks_uri`. The valu
To determine which user flow was used to sign an ID token (and where to fetch the metadata from), you have two options. First, the user flow name is included in the `acr` claim in `id_token`. For information about how to parse the claims from an ID token, see the [Azure AD B2C token reference](tokens-overview.md). Your other option is to encode the user flow in the value of the `state` parameter when you issue the request. Then, decode the `state` parameter to determine which user flow was used. Either method is valid.
125
+
To determine which user flow was used to sign an ID token (and where to fetch the metadata from), you have two options:
126
+
- The user flow name is included in the `acr` claim in `id_token`. For information about how to parse the claims from an ID token, see the [Azure AD B2C token reference](tokens-overview.md).
127
+
- Encode the user flow in the value of the `state` parameter when you issue the request. Then, decode the `state` parameter to determine which user flow was used. Either method is valid.
126
128
127
129
After you've acquired the metadata document from the OpenID Connect metadata endpoint, you can use the RSA-256 public keys (located at this endpoint) to validate the signature of the ID token. There might be multiple keys listed at this endpoint at any given time, each identified by a `kid`. The header of `id_token` also contains a `kid` claim. It indicates which of these keys was used to sign the ID token. For more information, including learning about [validating tokens](tokens-overview.md), see the [Azure AD B2C token reference](tokens-overview.md).
128
130
<!--TODO: Improve the information on this-->
@@ -146,7 +148,7 @@ After you have validated the ID token, you can begin a session with the user. In
146
148
## Get access tokens
147
149
If the only thing your web apps needs to do is execute user flows, you can skip the next few sections. The information in the following sections is applicable only to web apps that need to make authenticated calls to a web API, and which are protected by Azure AD B2C.
148
150
149
-
Now that you've signed the user into your single-page app, you can get access tokens for calling web APIs that are secured by Azure AD. Even if you have already received a token by using the `token` response type, you can use this method to acquire tokens for additional resources without redirecting the user to sign in again.
151
+
Now that you've signed the user into your SPA, you can get access tokens for calling web APIs that are secured by Azure AD. Even if you have already received a token by using the `token` response type, you can use this method to acquire tokens for additional resources without redirecting the user to sign in again.
150
152
151
153
In a typical web app flow, you would make a request to the `/token` endpoint. However, the endpoint does not support CORS requests, so making AJAX calls to get a refresh token is not an option. Instead, you can use the implicit flow in a hidden HTML iframe element to get new tokens for other web APIs. Here's an example, with line breaks for legibility:
152
154
@@ -241,4 +243,4 @@ GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/
241
243
242
244
## Next steps
243
245
244
-
See the code sample: [Sign-in with Azure AD B2C in a JavaScript single-page application](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-core-samples/VanillaJSTestApp/app/b2c).
246
+
See the code sample: [Sign-in with Azure AD B2C in a JavaScript SPA](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-core-samples/VanillaJSTestApp/app/b2c).
Copy file name to clipboardExpand all lines: articles/active-directory-b2c/overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ ms.subservice: B2C
15
15
16
16
# What is Azure Active Directory B2C?
17
17
18
-
Azure Active Directory Business-to-consumer (Azure AD B2C) provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs.
18
+
Azure Active Directory B2C provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs.
19
19
20
20

In nearly all OAuth and OpenID Connect flows, four parties are involved in the exchange:
38
38
39
-

39
+
40
+
41
+
42
+
:::image type="content" source="./media/protocols-overview/protocols_roles.png" alt-text="Diagram showing the four OAuth 2.0 Roles.":::
40
43
41
44
* The **authorization server** is the Azure AD endpoint. It securely handles anything related to user information and access. It also handles the trust relationships between the parties in a flow. It is responsible for verifying the user's identity, granting and revoking access to resources, and issuing tokens. It is also known as the identity provider.
Copy file name to clipboardExpand all lines: articles/active-directory-b2c/quickstart-single-page-app.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,18 +16,20 @@ ms.subservice: B2C
16
16
17
17
# Quickstart: Set up sign in for a single-page app using Azure Active Directory B2C
18
18
19
-
Azure Active Directory B2C (Azure AD B2C) provides cloud identity management to keep your application, business, and customers protected. Azure AD B2C enables your applications to authenticate to social accounts, and enterprise accounts using open standard protocols. In this quickstart, you use a single-page application to sign in using a social identity provider and call an Azure AD B2C protected web API.
19
+
Azure Active Directory B2C (Azure AD B2C) provides cloud identity management to keep your application, business, and customers protected. Azure AD B2C enables your applications to authenticate to social accounts, and enterprise accounts using open standard protocols.
@@ -38,7 +40,8 @@ Azure Active Directory B2C (Azure AD B2C) provides cloud identity management to
38
40
1. Start the server by running the following commands from the Node.js command prompt:
39
41
40
42
```console
41
-
npm install && npm update
43
+
npm install
44
+
npm update
42
45
npm start
43
46
```
44
47
@@ -71,19 +74,16 @@ Select **Call API** to have your display name returned from the web API as a JSO
71
74
72
75
The sample single-page application includes an access token in the request to the protected web API resource.
73
76
74
-
## Clean up resources
77
+
<!-- ## Clean up resources
75
78
76
-
You can use your Azure AD B2C tenant if you plan to try other Azure AD B2C quickstarts or tutorials. When no longer needed, you can [delete your Azure AD B2C tenant](faq.yml#how-do-i-delete-my-azure-ad-b2c-tenant-).
79
+
You can use your Azure AD B2C tenant if you plan to try other Azure AD B2C quickstarts or tutorials. When no longer needed, you can [delete your Azure AD B2C tenant](faq.yml#how-do-i-delete-my-azure-ad-b2c-tenant-).-->
77
80
78
81
## Next steps
79
82
80
-
In this quickstart, you used a sample single-page application to:
83
+
<!---In this quickstart, you used a sample single-page application to:
81
84
82
85
- Sign in with a social identity provider
83
86
- Create an Azure AD B2C user account (created automatically at sign-in)
84
-
- Call a web API protected by Azure AD B2C
85
-
86
-
Get started creating your own Azure AD B2C tenant.
87
+
- Call a web API protected by Azure AD B2C -->
87
88
88
-
> [!div class="nextstepaction"]
89
-
> [Create an Azure Active Directory B2C tenant in the Azure portal](tutorial-create-tenant.md)
89
+
- Get started creating your own [Azure Active Directory B2C tenant in the Azure portal](tutorial-create-tenant.md)
0 commit comments