Scenario: Native App calling Web API

Learn how to build a native app signing-in users authenticated by AD FS 2019 and acquiring tokens using MSAL library to call web APIs.

Before reading this article, you should be familiar with the AD FS concepts and Authorization code grant flow

Overview

Overview

In this flow you add authentication to your Native App (public client), which can therefore sign in users and calls a Web API. To call a Web API from a Native App that signs in users, you can use MSAL's AcquireTokenInteractive token acquisition method. To enable this interaction, MSAL leverages a web browser.

To better understand how to configure a Native App in AD FS to acquire access token interactively, let's use a sample available here and walkthrough the app registration and code configuration steps.

Pre-requisites

  • GitHub client tools
  • AD FS 2019 or later configured and running
  • Visual Studio 2013 or later

App Registration in AD FS

This section shows how to register the Native App as a public client and Web API as a Relying Party (RP) in AD FS

  1. In AD FS Management, right-click on Application Groups and select Add Application Group.

  2. On the Application Group Wizard, for the Name enter NativeAppToWebApi and under Client-Server applications select the Native application accessing a Web API template. Click Next.

    Screenshot of the Welcome page of the Add Application Group Wizard showing the Native application accessing a Web API template highlighted.

  3. Copy the Client Identifier value. It will be used later as the value for ClientId in the application's App.config file. Enter the following for Redirect URI: https://ToDoListClient. Click Add. Click Next.

    Screenshot of the Native application page of the Add Application Group Wizard showing the redirect U R I.

  4. On the Configure Web API screen, enter the Identifier: https://localhost:44321/. Click Add. Click Next. This value will be used later in the application's App.config and Web.config files.

    Screenshot of the Configure Web API page of the Add Application Group Wizard showing the correct identifier.

  5. On the Apply Access Control Policy screen, select Permit everyone and click Next.

    Screenshot of the Choose Access Control Policy page of the Add Application Group Wizard showing the Permit everyone option highlighted.

  6. On the Configure Application Permissions screen, make sure openid is selected and click Next.

    Screenshot of the Configure Application Permissions page of the Add Application Group Wizard showing open I D selected.

  7. On the Summary screen, click Next.

  8. On the Complete screen, click Close.

  9. In AD FS Management, click on Application Groups and select NativeAppToWebApi application group. Right-click and select Properties.

    Screenshot of the A D F S Management dialog box showing the NativeAppToWebApi group highlighted and the Properties option in the dropdown list.

  10. On NativeAppToWebApi properties screen, select NativeAppToWebApi – Web API under Web API and click Edit…

    Screenshot of the NativeAppToWebApi Properties dialog box showing the NativeAppToWebApi - Web A P I application highlighted.

  11. On NativeAppToWebApi – Web API Properties screen, select Issuance Transform Rules tab and click Add Rule…

    Screenshot of the NativeAppToWebApi - Web A P I Properties dialog box showing the Issuance Transform Rules tab.

  12. On Add Transform Claim Rule Wizard, select Transform an Incoming Claim from the Claim rule template: dropdown and click Next.

    Screenshot of the Select Rule Template page of the Add Transform Claim Rule Wizard showing the Transform an Incoming Claim option selected.

  13. Enter NameID in Claim rule name: field. Select Name for Incoming claim type:, Name ID for Outgoing claim type: and Common Name for Outgoing name ID format:. click Finish.

    Screenshot of the Configure Rule page of the Add Transform Claim Rule Wizard showing the configuration explained above.

  14. Click OK on NativeAppToWebApi – Web API Properties screen and then NativeAppToWebApi Properties screen.

Code Configuration

This section shows how to configure a Native App to sign-in user and retrieve token to call the Web API

  1. Download the sample from here

  2. Open the sample using Visual Studio

  3. Open the App.config file. Modify the following:

    • ida:Authority - enter https://[your AD FS hostname]/adfs

    • ida:ClientId - enter the Client Identifier value from #3 in App Registration in AD FS section above.

    • ida:RedirectUri - enter the Redirect URI value from #3 in App Registration in AD FS section above.

    • todo:TodoListResourceId – enter the Identifier value from #4 in App Registration in AD FS section above

    • ida: todo:TodoListBaseAddress - enter the Identifier value from #4 in App Registration in AD FS section above.

      Screenshot of the App config file showing the modified values.

  4. Open the Web.config file. Modify the following:

    • ida:Audience - enter the Identifier value from #4 in App Registration in AD FS section above

    • ida: AdfsMetadataEndpoint - enter https://[your AD FS hostname]/federationmetadata/2007-06/federationmetadata.xml

      Screenshot of the web config file showing the modified values.

Test the sample

This section shows how to test the sample configured above.

  1. Once the code changes are made rebuild the solution

  2. On Visual Studio, right click on solution and select Set StartUp Projects…

    Screenshot of the list that appears when you right-click the solution with the Set Start Up Projects option highlighted.

  3. On the Properties pages make sure Action is set to Start for each of the Projects

    Screenshot of the Solution Property Pages dialog box showing the Multiple startup project option selected and all of the projects' actions set to Start.

  4. At the top of Visual Studio, click the green arrow.

    Screenshot of the Visual Studio UI with the Start option called out.

  5. On the Native App's Main screen, click on Sign In.

    Screenshot of the To Do List Client dialog box.

If you don't see the native app screen, search and remove *msalcache.bin files from the folder where project repo is saved on your system.

  1. You will be re-directed to the AD FS sign-in page. Go ahead and sign in.

    Screenshot of the Sign In page.

  2. Once signed-in, enter text Build Native App to Web Api in the Create a To Do item. Click Add item. This will call the To Do List Service (Web API) and add the item in the cache.

    Screenshot of the To Do List Client dialog box with the new to do item populating the To Do Items section.

Next Steps

AD FS OpenID Connect/OAuth flows and Application Scenarios