问题描述

在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. stream流根据集合中的元素的属性进行去重的方法

    public class StreamListTest { public static void main(String[] args) { List<Student> studentLi ...

  2. ARHUD驾车导航技术概览

    ​ ARHUD (Augmented Reality Head Up Display),即增强现实与抬头显示的结合,是一种将渲染元素投影在真实世界的技术,也是目前用户理解成本最低的展示方式. HUD功 ...

  3. 如何将PCM格式的原始音频采样数据编码为MP3格式或AAC格式的音频文件？

    一.打开和关闭输入文件和输出文件以及判断输入文件是否读取完毕 //io_data.cpp static FILE* input_file= nullptr; static FILE* output_f ...

  4. Flex布局常用属性详解

    1. Flex布局与响应式布局 1.1 为什么需要响应式布局? 在电脑PC端,使用浮动,定位同时使用像素px单位就可以完成大部分布局,而且布局完之后不会有大问题,但是到了移动端,移动设备的屏幕尺寸多种 ...

  5. 简约版八股文（day2）

    Redis(内存中->非关系型数据库) redis是什么,为什么要用redis redis是基于键值对的NoSQL数据库,经常用来做缓存用户直接读取数据库中的数据效率是相对比较慢的,如果把数据读 ...

  6. Navicat 连接Oracle ORA-28547: connection to server failed, probable Oracle Net admin error

    Navicat 连接 Oracle 报 ORA-03135: connection lost contact ORA-28547: connection to server failed, proba ...

  7. 跟运维学 Linux - 02

    文件操作和用户 复制移动和删除 在Windows中我们可以通过快捷键 ctrl + c 复制,ctrl + v 粘贴,在 linux 中需要使用命令. 复制移动 cp 就是 copy 的意思.请看示例 ...

  8. postgresql + timescaledb离线安装笔记（zabbix数据库准备工作）

    实验环境 操作系统:centos 7.6 PostgreSQL:14.6 timescaledb:2.8.1 网络:本地无网络 1 编译源码安装 1.1 准备工作 useradd postgres m ...

  9. Go 语言 select 都能做什么？

    原文链接: Go 语言 select 都能做什么? 在 Go 语言中,select 是一个关键字,用于监听和 channel 有关的 IO 操作. 通过 select 语句,我们可以同时监听多个 ch ...

  10. git: 解决每次操作git时都要输入账户、密码

    解决方案 $ git config --global credential.helper store 使用该命令即可解决问题