Lab 06: Authenticate by using OpenID Connect, MSAL, and .NET SDKs

Microsoft Azure user interface

Given the dynamic nature of Microsoft cloud tools, you might experience Azure UI changes that occur after the development of this training content. As a result, the lab instructions and lab steps might not align correctly.

Microsoft updates this training course when the community alerts us to needed changes. However, cloud updates occur frequently, so you might encounter UI changes before this training content updates. If this occurs, adapt to the changes, and then work through them in the labs as needed.

Instructions

Before you start

Username: Admin
Password: Pa55w.rd

Note: Your instructor will provide instructions to connect to the virtual lab environment.

Review the installed applications

Find the taskbar on your Windows 10 desktop. The taskbar contains the icons for the applications that you’ll use in this lab, including:

Microsoft Edge
Visual Studio Code

Ensure that your lab environment has its time set properly (no delay, according to your timezone)

Note: If you notice that your lab environment has its time delayed, please adjust its local time by using the following powershell command to increase the time by 15 minutes

  Set-Date -Adjust (New-TimeSpan -Minutes 15)

Architecture diagram

Architecture diagram depicting a user authenticating by using OpenID Connect, MSAL, and .NET SDKs.

Exercise 1: Configure a single-tenant Azure AD environment

Task 1: Open the Azure portal

On the taskbar, select the Microsoft Edge icon.
In the open browser window, browse to the Azure portal (portal.azure.com), and then sign in with the account you’ll use for this lab.

Note: If this is your first time signing in to the Azure portal, you’ll be offered a tour of the portal. Select Get Started to skip the tour and begin using the portal.

Task 2: Register an application in Azure AD

In the Azure portal, use the Search resources, services, and docs text box to search for Azure Active Directory and, in the list of results, select Azure Active Directory.

Note: This redirects your browser session to the blade of the Azure Active Directory (Azure AD) tenant associated with your Azure subscription.
On the Azure Active Directory blade, select App registrations in the Manage section.
In the App registrations section, select + New registration.

In the Register an application section, perform the following actions, and then select Register:

Setting	Action
Name text box	Enter webappoidc
Supported account types list	Select Accounts in this organizational directory only (Default Directory only - Single tenant)

Note: The name of the tenant might differ depending on your Azure subscription.

The following screenshot displays the configured settings in the Register an application section.

Screenshot displaying the options configured to register an application.

Task 3: Record unique identifiers

On the webappoidc application registration blade, select Overview.
In the Overview section, find and record the value of the Application (client) ID text box. You’ll use this value later in the lab.
In the Overview section, find and record the value of the Directory (tenant) ID text box. You’ll use this value later in the lab.

Task 4: Configure the application authentication settings

On the webappoidc application registration blade, select Authentication in the Manage section.

In the Authentication section, perform the following actions, and select Configure:

Setting	Action
Platform configurations section	Select + Add a platform
Configure platforms blade	Select Web
Redirect URIs text box	Enter `https://localhost:5001/`
Front-channel logout URL text box	Enter `https://localhost:5001/signout-oidc`

Back in the Platform configurations section, select Add URI, and then enter https://localhost:5001/signin-oidc.
In the Implicit grant and hybrid flows section, select ID tokens (used for implicit and hybrid flows).
Select Save.

The following screenshot displays the configured settings on the Authentication blade.

Task 5: Create an Azure AD user

In the Azure portal, select the Cloud Shell icon to open a new PowerShell session. If Cloud Shell defaults to a Bash session, select Bash and then, in the drop down menu, select PowerShell.

Note: If this is the first time you’re starting Cloud Shell, when prompted to select either Bash or PowerShell, select PowerShell. When the You have no storage mounted message appears, select the subscription you’re using in this lab, and then select Create storage.
In the Cloud Shell pane, run the following command to sign in to the Azure AD tenant associated with your Azure subscription:
```
   Connect-AzureAD
```
Run the following command to retrieve and display the primary Domain Name System (DNS) domain name of the Azure AD tenant:
```
   $aadDomainName = ((Get-AzureAdTenantDetail).VerifiedDomains)[0].Name
   $aadDomainName
```
Note: Record the value of the DNS domain name. You’ll use this value later in the lab.

Run the following commands to create Azure AD users that you’ll use to test Azure AD authentication:

   $passwordProfile = New-Object -TypeName Microsoft.Open.AzureAD.Model.PasswordProfile
   $passwordProfile.Password = 'Pa55w.rd1234'
   $passwordProfile.ForceChangePasswordNextLogin = $false
   New-AzureADUser -AccountEnabled $true -DisplayName 'aad_lab_user1' -PasswordProfile $passwordProfile -MailNickName 'aad_lab_user1' -UserPrincipalName "aad_lab_user1@$aadDomainName"

Run the following command to identify the user principal name (UPN) of the newly created Azure AD user:
```
   (Get-AzureADUser -Filter "MailNickName eq 'aad_lab_user1'").UserPrincipalName
```
Note: Record the UPN. You’ll use this value later in the lab.
Close the Cloud Shell pane.

Review

In this exercise, you registered a single-tenant Azure AD application and created an Azure AD user account.

Exercise 2: Create a single-tenant ASP.NET web app

Task 1: Create an ASP.NET web app project

On the lab computer, start Command Prompt.
From the command prompt, run the following commands to create and set the current directory to Allfiles (F):\Allfiles\Labs\06\Starter\OIDCClient:
```
F:
cd F:\Allfiles\Labs\06\Starter\OIDCClient
```
Run the following commands to create a new .NET Core web app based on the Model View Controller (MVC) template (replace the placeholders <application_ID>, <tenant_ID>, and <domain_Name> with the corresponding values you recorded earlier in this lab):
```
dotnet new mvc --auth SingleOrg --client-id <application_ID> --tenant-id <tenant_ID> --domain <domain_Name>
rmdir .\obj /S /Q
```
On the lab computer, start Visual Studio Code.
In the File menu, select Open Folder.
In the File Explorer window, browse to Allfiles (F):\Allfiles\Labs\06\Starter\OIDCClient, and then select Select Folder.
In the Visual Studio Code Explorer pane, review the autogenerated folder structure that represents an MVC web app.

Navigate to the Properties folder, open the launchSettings.json file, and then apply the following changes:

Section	Property	Value
iisSettings	sslPort	44321
OIDCClient	applicationUrl	`https://localhost:5001`

Note: The port numbers must match the value you specified when creating the Azure AD app registration.

Save and close the file.
In the Visual Studio Code Explorer pane, select OIDCClient.csproj.
Ensure that the value of <TargetFramework> element is set to net6.0.
Ensure that version of the Microsoft.AspNetCore.Authentication.JwtBearer and Microsoft.AspNetCore.Authentication.OpenIdConnect NuGet packages is set to 6.0.6.
Set the version of the Microsoft.Identity.Web and Microsoft.Identity.Web.UI NuGet packages to 1.25.0.

Verify that the content of the OIDCClient.csproj file resembles the following listing (the value of the UserSecretsIdwill differ) and save the changes.

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <UserSecretsId>aspnet-OIDCClient-737DEB13-25D4-4C52-93C5-F485367E3C8C</UserSecretsId>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="6.0.6" NoWarn="NU1605" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="6.0.6" NoWarn="NU1605" />
    <PackageReference Include="Microsoft.Identity.Web" Version="1.25.0" />
    <PackageReference Include="Microsoft.Identity.Web.UI" Version="1.25.0" />
  </ItemGroup>
</Project>

Close the OIDCClient.csproj file.
Navigate to the Views\Shared folder, and then open the _LoginPartial.cshtml file.

Verify that the asp-area attribute in each span element references MicrosoftIdentity, as in the following line:

<a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>

Close the file without making any changes.

Open the file appsettings.json and review the content of the AzureAd object, including the following elements:

Element	Value
`Instance`	`https://login.microsoftonline.com/`
`Domain`	Primary DNS domain of the Azure AD tenant associated with your Azure subscription
`TenantId`	GUID of the Azure AD tenant
`ClientId`	Application (client) ID of the application you registered in the Azure AD tenant
`CallbackPath`	`/signin-oidc`

Close the file without making any changes.
In the Visual Studio Code Explorer pane, select Program.cs.

Verify that the file contains the following using directives:

using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Verify that the file contains the following lines that add the relevant authentication services to the container:

builder.services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"));

Verify that the file contains the following lines that add a controller and Razor pages for the accounts management:
```
builder.services.AddRazorPages()
  .AddMicrosoftIdentityUI();
```
Save and close the file.

Task 2: Test the single-tenant web app in a single-tenant scenario

In the Visual Studio Code window, activate the shortcut menu of the Explorer pane, and then select Open in Integrated Terminal.
Run the following commands to build the .NET web app:
```
cd F:\Allfiles\Labs\06\Starter\OIDCClient
dotnet build
```
Note: If there are any build errors, review the files in the Allfiles (F):\Allfiles\Labs\06\Solution\OIDCClient folder. Ignore any warning messages.
Run the following command to generate a self-signed certificate and configure the local computer to trust it:
```
dotnet dev-certs https --trust
```
If prompted to install the autogenerated certificate, select Yes.
From the terminal prompt, run the following command to run the .NET web app:
```
dotnet run
```
Start the Microsoft Edge browser in the InPrivate mode, and then navigate to the https://localhost:5001 URL.
If presented with the Your connection isn’t private message, select Advanced, and then select the Continue to localhost (unsafe) link.
In the open browser window, when prompted, authenticate by using the UPN of the aad_lab_user1 Azure AD account you created earlier in this lab with Pa55w.rd1234 as its password.

Note: If you are prompted with a Help us protect your account window, select Skip for now.
The browser window will automatically open the Permissions requested webpage.
Review the requested permissions, which include View your basic profile and Maintain access to data you have given it access to.
Select Accept.
Review the Welcome home page of the target site displayed by the browser and verify that the UPN of the aad_user1 Azure AD account appears in the browser window.
On the Welcome page, select Sign out.
When prompted to select the account to sign out, select the aad_lab_user1 Azure AD account. You’ll be automatically redirected to the Signed out page.
Close the Microsoft Edge browser.

Review

In this exercise, you implemented a single-tenant web app and tested it in a single-tenant Azure environment.

Exercise 3: Clean up your lab environment

Task 1: Delete the application registration in Azure AD

Switch to the Microsoft Edge browser that is displaying the Azure portal.
In the Azure portal, navigate to the blade of the Azure AD tenant associated with your Azure subscription.
On the Azure Active Directory blade, select App registrations in the Manage section.
In the App registrations section, select the webappoidc Azure AD application registration that you created earlier in this lab.
In the webappoidc section, perform the following actions:

a. Select Delete.

b. On the Delete app registration blade, select I understand the implications of deleting this app registration, and then select Delete.
Navigate to the Users | All users (Preview) blade.
In the list of users, select aad_lab_user1
On the aad_lab_user1 | Profile blade, select Delete and, when prompted to confirm, select Yes.

Task 2: Close the active applications

Close any open Microsoft Edge windows.
Close Visual Studio Code.

Review

In this exercise, you cleaned up your subscription by removing the application registration used in this lab.

Lab 06: Authenticate by using OpenID Connect, MSAL, and .NET SDKs

Microsoft Azure user interface

Instructions

Before you start

Sign in to the lab environment

Review the installed applications

Ensure that your lab environment has its time set properly (no delay, according to your timezone)

Architecture diagram

Exercise 1: Configure a single-tenant Azure AD environment

Task 1: Open the Azure portal

Task 2: Register an application in Azure AD

Task 3: Record unique identifiers

Task 4: Configure the application authentication settings

Task 5: Create an Azure AD user

Review

Exercise 2: Create a single-tenant ASP.NET web app

Task 1: Create an ASP.NET web app project

Task 2: Test the single-tenant web app in a single-tenant scenario

Review

Exercise 3: Clean up your lab environment

Task 1: Delete the application registration in Azure AD

Task 2: Close the active applications

Review