问题描述

在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. [ARM 汇编]高级部分—系统控制协处理器—3.2.3 控制寄存器的读写操作

    在这一部分,我们将学习如何使用ARM汇编指令在系统控制协处理器(CP15)的控制寄存器上执行读写操作.我们将通过实例来讲解如何使用MCR(Move to Coprocessor Register)和M ...

  2. uniapp-chatgpt跨端仿ChatGPT实例|uniapp+vue3+pinia多端聊天模板

    基于uniapp+vite4+pinia跨多端实现chatgpt会话模板Uniapp-ChatGPT. uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plu ...

  3. SQL Server中的NULL值处理：判断与解决方案

    摘要: 在SQL Server数据库中,NULL是表示缺少数据或未知值的特殊标记.处理NULL值是SQL开发人员经常遇到的问题之一.本文将介绍SQL Server中判断和处理NULL值的不同方法,以及 ...

  4. Go优雅的错误处理: 支持错误堆栈, 错误码, 错误链的工具库

    地址: https://github.com/morrisxyang/errors 如果觉得有用欢迎 Star 和 PR, 有问题请直接提issue errors 简单的支持错误堆栈, 错误码, 错误 ...

  5. matlab 整数提升为正整数幂

    matlab 整数提升为正整数幂 在使用matlab 的gui界面绘制时报的错误, 是因为之前数据有非double类型的数据,但是有的数据看起来确实是double类型的,但是程序还是报错跑不下去 解决 ...

  6. stegsolve与zsteg的使用

    zsteg 介绍:用来检测PNG和BMP中隐藏数据的工具,可以快速提取隐藏信息 使用环境:kali kali自带zsteg,可以用这个指令使用 gem install zsteg 下载完之后查看使用方 ...

  7. java中Object 类

    一. Object类简介 Object类是Java.java.lang包下的核心类,Object类是所有类的父类,任何一个类如果没有明确的继承一个父类的话,那么它就是Object的子类: (使用无需导 ...

  8. 关于 async 和 await 两个关键字（C#）【并发编程系列】

    〇.前言 对于 async 和 await 两个关键字,对于一线开发人员再熟悉不过了,到处都是它们的身影. 从 C# 5.0 时代引入 async 和 await 关键字,我们使用 async 修饰符 ...

  9. DevOps实战：使用GitLab+Jenkins+Kubernetes(k8s)建立CI/CD解决方案

    目录 一.系统环境 二.前言 三.DevOps简介 四.CI/CD简介 五.安装并配置docker参数 六.使用registry搭建镜像仓库 七.安装部署gitlab代码仓库 7.1 创建gitlab ...

  10. 简单运维oceanbase

    简单运维oceanbase 数据库集群参数修改 直连 proxy 连接 手动修改参数 show parameters like '%xx%' ; alter system set xxx='xx'; ...