page_type: sample languages:
This branch is using MSAL.NET 4.x. If you are interested in a previous version of the sample using MSAL.NET 2.x, go to the master branch
This simple sample demonstrates how to use the Microsoft Authentication Library (MSAL) for .NET to get an access token and call an API secured by Azure AD B2C.
There are two ways to run this sample:
{tenantName}.b2clogin.com
, as the node.js api used for the api call has been updated to handle b2clogin.com
and not login.microsoftonline.com
. If using login.microsoftonline.com
or a custom b2c domain, you will need to host your own web api (see step 3 below), otherwise, you will see "authorized" when making the api call with this sample as-is. This sample demonstrates how to sign in or sign up for an account at "Wingtip Toys" (the demo environment for this sample) using a WPF Desktop application.
Once signed-in, clicking on the Call API button shows the display name you used when you created your account. The Edit Profile button allows you to change your display name and city. The Logout button logs you out of the application.
From your shell or command line:
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git
Open the active-directory-b2c-wpf.sln
and run the project.
The sample demonstrates the following functionality:
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 this WPF application and a related Node.js Web API with Azure AD B2C sample to work with 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 instruction.
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.
As you saw in the demo environment, this sample calls a Web API at https://fabrikamb2chello.azurewebsites.net. This demo Web API uses the same code found in the sample Node.js Web API with Azure AD B2C, in case you need to reference it for debugging purposes.
You must replace the demo environment Web API with your own Web API. If you do not have your own Web API, you can clone the Node.js Web API with Azure AD B2C sample and register it with your tenant.
First, clone the Node.js Web API sample repository into its own directory, for example:
cd ..
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
Second, follow the instructions at register a Web API with Azure AD B2C to register the Node.js Web API sample with your tenant. Registering your Web API allows you to define the scopes that your single page application will request access tokens for.
Provide the following values for the Node.js Web API registration:
My Test Node.js Web API
. You will identify this application by its Name whenever working in the Azure portal.http://localhost:5000
. This is the port number that the Node.js Web API sample is configured to run on. demoapi
. This AppID URI is a unique identifier representing this Node.jS Web API. The AppID URI is used to construct the scopes that are configured in you single page application's code. For example, in this Node.js Web API sample, the scope will have the value https://<your-tenant-name>.onmicrosoft.com/demoapi/demo.read
My Test Node.js Web API
application and then open the Published Scopes window (in the left nav menu) and add the scope demo.read
followed by a description demoing a read scenario
. Click Save.Third, in the index.html
file of the Node.js Web API sample, update the following variables to refer to your Web API registration.
var tenantID = "<your-tenant-name>.onmicrosoft.com";
var clientID = "<Application ID for your Node.js Web API - found on Properties page in Azure portal>";
var policyName = "<Name of your sign in / sign up policy, e.g. B2C_1_SiUpIn>";
Lastly, to run your Node.js Web API, run the following command from your shell or command line
npm install && npm update
node index.js
Your Node.js Web API sample is now running on Port 5000.
Now you need to register your native app in your B2C tenant, so that it has its own Application ID.
Your native application registration should include the following information:
My Test WPF App
. You will identify this application by its Name within the Azure portal.My Test WPF App
and open the API Access window (in the left nav menu). Click Add and select the name of the Node.js Web API you registered previously, for example My Test Node.js Web API
. Select the scope(s) you defined previously, for example, demo.read
and hit Save.App.xaml.cs
file.public static string Tenant
and replace the value with your tenant name.public static string ClientID
and replace the value with the Application ID from your Native app registration, for example My Test WPF App
.public static string PolicySignUpSignIn
, and replace the names of the policies you created in Step 2, e.g. b2c_1_SiUpIn
public static string[] ApiScopes
and replace with the scope you created in Step 3, for example, https://<your-tenant-name>.onmicrosoft.com/demoapi/demo.read
.ApiEndpoint
variable to point to your Node.js Web API hello
endpoint running locally at "http://localhost:5000/hello"
For more information on Azure B2C, see the Azure AD B2C documentation homepage.