This sample shows how to build a web application using Hello.js that performs identity management with Azure AD B2C . It assumes you have some familiarity with Azure AD B2C. If you'd like to learn all that B2C has to offer, start with our documentation at aka.ms/aadb2c.

The app is a simple web application that performs sign-in, sign-up, and sign-out functions with sign-in and signIn-signUp policies and also edit profile using EditProfile Policy. Once the user signed in sample GET/POST requests can be made to task service. It is intended to help get you started with Azure AD B2C in a simple webapplication built on hello.js, giving you the necessary tools to execute Azure AD B2C policies & securely identify users in your application.

Hello.js is a client-side JavaScript SDK for authenticating with OAuth2 web services and querying their REST APIs. For more details about hello.js, check out their documentation.

Microsoft has tested the hello.js library in basic scenarios and confirmed that they work with Azure AD B2C (with documented fixes). Microsoft does not provide fixes for this library and has not done a review of the library. Issues and feature requests should be directed to the library’s open-source project.

This application has been built with hello.js library version 1.14.0 (with documented fixes).

The following fixes were needed to make the hello.js library work with Azure AD B2C:

• Added the /authorize query string parameter "state" to local storage. There is a known issue with the Azure AD B2C /authorize endpoint returning an improper “state” value.

  • localStorage.setItem("b2cauthState", JSON.stringify(JSON.parse(decodeURIComponent(p.qs.state))));

• Re-assigning the “state” parameter from the local storage where ever required.

  • p.state = localStorage.getItem("b2cauthState");

• Silent renewal of tokens fails with “X-Frame Options DENY” error, if tokens have already expired. Code from this github issue has been incorporated to fix this issue.

• Silent renewing of access tokens is not supported by Amazon and Microsoft account.
• Local fixes have been made to the hello.js library to make it work with Azure AD B2C.

Getting started is simple! To run this sample you will need:

• Visual Studio 2015
• Sql Server Local Instance (Express is sufficient)
• An Internet connection
• An Azure subscription (a free trial is sufficient)

From your shell or command line:

git clone https://github.com/azure-samples/active-directory-b2c-dotnet-javascript-single-page-app-aspnet-web-api.git

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.

This sample uses three types of policies: a sign-in policy, a sign-up policy & 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 create your own application in your B2C tenant, so that your app has its own Application ID. You can do so following the generic instructions here. Be sure to include the following information in your app registration:

• Enable the Web App/Web API setting for your application.
• Add two rediect_uris for your app. Their values should take the form
  • http://localhost:65328/
  • http://localhost:65328/redirect.html
• 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.

open the index.html file and replace the applicationID and policy names

    //applicaionID created in AD B2C portal
    var applicationId = '2ea10cce-58f2-4b26-8b5a-65d75553aac1';
    var scope = 'openid ' + applicationId;
    // ignore other code here

    var policies = {
    signInPolicy: "B2C_1_sign_in",
    editProfilePolicy: "B2C_1_edit_profile",
    signInSignUpPolicy: "B2C_1_b2c_1_sign_in_sign_up"
    };

open the aadb2c.js and replace the tenant name and policy names

    var tenantName = 'tenantname.onmicrosoft.com';
    var signInPolicyName = 'b2c_1_sign_in';
    var signInSignUpPolicyName = 'B2C_1_b2c_1_sign_in_sign_up';
    var editProfilePolicyName = 'B2C_1_edit_profile';
    var redirect_uri = 'http://localhost:65328/';

replace tenant, applicationId and PolicyNames in the web.config

    <add key="ida:Tenant" value="tenantname.onmicrosoft.com" />
    <add key="ida:ApplicationId" value="application id" />
    <add key="ida:SignUpSignInPolicyId" value="B2C_1_b2c_1_sign_in_sign_up" />
    <add key="ida:SignInPolicyId" value="B2C_1_sign_in" />
    <add key="ida:UserProfilePolicyId" value="B2C_1_edit_profile" />

open the B2C-v2jsapp.sln in visual studio 2015. Right click on solution, click Properties and Choose multiple Startup projects. Set both the Projects to Start.

If there are issues with nuget package restore in TaskService project, open Package Manager Console and run

Update-Package -Reinstall -ProjectName TaskService

Clean and rebuild the solution, and run it. You can now sign up / sign in /edit profile to your application using the accounts you configured in your respective policies. Once the user is signed in with a policy POST a task to the service and GET the tasks already created.