问题描述

在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用户名示例的更多相关文章

  1. 【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图

    需要描述 1)实现黑客帝国文字流效果图,JS功能 2)部署在云中,让大家都可以访问,App Service实现 3)大家都能发送消息,并显示在文字流中,PubSub(websocket)实现 终极效果 ...

  2. 【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)

    问题描述 在Azure App Service上部署了站点,想要在网站的响应头中加一个字段(Cache-Control),并设置为固定值(Cache-Control:no-store) 效果类似于本地 ...

  3. 【Azure 应用服务】App Service中运行Python 编写的 Jobs，怎么来安装Python包 (pymssql)呢？

    问题描述 在App Service中运行Python编写的定时任务,需要使用pymssql连接到数据库,但是发现使用 python.exe -m pip install --upgrade -r re ...

  4. 在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈

    本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...

  5. 【Azure 应用服务】App Service 在使用GIt本地部署，上传代码的路径为/home/site/repository，而不是站点的根目录/home/site/wwwroot。 这个是因为什么？

    问题描述 App Service 在使用GIt本地部署,上传代码的路径为/home/site/repository,而不是站点的根目录/home/site/wwwroot. 这个是因为什么? 并且通过 ...

  6. 【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题

    问题描述 在.Net Core 5.0 项目中,添加 Microsoft.Extensions.Logging.AzureAppServices 和 Microsoft.Extensions.Logg ...

  7. 【Azure 应用服务】Python flask 应用部署在Aure App Service中作为一个子项目时，解决遇见的404 Not Found问题

    问题描述 在成功的部署Python flask应用到App Service (Windows)后,如果需要把当前项目(如:hiflask)作为一个子项目(子站点),把web.config文件从wwwr ...

  8. 【Azure 应用服务】App Service For Linux 如何在 Web 应用实例上住抓取网络日志

    问题描述 在App Service For Windows的环境中,我们可以通过ArmClient 工具发送POST请求在Web应用的实例中抓取网络日志,但是在App Service For Linu ...

  9. 【Azure 应用服务】App Service中，为Java应用配置自定义错误页面，禁用DELETE, PUT方法

    问题定义 使用Azure应用服务(App Service),部署Java应用,使用Tomcat容器,如何自定义错误页面呢?同时禁用DELETE, PUT方法 解决办法 如何自定义错误页面呢?需要在 J ...

  10. 【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后，如何通过内网访问内部VNET的APIM呢？

    问题描述 App Service访问的APIM已配置内部虚拟网络(Internal VNet)并拥有内网IP地址.App Service与APIM都在相同的虚拟网络(VNET)中.App Servic ...

随机推荐

  1. 02-面试必会-SSM框架篇

    01-什么是 Spring IOC 和 DI ? IOC : 控制翻转 , 它把传统上由程序代码直接操控的对象的调用权交给容 器,通过容器来实现对象组件的装配和管理.所谓的"控制反转&quo ...

  2. GPU技术在大规模数据集处理和大规模计算中的应用

    目录 GPU 技术在大规模数据集处理和大规模计算中的应用 随着深度学习在人工智能领域的快速发展,大规模数据处理和大规模计算的需求日益增长.GPU(图形处理器)作为现代计算机的重要部件,被广泛应用于这些 ...

  3. Python编程和数据科学中的人工智能：如何创建复杂的智能系统并提高模型性能

    目录 1. 引言 2. 技术原理及概念 3. 实现步骤与流程 4. 应用示例与代码实现讲解 标题:<Python编程和数据科学中的人工智能:如何创建复杂的智能系统并提高模型性能> 1. 引 ...

  4. React后台管理系统09 菜单组件的抽取

    修改Home.tsx的内容:将主菜单的内容进行抽离,然后单独引入=>MainMenu import { Breadcrumb, Layout, Menu } from 'antd'; impor ...

  5. 浏览器手动设置Cookie

    浏览器手动设置Cookie js代码: document.cookie="{KEY}={Value}":  可多次执执行.

  6. 2023-07-04：给定一个数组A, 把它分成两个数组B和C 对于数组A每个i位置的数来说， A[i] = B[i] + C[i] 也就是一个数字分成两份，然后各自进入B和C 要求B[i], C[i

    2023-07-04:给定一个数组A, 把它分成两个数组B和C 对于数组A每个i位置的数来说, A[i] = B[i] + C[i] 也就是一个数字分成两份,然后各自进入B和C 要求B[i], C[i ...

  7. 龙芯电脑编译redis (loongarch)

    1.获取源码 源码地址:https://redis.io/download/#redis-downloads 最新版本是7.2,这里用redis5测试,最后一个版本是5.0.14 wget https ...

  8. playwright（十三） - PyTest基本使用

      我们都知道,在做单元测试框架中有UnitTest和Pytest,前者是Python中自带无需安装,Pytest需要安装,今天我们来讲的就是Pytest,当然如果是做自动化,建议两个都要掌握一下,可 ...

  9. ChatGPT在工业领域的研究与应用探索-产品化部署及应用

    <ChatGPT在工业领域的研究与应用探索-数据与工况认知> <ChatGPT在工业领域的研究与应用探索-AI助手实验应用> ChatGPT在工业领域的应用需要解决两个问题:( ...

  10. switch写法详解

    我们在开发项目中经常遇到对数据的判断进行相应的逻辑(if..else  ,三元运算等),Switch 语句用来选择多个需要执行的代码块 ,一定程度上简化了if....else 1. 语法 switch ...