This sample contains a solution file that contains two projects:
TaskWebAppis a "To-do" ASP.NET MVC web application where the users enters or updates their to-do items. These CRUD operations are performed by a backend web API. The web app displays the information returned from the ASP.NET Web API.
TaskServiceis the backend ASP.NET API that manages and stores each user's to-do list.
The sample covers the following:
- Calling an OpenID Connect identity provider (Azure AD B2C)
- Acquiring a token from Azure AD B2C using MSAL
How To Run This Sample
There are two ways to run this sample:
- Using the demo environment - The sample is already configured to use a demo environment and can be run by downloading this repository and running the app on your machine. Follow the steps listed below in the section Using the demo environment
- Using your own Azure AD B2C tenant - Once you have the sample running locally using the demo tenant, you can configure the sample to use your own Azure AD B2C tenant instead. Follow the steps listed below in the section Using your own Azure AD B2C tenant
Using the demo environment
This sample demonstrates how you can sign in or sign up for an account at "Wingtip Toys" (the demo environment for this sample) using a ASP.NET MVC Web Application.
Once singed in, you can create and edit your todo items.
Step 1: Clone or download this repository
From your shell or command line:
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git
Step 2: Run the project
B2C-WebAPI-DotNet.sln in Visual Studio.
You will need to run both the
TaskService projects at the same time.
- In Solution Explorer, right-click on the solution and open the Common Properties - Startup Project window.
- Select Multiple startup projects.
- Change the Action for both projects from None to Start as shown in the image below.
The sample demonstrates the following functionality once signed-in:
- Click your
<Display Name>in upper right corner to edit your profile or reset your password.
- Click Claims to view the claims associated with the signed-in user's id token.
- Click Todo to create and view your todo items. These CRUD operations are performed by calling the corresponding Web API running in the solution.
- Sign out and sign in as a different user. Create tasks for this second user. Notice how the tasks are stored per-user on the API, because the API extracts the user's identity from the access token it receives.
Using your own Azure AD B2C Tenant
In the previous section, you learned how to run the sample application using the demo environment. In this section, you'll learn how to configure the ASP.NET Web Application and the ASP.NET Web API to work with your own Azure AD B2C Tenant.
Step 1: Get your own Azure AD B2C tenant
First, you'll need an Azure AD B2C tenant. If you don't have an existing Azure AD B2C tenant that you can use for testing purposes, you can create your own by following these instructions.
Step 2: Create your own policies
This sample uses three types of policies: a unified sign-up/sign-in policy, a profile editing policy, and a password reset policy. Create one policy of each type by following the built-in policy instructions. 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 policies in this sample.
Step 3: Register your ASP.NET Web API with Azure AD B2C
Follow the instructions at register a Web API with Azure AD B2C to register the ASP.NET Web API sample with your tenant. Registering your Web API allows you to define the scopes that your ASP.NET Web Application will request access tokens for.
Provide the following values for the ASP.NET Web API registration:
- Provide a descriptive Name for the ASP.NET Web API, for example,
My Test ASP.NET Web API. You will identify this application by its Name whenever working in the Azure portal.
- Mark Yes for the Web App/Web API setting for your application.
- Set the Reply URL to
https://localhost:44332/. This is the port number that this ASP.NET Web API sample is configured to run on.
- Set the AppID URI to
demoapi. This AppID URI is a unique identifier representing this particular ASP.NET Web API. The AppID URI is used to construct the scopes that are configured in your ASP.NET Web Application. For example, in this ASP.NET Web API sample, the scope will have the value
- Create the application.
- Once the application is created, open your
My Test ASP.NET Web APIapplication and then open the Published Scopes window (in the left nav menu). Add the following 2 scopes:
- Scope named
readfollowed by a description
demoing a read scenario.
- Scope named
writefollowed by a description
demoing a write scenario.
- Scope named
- Click Save.
Step 4: Register your ASP.NET Web Application with Azure AD B2C
Follow the instructions at register a Web Application with Azure AD B2C
Your web application registration should include the following information:
- Provide a descriptive Name for your web appliation, for example,
My Test ASP.NET Web Application. You can identify this application by its Name within the Azure portal.
- Mark Yes for the Include web app / web API option.
- Set the Reply URL to
https://localhost:44316/This is the port number that this ASP.NET Web Application sample is configured to run on.
- Create your application.
- Once the application is created, you need to create a Web App client secret. Go to the Keys page for your Web App registration and click Generate Key. Note: You will only see the secret once. Make sure you copy it.
- Open your
My Test ASP.NET Web Applicationand open the API Access window (in the left nav menu). Click Add and select the name of the Web API you registered previously, for example
My Test ASP.NET Web API. Select the scope(s) you defined previously, for example,
writeand hit Ok.
Step 5: Configure your Visual Studio project with your Azure AD B2C app registrations
In this section, you will change the code in both projects to use your tenant.
:warning: Since both projects have a
Web.config file, pay close attention which
Web.config file you are modifying.
Step 5a: Modify the
- Open the
Web.configfile for the
- Find the key
ida:Tenantand replace the value with your
- Find the key
ida:ClientIdand replace the value with the Application ID from your web application
My Test ASP.NET Web Applicationregistration in the Azure portal.
- Find the key
ida:ClientSecretand replace the value with the Client secret from your web application in in the Azure portal.
- Find the keys representing the policies, e.g.
ida:SignUpSignInPolicyIdand replace the values with the corresponding policy names you created, e.g.
Comment out the aadb2cplayground site and uncomment the
locahost:44332for the TaskServiceUrl – this is the localhost port that the Web API will run on. Your code should look like the following below. ```
api:ApiIdentifierkey value to the App ID URI of the API you specified in the Web API registration. This App ID URI tells B2C which API your Web Application wants permissions to. ``` <!--
—> configure Visual Studio for multiple startup projects.
You can now perform all the previous steps as seen in the demo tenant environment.
Customize your user experience further by supporting more identity providers. Checkout the docs belows to learn how to add additional providers:
Additional information regarding this sample can be found in our documentation:
- How to build a .NET web app using Azure AD B2C
- How to build a .NET web API secured using Azure AD B2C
- How to call a .NET web api using a .NET web app
Questions & Issues
Please file any questions or problems with the sample as a github issue. You can also post on StackOverflow with the tag