问题描述

在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. 全面解析PCIDSS中的设备访问控制和网络访问控制

    目录 1. 引言 2. 技术原理及概念 3. 实现步骤与流程 4. 应用示例与代码实现讲解 1. 引言 PCI DSS是PCI设备安全标准(PCI DSS)的缩写,是由PCI设备制造商和PCI服务提供 ...

  2. Github秒变VSCode在线编辑器

    在仓库页面 在网页地址中github后面加上 1s 即可

  3. Maven-Could not calculate build plan错误解决方法

    报错如图: 报错情况: 可以创建简单的maven项目例子,但是无法创建web的maven项目 解决方法: 1.安装maven插件后,c盘下会生成.m2文件夹 .m2\repository\org\ap ...

  4. 【转载】老男孩读PCIe

    目录 老男孩读PCIe之一:从PCIe速度说起 老男孩读PCIe之二:PCIe拓扑结构 老男孩读PCIe之三:PCIe分层结构 老男孩读PCIe之四:TLP类型 老男孩读PCIe之五:TLP结构 老男 ...

  5. 开源BaaS平台Supabase介绍

    Supabase 介绍 Supabase 是一个开源的 Firebase 替代品,以BaaS的形式向各种应用程序提供了一系列的后端功能,可以帮助开发者更快地构建产品. 对于想快速实现一个产品而言,如果 ...

  6. 《最新出炉》系列入门篇-Python+Playwright自动化测试-9-页面（page）

    1.简介 通过前边的讲解和学习,细心认真地小伙伴或者童鞋们可能发现在Playwright中,没有Element这个概念,只有Page的概念,Page不仅仅指的是某个页面,例如页面间的跳转等,还包含了所 ...

  7. Vue详解----一篇带你从头领悟到尾，享受飞升的感觉

    脚手架文件结构 """ ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ...

  8. 2021-3-13 xml的增删改查

    public void XmlAdd(string filename, List<People> pList) { try { List<People> peoples = X ...

  9. SwiftUI的认识与使用

      SwiftUI简介 SwiftUI是苹果推出的一个新的UI框架,它使用了声明的方式,通过视图,基础控件和布局控件来进行页面的开发. SwiftUI具有跨平台性,一份SwiftUI代码可以同时跑在i ...

  10. CF1601 题解

    偶然看这一场的题目,忽然很有感觉,于是写了一下 A 题面 考虑每一位可以单独分开考虑 考虑单独的一位,每次要选 \(m\) 个位置,可能产生贡献的位置就是这位为 1 的数,设数量为 \(x\),则 \ ...