开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在javascript中使用Graph toolkit people picker和现有的访问令牌？

在JavaScript中使用Graph Toolkit People Picker和现有的访问令牌，您可以按照以下步骤进行操作：

引入Graph Toolkit库：在HTML文件中引入Graph Toolkit库的脚本，可以通过以下链接获取：
引入Graph Toolkit库：在HTML文件中引入Graph Toolkit库的脚本，可以通过以下链接获取：
创建People Picker组件：在JavaScript代码中，使用以下代码创建一个People Picker组件，并将其添加到页面中的某个元素中：
创建People Picker组件：在JavaScript代码中，使用以下代码创建一个People Picker组件，并将其添加到页面中的某个元素中：
设置访问令牌：使用现有的访问令牌进行身份验证。您可以通过以下代码设置访问令牌：
设置访问令牌：使用现有的访问令牌进行身份验证。您可以通过以下代码设置访问令牌：
监听选择事件：您可以通过监听选择事件来获取用户选择的人员信息。例如，可以在选择人员后打印其电子邮件地址：
监听选择事件：您可以通过监听选择事件来获取用户选择的人员信息。例如，可以在选择人员后打印其电子邮件地址：

完整的示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Graph Toolkit People Picker</title>
  <script src="https://unpkg.com/@microsoft/mgt@2.0.0/dist/es6/index.js"></script>
</head>
<body>
  <div id="peoplePicker"></div>

  <script>
    const peoplePicker = new mgt.PeoplePicker(document.getElementById('peoplePicker'));

    const accessToken = 'YOUR_ACCESS_TOKEN';
    mgt.Providers.globalProvider.graph.client.config.authProvider = (done) => {
      done(null, accessToken);
    };

    peoplePicker.addEventListener('selectionChanged', (e) => {
      const person = e.detail;
      console.log(person.email);
    });
  </script>
</body>
</html>

请注意，上述示例中的YOUR_ACCESS_TOKEN应替换为您自己的有效访问令牌。此外，Graph Toolkit是由Microsoft提供的一套工具，用于简化与Microsoft Graph API的集成。它提供了一系列易于使用的组件和身份验证机制，以便在JavaScript应用程序中轻松地使用Microsoft Graph API。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Django REST Framework-基于Oauth2的身份验证（一）

OAuth2是一种广泛使用的身份验证和授权协议，许多大型服务如Google、Facebook和Twitter都使用了OAuth2。...在Django REST Framework中，我们可以使用django-oauth-toolkit库来实现OAuth2身份验证。...本文将介绍如何在Django REST Framework中使用基于OAuth2的身份验证，包括安装和配置django-oauth-toolkit，创建OAuth2客户端和授权服务器，以及使用OAuth2...您可以使用pip安装它：pip install django-oauth-toolkit安装完成后，您需要将其添加到Django项目的INSTALLED_APPS中：# settings.pyINSTALLED_APPS...SCOPES用于设置OAuth2的范围，ACCESS_TOKEN_EXPIRE_SECONDS和REFRESH_TOKEN_EXPIRE_SECONDS用于设置访问令牌和刷新令牌的过期时间，ROTATE_REFRESH_TOKEN

2.7K1 0

New UWP Community Toolkit

NuGet 包集合和描述，大家根据需求选择使用哪几个包： NuGet Package Name Description Microsoft.Toolkit .NET Standard NuGet package...Microsoft.Toolkit.Uwp.Notifications.Javascript Notification Packages for JavaScript Microsoft.Toolkit.Uwp.Services...Documentation UWP Community Toolkit 同样在 GitHub 开源：GitHub - Microsoft/UWPCommunityToolkit 对于功能使用和代码实现有任何的疑问...UWP 中做了完整的支持，可以自定义 markdown 解析器和渲染，保证流畅的 UI 体验，即使是在低配置的硬件上使用复杂的 markdown 规则。...这意味着，如之前所述，必须在第一个 Toast 绑定中提供回退负载。 7.

1.6K11 0

赠书 | 新手指南——如何通过HuggingFace Transformer整合表格数据

目前，使用非结构化文本数据的transformer模型已经为大众所熟知了。然而，在现实生活中，文本数据往往是建立在大量结构化数据或其他非结构化数据（如音频或视觉信息）的基础之上的。...首先，我们将从多模态学习领域开始——该领域旨在研究如何在机器学习中处理不同的模态。 ? 多模态文献综述目前的多模态学习模式主要集中在听觉、视觉和文本等感官模态的学习上。...其关键性创新是将图像特征作为附加令牌应用到transformer模型中。 ?...以上两个模型，对于给定的图像，预训练对象检测模型（如Faster R-CNN）会获取图像区域的向量表示，并将其视为输入令牌嵌入到transformer模型中。 ?...在本例中，我们将使用加权和的方法。在设置好tabular_config集之后，我们就可以使用与HuggingFace相同的API来加载模型。

1.5K2 0

绘制持仓榜单的“棒棒糖图”

Plotly plotly 库（plotly.py）是一个交互式的开源绘图库，支持40多种独特的图表类型，涵盖各种统计，财务，地理，科学和三维用例，是适用于Python，R 和 JavaScript 的交互式图表库...这些可视化效果可以显示在 Jupyter 笔记本中，可以保存到独立的 HTML 文件中，也可以作为纯 Python 使用。其官方文档上提供了各种图标的接口说明。 3....用scatter画左右两边线的散点，使用菱形marker并且scatter中的text可以标注线两端的标注期货公司和持仓数，注意持仓数都是正数。...，当然熟悉JavaScript和React.js也可构建自己的组件。...text-align": "center"}) ]) if __name__ == '__main__': app.run_server(debug=True) 启动应用程序，在浏览器中输入控制台的如下地址和端口号访问该网页

3.1K2 0

浏览器中存储访问令牌的最佳实践

问题是，如何在JavaScript中获取这样的访问令牌？当您获取一个令牌时，应用程序应该在哪里存储令牌，以便在需要时将其添加到请求中？...浏览器中的存储解决方案应用程序收到访问令牌后，需要存储该令牌以在API请求中使用它。浏览器中有多种方法可以持久化数据。应用程序可以使用专用API(如Web存储API或IndexedDB)来存储令牌。...例如，您可以定义一个单独的方法来使用令牌调用API。它不会向主应用程序(主线程)透露令牌。下面的摘录显示了如何在JavaScript中使用内存处理令牌的示例。...在使用JavaScript闭包或服务工作者处理令牌和API请求时，XSS攻击可能会针对OAuth流程，如回调流或静默流来获取令牌。...然后令牌用于安全访问API。总结使用OAuth和访问令牌可以最好地保护API访问。但是，JavaScript应用程序处于不利地位。浏览器中没有安全的令牌存储解决方案。

2181 0

【壹刊】Azure AD 保护的 ASP.NET Core Web API （下）

一，引言上一节讲到如何在我们的项目中集成Azure AD 保护我们的API资源，以及在项目中集成Swagger，并且如何把Swagger作为一个客户端进行认证和授权去访问我们的WebApi资源的？...这里直译起来比较拗口，其实说白了，就是这个令牌用于谁，使用令牌去访问谁，谁就是audience。　　2，iss（Issuer）：颁发者。...通过User的用户名和密码向认证中心申请访问令牌。　　按照惯例，在postman中直接进行调用order的接口。 ResponseCode:401,提示没有权限。...参数必传这时候，就又有人问了，为什么这里的 scope 参数的值和上面不一样，确实，我也有这个疑问，后来找到微软官方给我的文档解释道： Microsoft Graph 示例中，该值为 https...此值告知 Microsoft 标识平台终结点：在为应用配置的所有直接应用程序权限中，终结点应该为与要使用的资源关联的权限颁发令牌使用共享机密访问令牌请求：https://docs.microsoft.com

2.1K1 0

《101 Windows Phone 7 Apps》读书笔记-BOOK READER

这就可以在不给定宽度的条件下，使得每个条目中的元素（如页码）达到右对齐。 ?...该font picker由Silverlight for Windows Phone Toolkit中的list picker控件创建而来。 ? ?...数据模板同时绑定每个text block的FontFamily和Text属性，在列表中显示每个字符串。List picker支持两种不同的列表展示方式：内联模式和全模式。...如果我们直接把诸如text blocks或者toolkit中的ListPickerItem控件这些UI元素放置于list picker中，那么，在全屏模式显示时，会抛出异常。...基于计算得到的换页地点和换行地点，该控件为每一行文字增加一个text block来得到所有的页面。注意： ➔ 换行与换页的索引分别存储在各自的列表中。

1.2K6 0

还原Facebook数据泄漏事件始末，用户信息到底是如何被第三方获取的？

中读取数据首先是查询当你打开 Graph API Explorer 时，它将自动加载最新版本的 Graph API 和默认的 GET 请求，如：GET / me？...添加网址字段和值。此外，我还添加了标题字段。使用 publish_actions 权限访问令牌。...现在，使用 Get Token 下拉菜单选择你希望将访问令牌应用于的页面。在请求框中从 GET 切换到 POST。...首先，选择一个应用程序并从 Application 的下拉菜单中执行删除操作。在这个例子中，我们使用的是 Graph API Explorer 。...让我们列出你所拥有的所有页面。对于此请求，你将需要具有 manage_page 或pages_show_list 权限的用户访问令牌。然后，将账户添加到请求中。

3.7K5 0

Facebook Graph API(2)--读取数据之picture

Picture(图片) 在Graph API中提到图片不是照片的。此处的picture是指用户的头像，组，事件或应用和相册的图片。所以使用avatar也不是很好，毕竟不仅仅是用户头像。...但是这种方式是需要在访问令牌的应用或者网站中。...JSON格式开发过程中，可能需要在JavaScript里面操作图片，可以让服务器不返回图片，而是返回一个含有图片url的json格式数据。...所以需要设置access_token=token.但是facebook graph api目前没有给出不用访问令牌时，每个小时的最大访问次数。 5.内容审核因为这个api是去读取对象的图片。...直接设置width和height来返回指定的大小的图片 ?

2.8K7 0

OAuth2简化模式

授权流程OAuth2 简化模式的授权流程如下：前端客户端（如 JavaScript 应用）向认证服务器发起授权请求。认证服务器要求用户进行身份验证（如果用户没有登录）。...前端客户端从 URL 中解析授权码。前端客户端使用授权码向认证服务器请求访问令牌。认证服务器返回访问令牌。前端客户端使用访问令牌向资源服务器请求受保护的资源。...（C）客户端从 URL 中解析授权码。（D）客户端使用授权码向认证服务器请求访问令牌，请求包含以下参数：grant_type：固定为 implicit，表示采用简化模式。...用户体验良好：用户在进行身份验证后，无需再次输入用户名和密码，直接获得访问令牌，从而提高了用户体验。...不支持刷新令牌：由于没有授权码的参与，简化模式无法使用授权码来获取刷新令牌，因此无法支持刷新令牌的功能。令牌泄露风险：访问令牌存储在前端客户端中，容易被窃取或泄露，从而导致令牌被盗用。

1.8K1 0

BI仪表板数据可视化大屏

在这里我们简单根据大屏实现效果和功能进行分层：第一层：简单可视化手段的堆叠，如使用Echarts.js 或其他图表库，将静态的数据以可视化的样式展示出来，形成一个静态的自适应的数据可视化"报表"；第二层...image.png (2)拷贝浏览器地址栏 URL 将仪表板的URL地址拷贝粘贴到记事本中待用。 image.png (3)获取访问令牌进入系统后台管理 >生成令牌。...image.png 在这里需要注意生成令牌时使用的用户名，应具有待访问报表或仪表板的查看权限。...在浏览器中打开 http://localhost:51980/graphiql 网页（注意URL末尾的graph与ql之间有一个字母i），可随时调试API，如下图： image.png 接下来我们再来演示如何在...需要集成报表功能时，再从会话变量中取出令牌，串接在集成URL中。这样，业务系统的每个用户都是不同的令牌。从业务系统的登录画面中取出的用户登录信息，是用户输入的业务系统用户名和密码。

8.2K1 0

当.Net撞上BI可视化，这3种“套路”你必须知道

请确保使用的Token 具有足够权限（如查看仪表板，如集成设计器则需创建仪表板权限）。...(2)拷贝浏览器地址栏 URL 将仪表板的URL地址拷贝粘贴到记事本中待用。 (3)获取访问令牌进入系统后台管理 >生成令牌。...输入令牌信息，单击" 生成令牌"按钮即可生成该用户名的令牌字串；单击右侧的获取令牌按钮即可将令牌复制。在这里需要注意生成令牌时使用的用户名，应具有待访问报表或仪表板的查看权限。...在浏览器中打开 http://localhost:51980/graphiql 网页（注意URL末尾的graph与ql之间有一个字母i），可随时调试API，如下图：接下来我们再来演示如何在ASP.NET...需要集成报表功能时，再从会话变量中取出令牌，串接在集成URL中。这样，业务系统的每个用户都是不同的令牌。从业务系统的登录画面中取出的用户登录信息，是用户输入的业务系统用户名和密码。

3.1K2 0

《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK

所有的这些都是通过Setting类来完成的，之前介绍的几乎所有应用也是使用了Setting类。...这也影响了本书中每个使用color picker的应用程序，因为color picker直接更新ApplicationSettings。 ...图20.1 Alarm Clock所展示的设置页面该页面利用了Silverlight for Windows Phone Toolkit中的 toggle switch控件。...如何在设备内置的Setting页面中加入应用程序的页面？这是无法实现的。在当前的Windows Phone版本中，第三方应用只能在其应用本身中具备设置页面。 ...如果你的应用程序使用了特别的设备功能（如利用位置服务来获取邮政编码，而无需用户手动输入），微软推荐应用程序的设置页面应当提供设置来禁止这些功能。

1.1K6 0

一种不错的 BFF Microservice GraphQLREST API 层的开发方式

Brakes) 基于 JWT 的 API 安全性 - jsonwebtoken, express-jwt 现在使用超级快速的 pino 日志程序来满足所有的日志记录需求内置额外的性能时间记录查看...作为一个示例，graphqlcool/graphql-request 模块用于演示这一点，使用 graphqlcool 演示 graphQL api https://api.graph.cool/simple...cpu 和日志的详细信息安全已使用示例 JWT 私钥和公钥实现了基于 JWT 的安全性 REST API 和 GraphQL 都添加了示例实现。...如果启用了 JWT 安全性（环境变量 JWT_AUTH 为 true），我们需要使用登录突变 API 来获取示例 JWT 令牌（当前设置为1小时到期） Step 1 - 使用登录 mutation（突变...当前添加了一个使用 @date 指令的示例（如 graphql-tools 文档中所述） Query ({ today(format: "mmm-dd-yy") }) - 这里的格式基于@date scheme

2.3K1 0

完全媲美sublime的编辑器-Atom 原

有的时候就安装不上了，而且每次安装还要在列表里找上半天，有的地址没有插件还得换地址，有的报错是要对控制台重写命令，解决报错非常繁琐。...我调选一些比较重要的说明：一、前端人员（html，css，js使用者）： 1.emmet（※※※※※）这个不必多说，简洁编写，加快代码开发 2.color-picker（※※※...本质是监控文件修改，实时刷新浏览器，需要安装livereload插件和node.js插件，全局刷新相关使用可参考：https://my.oschina.net/u/3018050/blog/1626063...可修改上面的颜色，位置，行间距，宽度，空隙，文字透明度，编辑令牌被呈现为普通块是否考虑它们所包含的空白，是否显示侧边线滑动条，是否平滑滚动，所示区域遮罩颜色，缩略图hover时显示颜色， 3....支持html，css，javascript，java，go等等，反正常见的语言基本都支持了。 4.Linter（※※）帮助你编写专业的代码，开发者必备插件。

1.9K3 0

【工具】2102- es-toolkit：一个现代 JavaScript 工具包，体积更小，内置 TypeScript 支持

介绍 es-toolkit 是一款先进且具备高性能的现代化 JavaScript 实用工具库，其拥有较小的捆绑包规模以及强大的类型注解，同时还提供了一系列非常不错的函数，适合日常使用。...设计时考虑了性能，es-toolkit 在现代 JavaScript 环境中“实现了 2-3 倍的性能提升”。...es-toolkit 提供了一些常用功能： Array: 数组操作工具，如 uniq 和 difference。...Object: 操作 JavaScript 对象的工具，如 pick 和 omit。 Predicate: 类型保护函数，如 isNotNil。 Promise: 异步操作工具，如 delay。...借由充分运用现代 JavaScript API ，有的函数甚至能够达成高达 11 倍的性能提升呢。在 MacBook Pro 14-inch (M1 Max, 2021) 上进行了测试。

2511 0

OAuth2的定义和运行流程

从QQ授权登录机制中，我们基本可以看到OAuth认证的流程和形式。...，确认有效后发放访问令牌客户端使用访问令牌向资源服务器申请资源资源服务器验证访问令牌，确认无误后向客户端提供资源在这个流程中，第二步OAuth定义了4种授权模式，用于将用户的授权许可提供给客户端。...百度使用QQ账户登录就是使用的该模式，如下。 https://graph.qq.com/oauth2.0/show?...访问令牌通过重定向的方式传递到用户浏览器中，再通过浏览器的JavaScript代码来获取访问令牌。...关于OAuth2的定义和运行流程先讲到这里，下篇将在Spring Security中使用OAuth2。

8554 0

怎样解决 JavaScript 生态中第三方安全性问题？

（1）和（2）显然要求对当今所有的运行时进行重大更改。...Spectre Spectre 类攻击说的是在进程上运行的代码，可以使用 CPU 逆向工程和时间信息来读取同一进程中其他独立代码使用的秘密信息，比如密码、安全令牌等首先要注意的是，Spectre...中它将此绑定设置为数组本身，从而允许从 graph 组件访问 title 组件。...是的，这是一个人为的示例，但是它演示了如何在 JavaScript 中轻松实现功能泄漏，而这甚至还没有涉及到信息泄漏（例如通过toString()）。...生态系统兼容性可以使用 codemods 提供现有的 JavaScript 支持，它们将包转换为要在安全运行时中执行的形式。这并非易事，但在超过 90％的情况下应该能提供生态系统兼容性。

6751 0

自然语言处理学术速递

这使得使用转换器处理长序列变得特别困难。为了解决这个问题，我们提出了一种新的学习令牌修剪（LTP）方法，该方法在数据通过Transformer的不同层时减少冗余令牌。...重要的是，我们的基于阈值的方法避免了算法上昂贵的操作，如top-k令牌选择，这是在以前的令牌剪枝方法中使用的，而且还导致结构化剪枝。...我们广泛地测试了我们的方法在多个粘合任务上的性能，结果表明，在相同的失败次数下，我们的基于学习阈值的方法比现有的基于top-k令牌的方法的精度高出约2%。...与现有的方法不同，CRT使用这种转换器来集成图像中物体的视觉特征和几何特征。由于Case关系块，CRT可以处理对象。我们进行了对比实验和人体评估。实验结果表明，CRT方法优于基线方法。...我们开源了一个易于使用的工具：DRIFT，它允许研究人员跟踪多年来的研究趋势和发展。这些分析方法是从被广泛引用的研究著作中整理出来的，并加入了一些我们自己的方法。

3453 0

Spring Boot实战第七章-SpringBoot Web开发-Thymeleaf模板引擎

2.如何在spring boot中引入使用（1）引入依赖 org.springframework.boot <...th:为前缀通过@{}引入web静态资源 (2).访问model中的数据 ${} 例如：<span...:${people}”，person作为迭代元素来使用 (4).数据判断 Thymeleaf支持>、=、<=、==、!...=作为比较条件，同时也支持将SpringEL表达式应用于条件中例如：th:if=”${not #lists.isEmpty(people)} (5).JavaScript访问model 通过th:inline...=”javascript”添加到script标签，这样JavaScript可以访问model中的属性通过”[[${}]]”获取实际的值还有一种需要在html中获取model中的属性，格式例如：th:

8293 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭