Vanilla JavaScript single-page application calling a web API protected by Azure AD B2C
page_type: sample languages:
This sample demonstrates a vanilla JavaScript single-page application (SPA) that lets users authenticate against Azure Active Directory B2C (Azure AD B2C) using the Microsoft Authentication Library for JavaScript (MSAL.js) and authorize them to call a web API that is also protected by Azure AD B2C. This sample also demonstrates sign-up/sign-in, password reset and profile edit user-flows.
If you like, you can take a quick look at the application before trying.
File/folder | Description |
---|---|
App/authPopup.js |
Main authentication logic resides here (using popup flow). |
App/authRedirect.js |
Use this instead of authPopup.js for authentication with redirect flow. |
App/authConfig.js |
Contains configuration parameters for the sample. |
App/apiConfig.js |
Contains web API scopes and coordinates. |
App/policies.js |
Contains B2C custom policies and user-flows. |
From your shell or command line:
git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
or download and extract the repository .zip file.
:warning: Given that the name of the sample is quite long, and so are the names of the referenced packages, you might want to clone it in a folder close to the root of your hard drive, to avoid maximum file path length limitations on Windows.
cd ms-identity-b2c-javascript-spa
npm install
:information_source: This sample comes with a pre-registered application for testing purposes. If you would like to use your own Azure AD B2C tenant and application, follow the steps below to register and configure the applications in the Azure Portal. Otherwise, continue with the steps for Running the sample.
As a first step you'll need to:
:information_source: This sample is calling a web API that is already protected by Azure AD B2C and hosted on Azure App Service. If you would like to setup and use your own web API, follow the instructions on Add a web API application and Configure scopes or see Node.js Web API with Azure AD B2C code sample.
ms-identity-b2c-javascript-spa
.http://localhost:6420
.Please refer to: Tutorial: Create user flows in Azure Active Directory B2C
Please refer to: Tutorial: Add identity providers to your applications in Azure Active Directory B2C
Open the project in your IDE (like Visual Studio Code) to configure the code.
In the steps below, "ClientID" is the same as "Application ID" or "AppId".
Open the App\authConfig.js
file. Then:
clientId
and replace the existing value with the application ID (clientId) of the ms-identity-b2c-javascript-spa
application copied from the Azure portal.redirectUri
and replace the existing value with the base address of the ms-identity-b2c-javascript-spa project (by default http://localhost:6420
).Open the App\policies.js
file. Then:
policies.names
and replace it with the names (IDs) of your policies/user-flows e.g. b2c_1_susi_reset_v2
.policies.authorities
abd replace it with the authority strings of your policies/user-flows e.g. https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi_reset_v2
.policies.authorityDomain
abd replace it with the domain of your authority e.g. fabrikamb2c.b2clogin.com
.Open the App\apiConfig.js
file. Then:
b2cScopes
and replace the existing value with the scope of your web API (if you have followed the Tutorial: Node.js Web API with Azure AD B2C above, this is api://{your-web-apis-client-id}/demo.read
).webAPI
and replace the existing value with the coordinates of your web API (if you have followed the Tutorial: Node.js Web API with Azure AD B2C above, this is http://localhost:5000
). cd ms-identity-b2c-javascript-spa
npm start
http://localhost:6420
.:thought_balloon: How did we do? Consider taking a moment to share your experience with us
There is one single-page application in this sample. To deploy it to Azure Storage, you'll need to:
If you are going to call a web API from a your deployed SPA, you'll also need to configure your web API's CORS setting accordingly (more on this below).
:information_source: If you would like to use VS Code Azure Tools extension for deployment, watch the tutorial offered by Microsoft Docs.
ms-identity-b2c-javascript-spa
to an Azure Storage blobBuild your project to get a distributable files folder, where your built html
, css
and javascript
files will be generated. Then follow the steps below:
:warning: When uploading, make sure you upload the contents of your distributable files folder and not the entire folder itself.
index.html
).ms-identity-b2c-javascript-spa
project source code, update your configuration file with the Primary endpoint field as your new Redirect URI (you will register this URI later).$web
container.text/html
.ms-identity-b2c-javascript-spa
ms-identity-b2c-javascript-spa
application.Now you need to navigate to the Azure App Service Portal, and locate your web API there. Once you do, click on the CORS blade. There, add your deployed SPA's coordinates as an allowed domain:
Configure your application:
Learn more about Microsoft Identity Platform and Azure AD B2C:
See more code samples:
For more information about how OAuth 2.0 protocols work in this scenario and other scenarios, see Authentication Scenarios for Azure AD.
Use Stack Overflow to get support from the community.
Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before.
Make sure that your questions or comments are tagged with [azure-ad-b2c
ms-identity
adal
msal
].
If you find a bug in the sample, please raise the issue on GitHub Issues.
To provide a recommendation, visit the following User Voice page.
If you'd like to contribute to this sample, see CONTRIBUTING.MD.
This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.