首页 > 其他分享 >【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例

时间:2023-10-11 22:32:06浏览次数:35  
标签:AAD xxxx 登录 Service 示例 xxxxxxxx user var msal

问题描述

在App Service上放置一个JS页面并引用msal.min.js,目的是获取AAD用户名并展示。

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例_microsoft

问题解答

示例代码

<!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.

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例_microsoft_02

2) 一定要为AAD Application配置回调地址(Redirect URIs), 不然会得到 AADSTS500113: No reply address is registered for the application.

3)   AAD Application中配置的回调地址一定是正确的地址,避免登陆后回调错误

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例_microsoft_03

 

登录演示

【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例_microsoft_04

 

 

 

参考资料

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

 


当在复杂的环境中面临问题,格物之道需:浊而静之徐清,安以动之徐生。 云中,恰是如此!

标签:AAD,xxxx,登录,Service,示例,xxxxxxxx,user,var,msal
From: https://blog.51cto.com/u_13773780/7816826

相关文章

  • Servlet.service() for servlet [dispatcherServlet] in context with path []
    一个不小心出现的错误,接口测试报500日志输出信息如下:[nio-8080-exec-2]o.a.c.c.C.[.[.[/].[dispatcherServlet]:Servlet.service()forservlet[dispatcherServlet]incontextwithpath[]threwexception[Requestprocessingfailed;nestedexceptionisjava.lang.Nu......
  • 软件测试|深入理解SQL RIGHT JOIN:语法、用法及示例解析
    引言在SQL中,JOIN是一种重要的操作,用于将两个或多个表中的数据关联在一起。SQL提供了多种JOIN类型,其中之一是RIGHTJOIN。RIGHTJOIN用于从右表中选择所有记录,并将其与左表中匹配的记录组合在一起。本文将深入探讨SQLRIGHTJOIN的语法、用法以及通过实例解析来说明其作用。RIGH......
  • 软件测试|深入理解SQL FULL JOIN:语法、用法及示例解析
    简介在SQL中,JOIN是一个强大的操作,它允许将两个或多个表中的数据进行关联。SQL提供了多种JOIN类型,其中之一是FULLJOIN。FULLJOIN允许从左表和右表中选择所有记录,并将它们组合在一起。本文将深入探讨SQLFULLJOIN的语法、用法,并通过实例解析来说明其作用。FULLJOIN基本语法......
  • 【Azure Developer】示例: 在中国区调用MSGraph SDK通过User principal name获取到Use
    问题描述示例调用MSGraphSDK通过Userprincipalname获取到User信息,如ObjectID。 参考资料选择MicrosoftGraph身份验证提供程序: https://learn.microsoft.com/zh-cn/graph/sdks/choose-authentication-providers?tabs=java#using-a-client-secret-2MicrosoftGraphSDKfor......
  • 强制等待和隐式等待示例
    背景知识 发送回车键  fromselenium.webdriver.common.keysimportKeysdriver.find_element(By.CSS_SELECTOR,loc).send_keys(Keys.ENTER)  隐式等待的意思是当符合条件就结束等待,不符合持续等待对比   第一种 强制等待fromseleniumimportwebdri......
  • Composite 组合模式简介与 C# 示例【结构型3】【设计模式来了_8】
    〇、简介1、什么是组合设计模式?一句话解释:  针对树形结构的任意节点,都实现了同一接口,他们具有相同的操作,可以通过某一操作来遍历全部节点。组合模式通过使用树形结构来组合对象,用来表示部分以及整体层次。组合模式属于结构型模式,多用于递归。官方意图描述:将对象组合成树形......
  • 常用Stream API示例
    1.flatMap    将多个集合压平为一个集合List<Long>siteIdList=routeLines.stream() .flatMap(routeLine->Stream.of(routeLine.getSubLineFSiteId(),routeLine.getSubLineTSiteId())) .distinct() .collect(Collectors.toList());2.Collectors.toMap()......
  • C#调用WebService
     一、前言在日常工作中,如果涉及到与第三方进行接口对接,有的会使用WebService的方式,这篇文章主要讲解在.NETFramework中如何调用WebService。首先我们创建一个WebService,里面有两个方法:一个无参的方法,一个有参的方法:创建好了WebService以后,把WebService部署到IIS上,并确保可......
  • .net 调用webservice 总结
    最近做一个项目,由于是在别人框架里开发app,导致了很多限制,其中一个就是不能直接引用webservice。我们都知道,调用webserivice最简单的方法就是在"引用" 那里点击右键,然后选择"引用web服务",再输入服务地址。确定后,会生成一个app.config里面就会自动生成了一些配置信息。现......
  • MYSQL-sql语句示例
    数据库操作:创建数据库:CREATEDATABASEdatabase_nameCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;删除数据库:DROPDATABASEIFEXISTSdatabase_name;切换数据库:USEdatabase_name;表的管理:创建表:CREATETABLEtable_name(column1datatypeconstraint,colu......