可登入使用者的 Web 應用程式：應用程式註冊

本文描述可登入使用者之 Web 應用程式的應用程式註冊步驟。

您可以使用以下方法註冊應用程式：

• Web 應用程式快速入門。 Azure 入口網站中的快速入門不但是建立應用程式的絕佳初體驗，還包含一個名為 [Make this change for me] \(為我進行這項變更\) 的按鈕。 您可以使用這個按鈕設定需要的屬性，即使是現有的應用程式也適用。 為您自己的案例調整這些屬性值。 尤其是，您應用程式的 Web API URL 可能會與所建議預設值不同，這也會影響登出 URI。
• 用以手動註冊應用程式的 Azure 入口網站。
• PowerShell 和命令列工具。

使用快速入門註冊應用程式

您可以使用下列連結啟動 Web 應用程式的啟動程序：

註冊應用程式

使用 Azure 入口網站註冊應用程式

提示

根據您開始使用的不同入口網站，本文中的步驟可能略有變化。

注意

使用的入口網站會隨應用程式在 Microsoft Azure 公用雲端中執行，還是在國家雲端或主權雲端中執行而有所不同。 如需詳細資訊，請參閱國家雲端。

1. 登入 Microsoft Entra 系統管理中心。
2. 若有權存取多個租用戶，請使用頂端功能表中的 [設定] 圖示 ，以從 [目錄 + 訂用帳戶] 功能表中切換至您想要在其中註冊應用程式的租用戶。
3. 瀏覽至 [身分識別] > [應用程式] > [應用程式註冊]，選取 [新增註冊]。

ASP.NET Core

1. 當 [註冊應用程式] 頁面出現時，輸入您應用程式的註冊資訊：
   1. 輸入應用程式的名稱，例如 AspNetCore-WebApp。 您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
   2. 選取應用程式支援的帳戶類型。 (請參閱支援的帳戶類型。)
   3. 在 [重新導向 URI] 中，新增應用程式類型，以及在成功驗證之後會接受所傳回權杖回應的 URI 目的地。 例如，輸入 https://localhost:44321。
   4. 選取註冊。
2. 選取 [管理] 下的 [驗證]，然後新增下列資訊：
   1. 在 [Web] 區段中，將 https://localhost:44321/signin-oidc 新增為 [重新導向 URI]。
   2. 在 [Front-channel logout URL] \(從前端通道登出 URL\) 中輸入 https://localhost:44321/signout-oidc。
   3. 選取儲存。

ASP.NET

1. 當 [註冊應用程式] 頁面出現時，輸入您應用程式的註冊資訊：
   1. 輸入應用程式的名稱，例如 MailApp-openidconnect-v2。 您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
   2. 選取應用程式支援的帳戶類型。 (請參閱支援的帳戶類型。)
   3. 在 [重新導向 URI (選用)] 區段中，選取下拉式方塊中的 [Web]，然後輸入 https://localhost:44326/ 的重新導向 URI。
   4. 選取 [暫存器] 以建立應用程式。
2. 在 [管理] 底下，選取 [驗證]。
3. 選取儲存。

Java

1. 在出現的 [註冊應用程式] 頁面中，輸入應用程式的註冊資訊：

   1. 輸入應用程式的名稱，例如 java-webapp。 您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
   2. 選取任何組織目錄中的帳戶及個人的 Microsoft 帳戶。
   3. 選取 [註冊] 以註冊應用程式。

2. 在 [管理] 底下，選取 [驗證]>[新增平台]。

3. 選取 Web。

4. 在 [重新導向 URI] 中輸入相同的主機和連接埠號碼，後接 /msal4jsample/secure/aad 作為登入頁面。

5. 選取設定。

6. 在 [Web] 區段中使用主機和連接埠號碼，後接 /msal4jsample/graph/me 作為使用者資訊頁面的重新導向 URI。 此範例預設會使用：

   • http://localhost:8080/msal4jsample/secure/aad
   • http://localhost:8080/msal4jsample/graph/me

7. 選取 [儲存]。

8. 在 [管理] 下，選取 [憑證和密碼]。

9. 在 [用戶端祕密] 區段中，選取 [新增用戶端祕密]，然後：

   1. 輸入金鑰描述。
   2. 選取 [1 年] 金鑰持續時間。
   3. 選取 [新增]。
   4. 複製出現的金鑰值以備之後使用。 此值將不再出現，也無法使用任何其他方式擷取。

Node.js

1. 當 [註冊應用程式] 頁面出現時，輸入您應用程式的註冊資訊：
   1. 輸入應用程式的名稱，例如 node-webapp。 您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
   2. 將 [支援的帳戶類型] 變更為 [僅此組織目錄中的帳戶]。
   3. 在 [重新導向 URI (選用)] 區段中，選取下拉式方塊中的 [Web]，然後輸入下列重新導向 URI：http://localhost:3000/auth/redirect。
   4. 選取 [暫存器] 以建立應用程式。
2. 在應用程式的 [概觀] 頁面上，尋找 [應用程式 (用戶端) 識別碼] 值並將它記下供稍後使用。 您將需要使用此識別碼來設定此專案的設定檔。
3. 在 [管理] 下，選取 [憑證和密碼]。
4. 在 [用戶端祕密] 區段中，選取 [新增用戶端祕密]，然後：
   1. 輸入金鑰描述。
   2. 選取 [1 年] 作為 [金鑰持續時間]。
   3. 選取 [新增]。
   4. 複製出現的金鑰值。 稍後您將需要此資訊。

Python

1. 當 [註冊應用程式] 頁面出現時，輸入您應用程式的註冊資訊：
   1. 輸入應用程式的名稱，例如 python-webapp。 您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
   2. 將支援的帳戶類型變更為任何組織目錄和個人 Microsoft 帳戶 (例如 Skype、Xbox、Outlook.com)。
   3. 在 [重新導向 URI (選用)] 區段中，選取下拉式方塊中的 [Web]，然後輸入下列重新導向 URI：http://localhost:5000/getAToken。
   4. 選取 [暫存器] 以建立應用程式。
2. 在應用程式的 [概觀] 頁面上，尋找 [應用程式 (用戶端) 識別碼] 值並將它記下供稍後使用。 您將需要此專案設定 .env 檔案。
3. 在 [管理] 下，選取 [憑證和密碼]。
4. 在 [用戶端祕密] 區段中，選取 [新增用戶端祕密]，然後：
   1. 輸入金鑰描述。 保留預設到期日。
   2. 選取 [新增]。
   3. 將 [用戶端密碼] 的 [值] 儲存至安全位置。 您將需要其來設定程式碼，而且稍後無法加以擷取。

使用 PowerShell 註冊應用程式

您也可以使用 New-MgApplication，向 Microsoft Graph PowerShell 註冊應用程式。

以下是程式碼的概念。 如需完整運作的程式碼，請參閱此範例

# Connect to the Microsoft Graph API, non-interactive is not supported for the moment (Oct 2021)
Write-Host "Connecting to Microsoft Graph"
if ($tenantId -eq "") {
   Connect-MgGraph -Scopes "User.Read.All Organization.Read.All Application.ReadWrite.All" -Environment $azureEnvironmentName
}
else {
   Connect-MgGraph -TenantId $tenantId -Scopes "User.Read.All Organization.Read.All Application.ReadWrite.All" -Environment $azureEnvironmentName
}
   
$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 AzureADandPersonalMicrosoftAccount `
                                                   #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://graph.microsoft.com/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)"

後續步驟

ASP.NET Core

移至此案例的下一篇文章：應用程式的程式碼設定。

ASP.NET

移至此案例的下一篇文章：應用程式的程式碼設定。

Java

移至此案例的下一篇文章：應用程式的程式碼設定。

Node.js

移至此案例的下一篇文章：應用程式的程式碼設定。

Python

移至此案例的下一篇文章：應用程式的程式碼設定。