IMPORTANT NOTE: Calling an API is not yet shown

This simple sample demonstrates how to use the Microsoft Authentication Library Preview for JavaScript (msal.js) with Angular 2.4 to sign into Azure AD B2C.

The sample is already configured to use a demo environment and can be run simply by downloading the code and running the app on your machine. Follow the instructions below if you would like to use your own Azure AD B2C configuration.

Optionally, if you want to use your own tenant configuration:

You can also modify the sample to use your own Azure AD B2C tenant. First, you'll need to create an Azure AD B2C tenant by following these instructions.

IMPORTANT: if you choose to perform one of the optional steps, you have to perform ALL of them for the sample to work as expected.

This sample uses three types of policies: a unified sign-up/sign-in policy & a profile editing policy. Create one policy of each type by following the instructions here. You may choose to include as many or as few identity providers as you wish.

If you already have existing policies in your Azure AD B2C tenant, feel free to re-use those. No need to create new ones just for this sample.

Now you need to register your single page application in your B2C tenant, so that it has its own Application ID. Don't forget to grant your application API Access to the web API you registered in the previous step.

Your single page application registration should include the following information:

• Enable the Web App/Web API setting for your application.
• Set the Reply URL for your app to https://localhost:3000
• Copy the Application ID generated for your application, so you can use it in the next step.

Now you can replace the app's default configuration with your own.

1. Open the msal.service.ts file.
2. Find the assignment for ClientID and replace the value with the Application ID from Step 3.
3. Find the assignment for authority and replacing b2c_1_susiby the name of the policy you created in Step 2, and fabrikamb2c.onmicrosoft.com by the name of the Azure AD B2C tenant.

tenantConfig = {
    tenant: "fabrikamb2c.onmicrosoft.com",
    clientID: '90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6',
    signUpSignInPolicy: "b2c_1_susi",
    b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/demoapi/demo.read"]
};

1. Make sure you've installed Node.
2. Install the node dependencies:

   cd active-directory-b2c-javascript-angular2.4-spa
   npm install
   npm update

3. Run the Web application

   npm start

4. With your favorite browser, navigate to https://localhost:3000.
5. Click the login button at the top of the application screen. The sample works exactly in the same way regardless of the account type you choose, apart from some visual differences in the authentication and consent experience.
6. Sign out by clicking the Logout button.

For more information on Azure B2C, see the Azure AD B2C documentation homepage.

We use Stack Overflow with the msal and azure-ad-b2c tags to provide support. We highly recommend you 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 [msal.js].

If you find and bug or have a feature request, please raise the issue on GitHub Issues.

To provide a recommendation, visit our Feedback Forum.

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.