Skip to content

Commit 84d708c

Browse files
derisenderisen
committed
update readme
1 parent e7cd28e commit 84d708c

File tree

2 files changed

+102
-63
lines changed

2 files changed

+102
-63
lines changed

‎1-Authentication/2-sign-in-b2c/AppCreationScripts/sample.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"Sample": {
33
"Author": "derisen",
44
"Title": "Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C",
5-
"Level": 200,
6-
"Client": "React SPA",
5+
"Level": 100,
6+
"Client": "Angular SPA",
77
"RepositoryUrl": "ms-identity-javascript-angular-tutorial",
88
"Endpoint": "AAD v2.0",
99
"Description": "Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C",

‎1-Authentication/2-sign-in-b2c/README.md‎

Lines changed: 100 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,44 @@
1+
---
2+
page_type: sample
3+
name: Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C
4+
description: Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C
5+
languages:
6+
- javascript
7+
- typescript
8+
products:
9+
- azure-active-directory-b2c
10+
- msal-js
11+
- msal-angular
12+
urlFragment: ms-identity-javascript-angular-tutorial
13+
extensions:
14+
- services: ms-identity
15+
- platform: JavaScript
16+
- endpoint: AAD v2.0
17+
- level: 100
18+
- client: Angular SPA
19+
- service:
20+
---
21+
122
# Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C
223

3-
1. [Overview](#overview)
4-
1. [Scenario](#scenario)
5-
1. [Contents](#contents)
6-
1. [Prerequisites](#prerequisites)
7-
1. [Setup](#setup)
8-
1. [Registration](#registration)
9-
1. [Running the sample](#running-the-sample)
10-
1. [Explore the sample](#explore-the-sample)
11-
1. [About the code](#about-the-code)
12-
1. [More information](#more-information)
13-
1. [Community Help and Support](#community-help-and-support)
14-
1. [Contributing](#contributing)
24+
* [Overview](#overview)
25+
* [Scenario](#scenario)
26+
* [Contents](#contents)
27+
* [Prerequisites](#prerequisites)
28+
* [Explore the sample](#explore-the-sample)
29+
* [Troubleshooting](#troubleshooting)
30+
* [About the code](#about-the-code)
31+
* [Next Steps](#next-steps)
32+
* [Contributing](#contributing)
1533

1634
## Overview
1735

1836
This sample demonstrates an Angular single-page application (SPA) that lets users sign-in with [Azure AD B2C](https://azure.microsoft.com/services/active-directory/external-identities/b2c/) using the [Microsoft Authentication Library for Angular](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular) (MSAL Angular).
1937

2038
Here you'll learn about [ID Tokens](https://docs.microsoft.com/azure/active-directory-b2c/tokens-overview#token-types), [OIDC Scopes](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes), [external identity providers](https://docs.microsoft.com/azure/active-directory-b2c/technical-overview#external-identity-providers), [consumer social accounts](https://docs.microsoft.com/azure/active-directory-b2c/technical-overview#consumer-accounts), [single-sign on (SSO)](https://docs.microsoft.com/azure/active-directory-b2c/session-overview), **silent requests** and more.
2139

40+
> :information_source: See the community call: [Deep dive on using MSAL.js to integrate Angular single-page applications with Azure Active Directory](https://www.youtube.com/watch?v=EJey9KP1dZA)
41+
2242
## Scenario
2343

2444
1. The client Angular SPA uses **MSAL Angular** to obtain an ID Token from **Azure AD B2C**.
@@ -32,24 +52,28 @@ Here you'll learn about [ID Tokens](https://docs.microsoft.com/azure/active-dire
3252
|---------------------------------|-----------------------------------------------------------|
3353
| `src/app/auth-config.ts` | Authentication parameters reside here. |
3454
| `src/app/app.module.ts` | MSAL Angular configuration parameters reside here. |
35-
| `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
55+
| `src/app/app-routing.module.ts` | Configure your MSAL Guard here. |
3656

3757
## Prerequisites
3858

39-
- An **Azure AD B2C** tenant. For more information see: [How to get an Azure AD B2C tenant](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant)
40-
- A user account in your **Azure AD B2C** tenant.
59+
* [Node.js](https://nodejs.org/en/download/) must be installed to run this sample.
60+
* [Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
61+
* [VS Code Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) extension is recommended for interacting with Azure through VS Code Interface.
62+
* A modern web browser. This sample uses **ES6** conventions and will not run on **Internet Explorer**.
63+
* An **Azure AD B2C** tenant. For more information, see: [How to get an Azure AD B2C tenant](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant)
64+
* A user account in your **Azure AD B2C** tenant.
4165

42-
## Setup
66+
## Setup the sample
4367

4468
### Step 1: Clone or download this repository
4569

4670
From your shell or command line:
4771

4872
```console
49-
git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git
73+
git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git
5074
```
5175

52-
or download and extract the repository .zip file.
76+
or download and extract the repository *.zip* file.
5377

5478
> :warning: To avoid path length limitations on Windows, we recommend cloning into a directory near the root of your drive.
5579
@@ -61,38 +85,42 @@ or download and extract the repository .zip file.
6185
npm install
6286
```
6387

64-
## Registration
88+
### Step 3: Register the sample application in your tenant
6589

66-
:warning: This sample comes with a pre-registered application for demo purposes. If you would like to use your own **Azure AD B2C** tenant and application, follow the steps below to register and configure the application on **Azure portal**. Otherwise, continue with the steps for [Running the sample](#running-the-sample).
90+
:warning: This sample comes with a pre-registered application for demo purposes. If you would like to use your own **Azure AD B2C** tenant and application, follow the steps below to register and configure the application on **Azure portal**. Otherwise, continue with the steps for [Explore the sample](#explore-the-sample).
6791

68-
### Choose the Azure AD tenant where you want to create your applications
92+
#### Choose the Azure AD B2C tenant where you want to create your applications
6993

7094
As a first step you'll need to:
7195

7296
1. Sign in to the [Azure portal](https://portal.azure.com).
7397
1. If your account is present in more than one Azure AD B2C tenant, select your profile at the top right corner in the menu on top of the page, and then **switch directory** to change your portal session to the desired Azure AD B2C tenant.
7498

75-
### Create User Flows and Custom Policies
99+
#### Create User Flows and Custom Policies
76100

77101
Please refer to: [Tutorial: Create user flows in Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-user-flows)
78102

79-
### Add External Identity Providers
103+
#### Add External Identity Providers
80104

81105
Please refer to: [Tutorial: Add identity providers to your applications in Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-add-identity-providers)
82106

83-
### Register the app (msal-angular-spa)
107+
#### Register the app (msal-angular-spa)
84108

85-
1. Navigate to the [Azure portal](https://portal.azure.com) and select the **Azure AD B2C** service.
109+
1. Navigate to the [Azure portal](https://portal.azure.com) and select the **Azure Active Directory B2C** service.
86110
1. Select the **App Registrations** blade on the left, then select **New registration**.
87111
1. In the **Register an application page** that appears, enter your application's registration information:
88-
- In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example `msal-angular-spa`.
89-
- Under **Supported account types**, select **Accounts in any identity provider or organizational directory (for authenticating users with user flows)**.
90-
- In the **Redirect URI** section, select **Single-page application** in the combo-box and enter the following redirect URI: `http://localhost:4200`.
91-
1. Select **Register** to create the application.
92-
1. In the app's registration screen, find and note the **Application (client) ID**. You use this value in your app's configuration file(s) later in your code.
93-
1. Select **Save** to save your changes.
94-
95-
#### Configure the app (msal-angular-spa) to use your app registration
112+
1. In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example `msal-angular-spa`.
113+
1. Under **Supported account types**, select **Accounts in any identity provider or organizational directory (for authenticating users with user flows)**
114+
1. Select **Register** to create the application.
115+
1. In the **Overview** blade, find and note the **Application (client) ID**. You use this value in your app's configuration file(s) later in your code.
116+
1. In the app's registration screen, select the **Authentication** blade to the left.
117+
1. If you don't have a platform added, select **Add a platform** and select the **Single-page application** option.
118+
1. In the **Redirect URI** section enter the following redirect URIs:
119+
1. `http://localhost:4200`
120+
1. `http://localhost:4200/auth`
121+
1. Click **Save** to save your changes.
122+
123+
##### Configure the app (msal-angular-spa) to use your app registration
96124

97125
Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.
98126

@@ -107,7 +135,9 @@ To setup your B2C user-flows, do the following:
107135
1. Find the key `authorities` and populate it with your policy authority strings e.g. `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/b2c_1_susi`.
108136
1. Find the key `authorityDomain` and populate it with the domain portion of your authority string e.g. `<your-tenant-name>.b2clogin.com`.
109137

110-
## Running the sample
138+
### Step 4: Running the sample
139+
140+
From your shell or command line, execute the following commands:
111141

112142
```console
113143
cd 1-Authentication/2-sign-in-b2c/SPA
@@ -123,12 +153,27 @@ To setup your B2C user-flows, do the following:
123153

124154
> :information_source: Did the sample not work for you as expected? Then please reach out to us using the [GitHub Issues](../../../../issues) page.
125155
126-
> :information_source: if you believe your issue is with the B2C service itself rather than with the sample, please file a support ticket with the B2C team by following the instructions [here](https://docs.microsoft.com/en-us/azure/active-directory-b2c/support-options).
156+
> :information_source: if you believe your issue is with the B2C service itself rather than with the sample, please file a support ticket with the B2C team by following the instructions [here](https://docs.microsoft.com/azure/active-directory-b2c/support-options).
127157
128158
## We'd love your feedback!
129159

130160
Were we successful in addressing your learning objective? Consider taking a moment to [share your experience with us](https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR73pcsbpbxNJuZCMKN0lURpUOU5PNlM4MzRRV0lETkk2ODBPT0NBTEY5MCQlQCN0PWcu).
131161

162+
## Troubleshooting
163+
164+
<details>
165+
<summary>Expand for troubleshooting info</summary>
166+
167+
Use [Stack Overflow](http://stackoverflow.com/questions/tagged/msal) to get support from the community.
168+
Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before.
169+
Make sure that your questions or comments are tagged with [`azure-active-directory` `azure-ad-b2c` `ms-identity` `adal` `msal`].
170+
171+
If you find a bug in the sample, raise the issue on [GitHub Issues](../../../../issues).
172+
173+
To provide feedback on or suggest features for Azure Active Directory, visit [User Voice page](https://feedback.azure.com/forums/169401-azure-active-directory).
174+
175+
</details>
176+
132177
## About the code
133178

134179
MSAL Angular is a wrapper around MSAL.js (i.e. *msal-browser*). As such, many of MSAL.js's public APIs are also available to use with MSAL Angular, while MSAL Angular itself offers additional [public APIs](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/public-apis.md).
@@ -278,11 +323,11 @@ For more information, see: [Events in MSAL Angular v2](https://github.com/AzureA
278323

279324
### Integrating user-flows
280325

281-
- **Sign-up/sign-in**
326+
* **Sign-up/sign-in**
282327

283328
This user-flow allows your users to sign-in to your application if the user has an account already, or sign-up for an account if not. This is the default user-flow that we pass during the initialization of MSAL instance.
284329

285-
- **Edit Profile**
330+
* **Edit Profile**
286331

287332
When a user selects the **Edit Profile** button on the navigation bar, we simply initiate a sign-in flow:
288333

@@ -299,34 +344,28 @@ When a user selects the **Edit Profile** button on the navigation bar, we simply
299344

300345
Like password reset, edit profile user-flow requires users to sign-out and sign-in again.
301346

302-
## More information
303-
304-
- [What is Azure Active Directory B2C?](https://docs.microsoft.com/azure/active-directory-b2c/overview)
305-
- [Application types that can be used in Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/application-types)
306-
- [Recommendations and best practices for Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/best-practices)
307-
- [Azure AD B2C session](https://docs.microsoft.com/azure/active-directory-b2c/session-overview)
308-
- [Initialize client applications using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-initializing-client-applications)
309-
- [Single sign-on with MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-sso)
310-
- [Handle MSAL.js exceptions and errors](https://docs.microsoft.com/azure/active-directory/develop/msal-handling-exceptions?tabs=javascript)
311-
- [Logging in MSAL.js applications](https://docs.microsoft.com/azure/active-directory/develop/msal-logging?tabs=javascript)
312-
- [Pass custom state in authentication requests using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request)
313-
- [Prompt behavior in MSAL.js interactive requests](https://docs.microsoft.com/azure/active-directory/develop/msal-js-prompt-behavior)
314-
- [Use MSAL.js to work with Azure AD B2C](https://docs.microsoft.com/azure/active-directory/develop/msal-b2c-overview)
315-
316-
For more information about how OAuth 2.0 protocols work in this scenario and other scenarios, see [Authentication Scenarios for Azure AD](https://docs.microsoft.com/azure/active-directory/develop/authentication-flows-app-scenarios).
317-
318-
## Community Help and Support
347+
## Next Steps
319348

320-
Use [Stack Overflow](http://stackoverflow.com/questions/tagged/msal) to get support from the community.
321-
Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before.
322-
Make sure that your questions or comments are tagged with [`azure-active-directory` `azure-ad-b2c` `ms-identity` `adal` `msal`].
349+
Learn how to:
323350

324-
If you find a bug in the sample, raise the issue on [GitHub Issues](../../../../issues).
325-
326-
To provide feedback on or suggest features for Azure Active Directory, visit [User Voice page](https://feedback.azure.com/forums/169401-azure-active-directory).
351+
* [Protect and call a web API](../../../3-Authorization-II/2-call-api-b2c/README.md).
352+
* [Deploy your apps to Azure](../../../4-Deployment/README.md)
327353

328354
## Contributing
329355

330356
If you'd like to contribute to this sample, see [CONTRIBUTING.MD](/CONTRIBUTING.md).
331357

332-
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
358+
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
359+
360+
* [What is Azure Active Directory B2C?](https://docs.microsoft.com/azure/active-directory-b2c/overview)
361+
* [Application types that can be used in Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/application-types)
362+
* [Recommendations and best practices for Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/best-practices)
363+
* [Azure AD B2C session](https://docs.microsoft.com/azure/active-directory-b2c/session-overview)
364+
* [Building Zero Trust ready apps](https://aka.ms/ztdevsession)
365+
* [Initialize client applications using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-initializing-client-applications)
366+
* [Single sign-on with MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-sso)
367+
* [Handle MSAL.js exceptions and errors](https://docs.microsoft.com/azure/active-directory/develop/msal-handling-exceptions?tabs=javascript)
368+
* [Logging in MSAL.js applications](https://docs.microsoft.com/azure/active-directory/develop/msal-logging?tabs=javascript)
369+
* [Pass custom state in authentication requests using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request)
370+
* [Prompt behavior in MSAL.js interactive requests](https://docs.microsoft.com/azure/active-directory/develop/msal-js-prompt-behavior)
371+
* [Use MSAL.js to work with Azure AD B2C](https://docs.microsoft.com/azure/active-directory/develop/msal-b2c-overview)

0 commit comments

Comments
 (0)