问题描述

在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. 4. Mybatis的增删改查(CRUD)

    1.新增 ‍ <!--int insertUser();--> <insert id="insertUser"> insert into t_user va ...

  2. 如何通过AWS的AmazonSageMaker进行机器学习

    目录 <如何通过 AWS 的 Amazon SageMaker 进行机器学习> 一.引言 随着人工智能和机器学习的发展,越来越多的企业和机构开始使用这些技术来进行各种应用场景的处理和分析. ...

  3. 6个常见的IB网络不通问题

    摘要:如果遇到IB网络不通,可以试着从高层往底层逐步分析看看. 本文分享自华为云社区<常见IB网络不通问题记录>,作者: tsjsdbd . 如果遇到IB网络不通,可以试着从高层往底层逐步 ...

  4. 微调用于多语言 ASR 的 MMS 适配器模型

    新内容 (06/2023): 这篇博文受到 "在多语言 ASR 上微调 XLS-R" 的强烈启发,可以看作是它的改进版本. Wav2Vec2 是自动语音识别 (ASR) 的预训练模 ...

  5. Java开发大型互联网-架构师必须掌握的分布式技术

    Java开发大型互联网-架构师必须掌握的分布式技术 摘要:在当今互联网行业,随着用户量和业务的不断增长,大型互联网系统的设计和开发已经成为了一项头等重要的任务.作为架构师,要能够应对这样的挑战,就必须 ...

  6. 2023年icpc大学生程序设计竞赛-nhr

    icpc的省赛是在洛阳举办,第一次出省,还是两天,第一次离开郑州去别的城市比赛,心情更多的是激动,非常感谢老师给了这次机会,第一天20号,打完热身赛之后回寝室,和队友一起看了一下去年省赛的题,感觉还是 ...

  7. 【go语言】2.4.1 如何导入和使用包

    在 Go 语言中,包(package)是代码的组织方式.每个 Go 程序都由包构成,程序从 main 包开始运行. 导入包 使用 import 关键字可以导入包.导入的包可以是 Go 标准库中的包,也 ...

  8. rman catalog 遇到的一个错误

    [oracle@source admin]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.3.0 Production on Thu Jun 22 09: ...

  9. vscode+gdb 配置

    到这个网址下载 mingw c语言环境 https://sourceforge.net/projects/mingw-w64/files/mingw-w64/ 我是windows64 位,直接下载这个 ...

  10. [golang]获取本机IP

    前言 方便在内网环境中获取服务器本机IP,省了在脚本中过滤ip或ifconfig的结果. 如果内网中有nginx的话,通过nginx获取本机IP也很方便,可参考 借助nginx自动获取本机IP 示例代 ...