問題描述
在App Service上放置一個JS頁面並引用msal.min.js，目的是獲取AAD使用者名稱並展示。
問題解答
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>Azure Service</title>
</head>
<script type="text/javascript" src="https://alcdn.msauth.net/lib/1.4.18/js/msal.min.js"></script>
<body>
<h1>Welcome to Azure Service</h1>
<p id="current-user"></p>
<script>
// 定義Azure AD應用程式的客戶端ID和租戶ID
var clientId = 'xxxxxxxx-xxxx-xxxx-8906-xxxxxxxx';
var tenantId = 'xxxxxxxx-xxxx-xxxx-8f9f-xxxxxxxx';
// 建立Msal應用程式例項
var msalConfig = {
auth: {
clientId: clientId,
authority: 'https://login.partner.microsoftonline.cn/'+tenantId,
redirectUri: window.location.origin
}
};
var msalApplication = new Msal.UserAgentApplication(msalConfig);
// 檢查使用者是否已經登入
if (msalApplication.getAccount()) {
// 獲取當前使用者資訊
var user = msalApplication.getAccount();
// 更新HTML元素的內容
document.getElementById('current-user').textContent = 'Current User: ' + user.name;
} else {
// 使用者未登入，執行登入流程
// 使用者未登入，執行登入流程
msalApplication.loginPopup()
.then(function (response) {
// 登入成功，獲取使用者資訊
var user = msalApplication.getAccount();
// 更新 HTML 元素的內容
document.getElementById('current-user').textContent = 'Current User: ' + user.name;
})
.catch(function (error) {
// 登入失敗，處理錯誤
console.error('Error:', error);
});
}
</script>
</body>
</html>
注意事項
1) 在為 msalConfig 配置 authority 的時候，需要注意用指定AAD Application的TenantID，不要使用common代替，不然會遇見如下錯誤
ServerError: AADSTS50194: Application 'xxxxxxxx-3508-xxxx-8906-xxxx'(xxxxServicePrincipal) is not configured as a multi-tenant application. Usage of the /common endpoint is not supported for such applications created after '10/15/2018'. Use a tenant-specific endpoint or configure the application to be multi-tenant.
2） 一定要為AAD Application配置回撥地址(Redirect URIs), 不然會得到 AADSTS500113: No reply address is registered for the application.
3) AAD Application中配置的回撥地址一定是正確的地址，避免登陸後回撥錯誤
登入演示
參考資料
Microsoft Authentication Library for JavaScript (MSAL.js) : https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/lib/msal-core
Use MSAL in a national cloud environment : https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-national-cloud?tabs=javascript