Web app that signs in users: App registration

Article
06/17/2024

This article explains the app registration steps for a web app that signs in users.

To register your application, you can use:

The web app quickstarts. In addition to being a great first experience with creating an application, quickstarts in the Azure portal contain a button named Make this change for me. You can use this button to set the properties you need, even for an existing app. Adapt the values of these properties to your own case. In particular, the web API URL for your app is probably going to be different from the proposed default, which will also affect the sign-out URI.
The Azure portal to register your application manually.
PowerShell and command-line tools.

Register an app by using the quickstarts

You can use the following link to bootstrap the creation of your web application:

Register an app by using the Azure portal

Tip

Steps in this article might vary slightly based on the portal you start from.

Note

The portal to use is different depending on whether your application runs in the Azure public cloud or in a national or sovereign cloud. For more information, see National clouds.

Sign in to the Microsoft Entra admin center.
If you have access to multiple tenants, use the Settings icon in the top menu to switch to the tenant in which you want to register the application from the Directories + subscriptions menu.
Browse to Identity > Applications > App registrations, select New registration.

When the Register an application page appears, enter your application's registration information:
1. Enter a Name for your application, for example AspNetCore-WebApp. Users of your app might see this name, and you can change it later.
2. Choose the supported account types for your application. (See Supported account types.)
3. For Redirect URI, add the type of application and the URI destination that will accept returned token responses after successful authentication. For example, enter https://localhost:44321.
4. Select Register.
Under Manage, select Authentication and then add the following information:
1. In the Web section, add https://localhost:44321/signin-oidc as a Redirect URI.
2. In Front-channel logout URL, enter https://localhost:44321/signout-oidc.
3. Under Implicit grant and hybrid flows, select ID tokens.
4. Select Save.

When the Register an application page appears, enter your application's registration information:
1. Enter a Name for your application, for example MailApp-openidconnect-v2. Users of your app might see this name, and you can change it later.
2. Choose the supported account types for your application. (See Supported account types.)
3. In the Redirect URI (optional) section, select Web in the combo box and enter a Redirect URI of https://localhost:44326/.
4. Select Register to create the application.
Under Manage, select Authentication.
In the Implicit grant and hybrid flows section, select ID tokens. This sample requires the implicit grant flow to be enabled to sign in the user.
Select Save.

When the Register an application page appears, enter your application's registration information:
1. Enter a Name for your application, for example java-webapp. Users of your app might see this name, and you can change it later.
2. Select Accounts in any organizational directory.
3. Select Register to register the application.
Under Manage, select Authentication > Add a platform.
Select Web.
For Redirect URI, enter the same host and port number, followed by /msal4jsample/secure/aad for the sign-in page.
Select Configure.
In the Web section, use the host and port number, followed by /msal4jsample/graph/me as a Redirect URI for the user information page. By default, the sample uses:
- http://localhost:8080/msal4jsample/secure/aad
- http://localhost:8080/msal4jsample/graph/me
Select Save.
Under Manage, select Certificates & secrets.
In the Client secrets section, select New client secret, and then:
1. Enter a key description.
2. Select the key duration In 1 year.
3. Select Add.
4. When the key value appears, copy it for later. This value won't be displayed again or be retrievable by any other means.

When the Register an application page appears, enter your application's registration information:
1. Enter a Name for your application, for example node-webapp. Users of your app might see this name, and you can change it later.
2. Change Supported account types to Accounts in this organizational directory only.
3. In the Redirect URI (optional) section, select Web in the combo box and enter the following redirect URI: http://localhost:3000/auth/redirect.
4. Select Register to create the application.
On the app's Overview page, find the Application (client) ID value and record it for later. You'll need it to configure the configuration file for this project.
Under Manage, select Certificates & secrets.
In the Client Secrets section, select New client secret, and then:
1. Enter a key description.
2. Select a key duration of In 1 year.
3. Select Add.
4. When the key value appears, copy it. You'll need it later.

When the Register an application page appears, enter your application's registration information:
1. Enter a Name for your application, for example python-webapp. Users of your app might see this name, and you can change it later.
2. Change Supported account types to Accounts in any organizational directory.
3. In the Redirect URI (optional) section, select Web in the combo box and enter the following redirect URI: http://localhost:5000/getAToken.
4. Select Register to create the application.
On the app's Overview page, find the Application (client) ID value and record it for later. You'll need it to configure the .env file for this project.
Under Manage, select Certificates & secrets.
In the Client Secrets section, select New client secret, and then:
1. Enter a key description. Leave the default expiration.
2. Select Add.
3. Save the Value of the Client Secret in a safe location. You'll need it to configure the code, and you can't retrieve it later.

Register an app by using PowerShell

You can also register an application with Microsoft Graph PowerShell, using the New-MgApplication.

Here's an idea of the code. For a fully functioning code, see this sample

# Connect to the Microsoft Graph API, non-interactive is not supported for the moment (Oct 2021)
Write-Host "Connecting to Microsoft Graph"
Connect-MgGraph -Environment China -ClientId 'YOUR_CLIENT_ID' -TenantId $tenantId -Scopes "User.Read.All Organization.Read.All Application.ReadWrite.All" 
   
$context = Get-MgContext
$tenantId = $context.TenantId

# Get the user running the script
$currentUserPrincipalName = $context.Account
$user = Get-MgUser -Filter "UserPrincipalName eq '$($context.Account)'"

# get the tenant we signed in to
$Tenant = Get-MgOrganization
$tenantName = $Tenant.DisplayName
   
$verifiedDomain = $Tenant.VerifiedDomains | where {$_.Isdefault -eq $true}
$verifiedDomainName = $verifiedDomain.Name
$tenantId = $Tenant.Id

Write-Host ("Connected to Tenant {0} ({1}) as account '{2}'. Domain is '{3}'" -f  $Tenant.DisplayName, $Tenant.Id, $currentUserPrincipalName, $verifiedDomainName)

# Create the webApp AAD application
Write-Host "Creating the AAD application (WebApp)"
# create the application 
$webAppAadApplication = New-MgApplication -DisplayName "WebApp" `
                                                   -Web `
                                                   @{ `
                                                         RedirectUris = "https://localhost:44321/", "https://localhost:44321/signin-oidc"; `
                                                         HomePageUrl = "https://localhost:44321/"; `
                                                         LogoutUrl = "https://localhost:44321/signout-oidc"; `
                                                      } `
                                                      -SignInAudience AzureADMultipleOrgs `
                                                   #end of command

$currentAppId = $webAppAadApplication.AppId
$currentAppObjectId = $webAppAadApplication.Id

$tenantName = (Get-MgApplication -ApplicationId $currentAppObjectId).PublisherDomain
#Update-MgApplication -ApplicationId $currentAppObjectId -IdentifierUris @("https://$tenantName/WebApp")
   
# create the service principal of the newly created application     
$webAppServicePrincipal = New-MgServicePrincipal -AppId $currentAppId -Tags {WindowsAzureActiveDirectoryIntegratedApp}

# add the user running the script as an app owner if needed
$owner = Get-MgApplicationOwner -ApplicationId $currentAppObjectId
if ($owner -eq $null)
{
   New-MgApplicationOwnerByRef -ApplicationId $currentAppObjectId  -BodyParameter = @{"@odata.id" = "htps://microsoftgraph.chinacloudapi.cn/v1.0/directoryObjects/$user.ObjectId"}
   Write-Host "'$($user.UserPrincipalName)' added as an application owner to app '$($webAppServicePrincipal.DisplayName)'"
}
Write-Host "Done creating the webApp application (WebApp)"

Next step

Move on to the next article in this scenario, App's code configuration.

Web app that signs in users: App registration

Register an app by using the quickstarts

Register an app by using the Azure portal

Register an app by using PowerShell

Next step

Additional resources