【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例

azure,developer,app,service,放置,一个,js,页面,引用,msal,min,成功,获取,aad,用户名,示例 · 浏览次数 : 7

小编点评

**代码示例:** ```javascript // 配置MSAL应用程序 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, } }; // 检查用户是否已登录 if (msalConfig.auth.clientId) { // 获取当前用户信息 var user = msalConfig.auth.account; // 更新HTML元素的内容 document.getElementById('current-user').textContent = 'Current User: ' + user.name; } else { // 用户未登录,执行登录流程 msalConfig.auth.redirectUri = window.location.origin; msalConfig.auth.scopes = ['openid', 'profile']; msalConfig.loginPopup().then(function (response) { // 登录成功,获取用户信息 var user = msalConfig.auth.account; // 更新 HTML 元素的内容 document.getElementById('current-user').textContent = 'Current User: ' + user.name; }).catch(function (error) { // 登录失败,处理错误 console.error('Error:', error); }); } ``` **注意:** * 确保你已配置了Azure AD Application并获取了client ID和租户 ID。 * 将 `clientId` 和 `tenantId` 替换为你的实际值。 * 将 `window.location.origin` 替换为应用程序的回调地址。

正文

问题描述

在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

 

与【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例相似的内容:

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例

问题描述 在App Service上放置一个JS页面并引用msal.min.js,目的是获取AAD用户名并展示。 问题解答 示例代码 Azure Service

【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image

问题描述 使用Github Action,通过 Azure/functions-container-action@v1 插件来完成 yaml 文件的配置,并成功部署Function Image 的过程记录。 操作步骤 第一步: 准备Function的镜像文件 如在VS Code中,通过Termina

【Azure Developer】开发模式下使用AAD账号访问Azure Blob的相关参考

问题描述 开发模式下使用AAD账号访问Azure Blob的流程参考文件 问题解答 第一步:先在AAD中注册一个APP,步骤可参考: 将应用程序注册到 Microsoft 标识平台 :https://docs.azure.cn/zh-cn/active-directory/develop/quick

【Azure Developer】示例: 在中国区调用MSGraph SDK通过User principal name获取到User信息,如Object ID

问题描述 示例调用MSGraph SDK通过User principal name获取到User信息,如Object ID。 参考资料 选择 Microsoft Graph 身份验证提供程序 : https://learn.microsoft.com/zh-cn/graph/sdks/choose-

【Azure Developer】Go语言调用Azure SDK如何登录到中国区Azure环境

问题描述 在 “使用 Azure SDK for Go 进行 Azure 身份验证” 文章中的 Go 示例代码进行登录Azure时,默认指向的是Globa Azure。当只修改AAD AZURE_CLIENT_ID , AZURE_TENANT_ID 和 AZURE_CLIENT_SECRET参数值

【Azure Developer】Github Action使用Azure/login@v1插件登录遇见错误的替代方案

问题描述 在使用 Github Action - Azure/login@v1 的插件时候,登录中国区Azure遇见了问题。 Login YAML 内容: - name: 'Login via Azure CLI' uses: Azure/login@v1.4.6 with: creds: ${{

【Azure Developer】使用 Microsoft Graph API 获取 AAD User 操作示例

问题描述 查看官方文档“ Get a user ” , 产生了一个操作示例的想法,在中国区Azure环境中,演示如何获取AAD User信息。 问题解答 使用Microsoft Graph API,演示如何获取AAD User信息,因参考文档是针对Global Azure,所以文档种的URL为: /

【Azure Developer】如何通过Azure Portal快速获取到对应操作的API并转换为Python代码

问题描述 对于Azure资源进行配置操作,门户上可以正常操作。但是想通过Python代码实现,这样可以批量处理。那么在没有SDK的情况下,是否有快速办法呢? 问题解答 当然可以,Azure Portal上操作的所有资源都是通过REST API来实现的,所以只要找到正确的API,就可以通过浏览器中抓取

【Azure Developer】一个复制Redis Key到另一个Redis服务的工具(redis_copy_net8)

介绍一个简单的工具,用于将Redis数据从一个redis端点复制到另一个redis端点,基于原始存储库转换为.NET 8:https://github.com/LuBu0505/redis-copy-net8

【Azure Developer】.Net 简单示例 "文字动图显示" Typing to SVG

问题描述 看见一个有趣的页面,可以把输入的文字信息,直接输出SVG图片,还可以实现动图模式。 示例URL: https://readme-typing-svg.demolab.com/?font=Fira+Code&pause=1000&color=F7F7F7&background=233911F