Merge pull request #54 from Azure-Samples/nvalluri-b2c

#signoff Updated to MSAL 3.0

Author: valnav

README.md

@@ -6,15 +6,15 @@ author: dstrockis
 
 # Azure AD B2C: Call an ASP.NET Web API from an ASP.NET Web App
 
-This sample contains a solution file that contains two projects: `TaskWebApp` and `TaskService`. 
+This sample contains a solution file that contains two projects: `TaskWebApp` and `TaskService`.
 
 - `TaskWebApp` is 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.
-- `TaskService` is the backend ASP.NET API that manages and stores each user's to-do list. 
+- `TaskService` is the backend ASP.NET API that manages and stores each user's to-do list.
 
-The sample covers the following: 
+The sample covers the following:
 
-* Calling an OpenID Connect identity provider (Azure AD B2C)
-* Acquiring a token from Azure AD B2C using MSAL
+- Calling an OpenID Connect identity provider (Azure AD B2C)
+- Acquiring a token from Azure AD B2C using MSAL
 
 ## How To Run This Sample
 
@@ -25,25 +25,23 @@ There are two ways to run this sample:
 
 ## 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. 
+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. 
+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
-```
+`git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git`
 
 ### Step 2: Run the project
 
 Open the `B2C-WebAPI-DotNet.sln` in Visual Studio. 
 
-You will need to run both the `TaskWebApp` and `TaskService` projects at the same time. 
+You will need to run both the `TaskWebApp` and `TaskService` projects at the same time.
 
-1. In Solution Explorer, right-click on the solution and open the **Common Properties - Startup Project** window. 
+1. In Solution Explorer, right-click on the solution and open the **Common Properties - Startup Project** window.
 2. Select **Multiple startup projects**.
 3. Change the **Action** for both projects from **None** to **Start** as shown in the image below.
 
@@ -54,7 +52,7 @@ The sample demonstrates the following functionality once signed-in:
 1. Click your **``<Display Name>``** in upper right corner to edit your profile or reset your password. 
 2. Click **Claims** to view the claims associated with the signed-in user's id token. 
 3. Click **Todo** to create and view your todo items. These CRUD operations are performed by calling the corresponding Web API running in the solution.
-4. 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. 
+4. 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
 
@@ -70,19 +68,21 @@ This sample uses three types of policies: a unified sign-up/sign-in policy, a pr
 
 If you already have existing policies in your Azure AD B2C tenant, feel free to re-use those policies in this sample.
 
+Make sure that all the three policies return **User's Object ID** and **Display Name** on **Application Claims**. To do that, on Azure Portal, go to your B2C Directory then click **User flows (policies)** on the left menu and select your policy. Then click on **Application claims** and make sure that **User's Object ID** and **Display Name** is checked.
+
 ### Step 3: Register your ASP.NET Web API with Azure AD B2C
 
-Follow the instructions at [register a Web API with Azure AD B2C](https://docs.microsoft.com/azure/active-directory-b2c/active-directory-b2c-app-registration#register-a-web-api) 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. 
+Follow the instructions at [register a Web API with Azure AD B2C](https://docs.microsoft.com/azure/active-directory-b2c/active-directory-b2c-app-registration#register-a-web-api) 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 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 `https://<your-tenant-name>.onmicrosoft.com/demoapi/read` 
-- Create the application. 
+- 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 `https://<your-tenant-name>.onmicrosoft.com/demoapi/read`
+- Create the application.
 - Once the application is created, open your `My Test ASP.NET Web API` application and then open the **Published Scopes** window (in the left nav menu). Add the following 2 scopes:
-  - **Scope** named `read` followed by a description `demoing a read scenario`. 
+  - **Scope** named `read` followed by a description `demoing a read scenario`.
   - **Scope** named `write` followed by a description `demoing a write scenario`.
 - Click **Save**.
 
@@ -109,22 +109,26 @@ In this section, you will change the code in both projects to use your tenant.
 
 1. Open the `Web.config` file for the `TaskWebApp` project.
 1. Find the key `ida:Tenant` and replace the value with your `<your-tenant-name>.onmicrosoft.com`.
+1. Find the key `ida:TenantId` and replace the value with your Directory ID.
 1. Find the key `ida:ClientId` and replace the value with the Application ID from your web application `My Test ASP.NET Web Application` registration in the Azure portal.
 1. Find the key `ida:ClientSecret` and replace the value with the Client secret from your web application in in the Azure portal.
 1. Find the keys representing the policies, e.g. `ida:SignUpSignInPolicyId` and replace the values with the corresponding policy names you created, e.g. `b2c_1_SiUpIn`
 1. Comment out the aadb2cplayground site and uncomment the `locahost:44332` for the TaskServiceUrl – this is the localhost port that the Web API will run on. Your code should look like the following below.
-    ```
+
+    ```csharp
     <!--<add key="api:TaskServiceUrl" value="https://aadb2cplayground.azurewebsites.net/" />-->
 
-    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/> 
+    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/>
     ```
 
-1. Change the `api:ApiIdentifier` key 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. 
-    ```
+1. Change the `api:ApiIdentifier` key 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.
+
+    ```csharp
     <!--<add key="api:ApiIdentifier" value="https://fabrikamb2c.onmicrosoft.com/api/" />—>
 
     <add key="api:ApiIdentifier" value="https://<your-tenant-name>.onmicrosoft.com/demoapi/" />
     ```
+
     :memo: Make sure to include the trailing '/' at the end of your `ApiIdentifier` value. 
 
 1. Find the keys representing the scopes, e.g. `api:ReadScope` and replace the values with the corresponding scope names you created, e.g. `read`
@@ -144,6 +148,11 @@ You need to run both projects at the same time. If you did not complete the demo
 
 You can now perform all the previous steps as seen in the demo tenant environment.
 
+## Known Issues
+
+- MSAL cache needs a TenantId along with the user's ObjectId to function. It retrieves these two from the claims returned in the id_token. As TenantId is not guranteed to be present in id_tokens issued by B2C unless the steps [listed in this document](https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/AAD-B2C-specifics#caching-with-b2c-in-msalnet), 
+if you are following the workarounds listed in the doc and tenantId claim (tid) is available in the user's token, then please change the code in [ClaimsPrincipalsExtension.cs](https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi/blob/nvalluri-b2c/TaskWebApp/Utils/ClaimsPrincipalExtension.cs) GetB2CMsalAccountId() to let MSAL pick this from the claims instead.
+
 ## Next Steps
 
 Customize your user experience further by supporting more identity providers.  Checkout the docs belows to learn how to add additional providers:
@@ -169,6 +178,4 @@ Additional information regarding this sample can be found in our documentation:
 
 ## Questions & Issues
 
-Please file any questions or problems with the sample as a github issue. You can also post on [StackOverflow](https://stackoverflow.com/questions/tagged/azure-ad-b2c) with the tag `azure-ad-b2c`.
-
-
+Please file any questions or problems with the sample as a github issue. You can also post on [StackOverflow](https://stackoverflow.com/questions/tagged/azure-ad-b2c) with the tag `azure-ad-b2c`.