├── .gitignore ├── LICENSE ├── README-localized ├── README-zh-cn.md ├── README-ja-jp.md ├── README-pt-br.md ├── README-ru-ru.md ├── README-es-es.md └── README-fr-fr.md ├── README.md ├── PeoplePicker.html └── CONTRIBUTING.md /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Microsoft 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-localized/README-zh-cn.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "本示例演示如何使用从 Microsoft Graph 检索的数据填充 Office UI Fabric JS PeoplePicker 组件。" 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Microsoft Graph Office UI Fabric JS PeoplePicker 示例 21 | 22 | ## 目录 23 | 24 | * [简介](#introduction) 25 | * [先决条件](#prerequisites) 26 | * [注册应用程序](#register-the-application) 27 | * [运行示例](#run-the-sample) 28 | * [问题和意见](#questions-and-comments) 29 | * [参与](#contributing) 30 | * [其他资源](#additional-resources) 31 | 32 | ## 简介 33 | 34 | 本示例演示如何使用从 Microsoft Graph 检索的数据填充 [Office UI Fabric JS PeoplePicker 组件](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md)。它使用 [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) 来处理 Microsoft Graph 返回的数据。示例中的单个 HTML 文件包含了创建 PeoplePicker 组件并请求 Microsoft Graph 数据所需的所有 HTML 和 Javascript。 35 | 36 | ## 先决条件 37 | 38 | 本示例要求如下: 39 | 40 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * 用于托管 HTML 文件的 Web 服务器。此服务器必须支持 SSL 请求。 43 | * Microsoft [工作或学校帐户](https://dev.office.com/devprogram)。本示例依靠请求获取当前用户的前 4 个联系人。此请求只能通过工作或学校帐户进行。 44 | 45 | 1. 导航到 [Azure 门户 -“应用注册”](https://go.microsoft.com/fwlink/?linkid=2083908)页面。 46 | 1. 选择“**新注册**”。 47 | 1. 出现“**注册应用程序**”页面后,输入应用程序的注册信息: 48 | - 在“**名称**”部分,输入一个会显示给应用用户的有意义的应用程序名称,例如 `People Picker`。 49 | - 在“**受支持的帐户类型**”部分,选择“**任何组织目录中的帐户**”。 50 | 1. 在“重定向 URI”下,将第一个下拉列表设置为“Web”,并将值设置为托管的 URL,例如“https://localhost/PeoplePicker.html” 51 | 1. 选择“**注册**”以创建应用程序。 52 | 1. 在应用的“**概述**”页面上,查找“**应用程序(客户端) ID**”值,记录下来以供稍后使用。你将需要使用该值来配置 PeoplePicker.html 53 | 1. 在应用的页面列表中,选择“**清单**”,然后: 54 | - 在清单编辑器中,将 ``allowPublicClient`` 属性设置为 **true** 55 | - 在清单编辑器上方的栏中选择“**保存**”。 56 | 1. 在应用的页面列表中,选择“**API 权限**” 57 | - 单击“**添加权限”**按钮,然后, 58 | - 确保已选中”**Microsoft API**”选项卡 59 | - 在“*常用 Microsoft API*”部分,单击“**Microsoft Graph**” 60 | - 在“**委派权限**”部分,确保已选中适当的权限:**User.Read**、**Mail.Send**、**User.ReadBasic.All**、**People.Read**、**People.Read.All**。必要时请使用搜索框。 61 | - 选择“**添加权限**”按钮 62 | 63 | ## 运行示例 64 | 65 | 1. 在任何文本编辑器或 IDE 中打开 PeoplePicker.html 文件。查找以下行,并为其填充相应的 `clientId` 值(注册应用时收到的应用程序 ID)和 `redirectUrl` 值 (*https://your host/PeoplePicker.html*)。 66 | 67 |
68 | var clientId = "your application Id here"; 69 |70 | 71 | 2. 复制或克隆 [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript),并确保 SDK 文件的以下链接在 PeoplePicker.html 文件中正确。 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. 复制或克隆 [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 存储库,并确保核心 Office UI Fabric 文件的以下链接在 PeoplePicker.html 文件中正确。 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. 将 PeoplePicker.html 文件复制到 Web 主机的根目录。 84 | 85 | 5. 在浏览器(Chrome 或 Firefox)中,导航到 *https://your host/PeoplePicker.html*。 86 | 87 | 6. 选择“*登录*”按钮以使用你的工作或学校帐户登录,并授予所请求的权限。 88 | 89 | 7. 选择“*填充选取器*”按钮以使用当前用户的联系人信息填充 PeoplePicker 组件。 90 | 91 | 92 | ## 问题和意见 93 | 94 | 我们乐意倾听你对本示例的反馈。你可以在该存储库中的[问题](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues)部分将问题和建议发送给我们。 95 | 96 | 你的反馈对我们意义重大。请在 [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph) 上与我们联系。请给你的问题添加 \[MicrosoftGraph] 标记。 97 | 98 | ## 参与 ## 99 | 100 | 如果想要参与本示例,请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。 101 | 102 | 此项目遵循 [Microsoft 开放源代码行为准则](https://opensource.microsoft.com/codeofconduct/)。有关详细信息,请参阅[行为准则常见问题解答](https://opensource.microsoft.com/codeofconduct/faq/)。如有其他任何问题或意见,也可联系 [opencode@microsoft.com](mailto:opencode@microsoft.com)。 103 | 104 | ## 其他资源 105 | 106 | - [其他 Microsoft Graph 示例](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Microsoft Graph 概述](https://graph.microsoft.io) 108 | 109 | ## 版权信息 110 | 版权所有 (c) 2019 Microsoft。保留所有权利。 111 | -------------------------------------------------------------------------------- /README-localized/README-ja-jp.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "このサンプルは、Office UI Fabric JS PeoplePicker コンポーネントに Microsoft Graph から取得したデータを取り込む方法を示しています。" 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Microsoft Graph Office UI Fabric JS PeoplePicker サンプル 21 | 22 | ## 目次 23 | 24 | * [はじめに](#introduction) 25 | * [前提条件](#prerequisites) 26 | * [アプリケーションの登録](#register-the-application) 27 | * [サンプルの実行](#run-the-sample) 28 | * [質問とコメント](#questions-and-comments) 29 | * [投稿](#contributing) 30 | * [その他のリソース](#additional-resources) 31 | 32 | ## 概要 33 | 34 | このサンプルは、[Office UI Fabric JS PeoplePicker コンポーネント](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md)に、Microsoft Graph から取得したデータを取り込む方法を示しています。[Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) を使用して、Microsoft Graph が返すデータを操作します。PeoplePicker コンポーネントを作成して、Microsoft Graph データを要求するために必要な HTML と Javascript のすべてを含む 1 つの HTML ファイルが含まれています。 35 | 36 | ## 前提条件 37 | 38 | このサンプルを実行するには次のものが必要です。 39 | 40 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * HTML ファイルをホストする Web サーバー。このサーバーは SSL 要求をサポートする必要があります。 43 | * Microsoft の[職場または学校のアカウント](https://dev.office.com/devprogram)。このサンプルでは、現在のユーザーの上位 4 件の連絡先を取得する要求を使用します。この要求は、職場または学校のアカウントでのみ機能します。 44 | 45 | 1. [Azure portal の [アプリの登録]](https://go.microsoft.com/fwlink/?linkid=2083908) ページに移動します。 46 | 1. [**新規登録**] を選択します。 47 | 1. [**アプリケーションの登録ページ**] が表示されたら、以下のアプリケーションの登録情報を入力します。 48 | - **[名前]** セクションに、アプリのユーザーに表示されるわかりやすいアプリケーション名を入力します (例: `People Picker`)。 49 | - [**サポート対象のアカウントの種類**] セクションで、[**任意の組織ディレクトリのアカウント**] を選択します。 50 | 1. [リダイレクト URI] で、最初のドロップダウン リストを [Web] に設定し、ホストする URL (例: 'https://localhost/PeoplePicker.html') に値を設定します 51 | 1. [**登録**] を選択して、アプリケーションを作成します。 52 | 1. アプリの [**概要**] ページで、[**Application (client) ID**] (アプリケーション (クライアント) ID) の値を確認し、後で使用するために記録します。PeoplePicker.html を校正するために必要です 53 | 1. アプリのページの一覧から [**マニフェスト**] を選択します。 54 | - マニフェスト エディターで ``allowPublicClient`` プロパティを **true** に設定します。 55 | - マニフェスト エディターの上のバーの [**保存**] を選択します。 56 | 1. アプリのページの一覧から [**API のアクセス許可**] を選択します。 57 | - [**アクセス許可の追加]**] ボタンをクリックします 58 | - [**Microsoft API**] タブが選択されていることを確認します 59 | - [*一般的に使用される Microsoft API*] セクションで、[**Microsoft Graph**] をクリックします 60 | - [**委任されたアクセス許可**] セクションで、適切なアクセス許可がチェックされていることを確認します。[**User.Read**]、[**Mail.Send**]、[**User.ReadBasic.All**]、[**People.Read**]、[**People.Read.All**] (必要に応じて検索ボックスを使用します)。 61 | - [**アクセス許可の追加**] ボタンを選択します 62 | 63 | ## サンプルの実行 64 | 65 | 1. 任意のテキスト エディターまたは IDE で PeoplePicker.htm ファイルを開きます。これらの行を検索し、`clientId` (アプリを登録したときに取得したアプリケーション ID) および `redirectUrl` (*https://your host/PeoplePicker.html*) に対応する値を入力します。 66 | 67 |
68 | var clientId = "ここにアプリケーション ID を入力します"; 69 |70 | 71 | 2. [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) をコピーまたは複製し、PeoplePicker.html ファイル内の SDK ファイルに対するこのリンクが正しいことを確認します。 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) repo をコピーまたは複製し、PeoplePicker.html ファイル内のコア Office UI Fabric に対するこれらのリンクが正しいことを確認します。 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. PeoplePicker.html ファイルを Web ホストのルート ディレクトリにコピーします。 84 | 85 | 5. ブラウザー (Chrome または Firefox) で、*https://your host/PeoplePicker.html* に移動します。 86 | 87 | 6. [*ログイン*] ボタンを選択し、職場または学校のアカウントでログインし、要求されたアクセス許可を付与します。 88 | 89 | 7. [*ピッカーの入力]* ボタンを選択して、PeoplePicker コンポーネントに現在のユーザーの連絡先に関する情報を 入力します。 90 | 91 | 92 | ## 質問とコメント 93 | 94 | このサンプルに関するフィードバックをお寄せください。質問や提案につきましては、このリポジトリの「[問題](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues)」セクションで送信できます。 95 | 96 | お客様からのフィードバックを重視しています。[スタック オーバーフロー](https://stackoverflow.com/questions/tagged/microsoftgraph)でご連絡ください。ご質問には [MicrosoftGraph] のタグを付けてください。 97 | 98 | ## 投稿 ## 99 | 100 | このサンプルに投稿する場合は、[CONTRIBUTING.md](CONTRIBUTING.md) を参照してください。 101 | 102 | このプロジェクトでは、[Microsoft Open Source Code of Conduct (Microsoft オープン ソース倫理規定)](https://opensource.microsoft.com/codeofconduct/) が採用されています。詳細については、「[Code of Conduct の FAQ (倫理規定の FAQ)](https://opensource.microsoft.com/codeofconduct/faq/)」を参照してください。また、その他の質問やコメントがあれば、[opencode@microsoft.com](mailto:opencode@microsoft.com) までお問い合わせください。 103 | 104 | ## その他のリソース 105 | 106 | - [Microsoft Graph の他のサンプル](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Microsoft Graph の概要](https://graph.microsoft.io) 108 | 109 | ## 著作権 110 | Copyright (c) 2019 Microsoft.All rights reserved. 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [ARCHIVED] Microsoft Graph Office UI Fabric JS PeoplePicker Sample 2 | 3 | 4 | ## IMPORTANT 5 | 6 | **This project is being archived. As part of the archival process, we're closing all open issues and pull requests. For UI components designed to work with Microsoft Graph and React (as well as other web-based frameworks), see the [Microsoft Graph Toolkit](https://docs.microsoft.com/graph/toolkit/overview)** 7 | 8 | **You can continue to use this sample "as-is", but it won't be maintained moving forward. We apologize for any inconvenience.** 9 | 10 | ## Table of contents 11 | 12 | * [Introduction](#introduction) 13 | * [Prerequisites](#prerequisites) 14 | * [Register the application](#register-the-application) 15 | * [Run the sample](#run-the-sample) 16 | * [Questions and comments](#questions-and-comments) 17 | * [Contributing](#contributing) 18 | * [Additional resources](#additional-resources) 19 | 20 | ## Introduction 21 | 22 | This sample demonstrates how to populate an [Office UI Fabric JS PeoplePicker component](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md) with data retrieved from Microsoft Graph. It uses the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) to work with data returned by Microsoft Graph. It consists of a single HTML file that contains all of the HTML and Javascript required to create a PeoplePicker component and request the Microsoft Graph data. 23 | 24 | ## Prerequisites 25 | 26 | This sample requires the following: 27 | 28 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 29 | * [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) 30 | * A web server to host the HTML file. This server must support SSL requests. 31 | * A Microsoft [work or school account](https://dev.office.com/devprogram). This sample relies on a request to get the top 4 contacts for the current user. This request will work only with a work or school account. 32 | 33 | 1. Navigate to the [Azure portal - App registrations](https://go.microsoft.com/fwlink/?linkid=2083908) page. 34 | 1. Select **New registration**. 35 | 1. When the **Register an application page** appears, enter your application's registration information: 36 | - In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example `People Picker`. 37 | - In the **Supported account types** section, select **Accounts in any organizational directory**. 38 | 1. Under Redirect URI, set the first drop-down to Web and set the value to your hosted url e.g. 'https://localhost/PeoplePicker.html' 39 | 1. Select **Register** to create the application. 40 | 1. On the app **Overview** page, find the **Application (client) ID** value and record it for later. You'll need it to configure the PeoplePicker.html 41 | 1. In the list of pages for the app, select **Manifest**, and: 42 | - In the manifest editor, set the ``allowPublicClient`` property to **true** 43 | - Select **Save** in the bar above the manifest editor. 44 | 1. In the list of pages for the app, select **API permissions** 45 | - Click the **Add a permission** button and then, 46 | - Ensure that the **Microsoft APIs** tab is selected 47 | - In the *Commonly used Microsoft APIs* section, click on **Microsoft Graph** 48 | - In the **Delegated permissions** section, ensure that the right permissions are checked: **User.Read**,**Mail.Send**, **User.ReadBasic.All**,**People.Read** **People.Read.All** Use the search box if necessary. 49 | - Select the **Add permissions** button 50 | 51 | ## Run the sample 52 | 53 | 1. Open the PeoplePicker.html file in any text editor or IDE. Find these lines and populate them with the corresponding values for `clientId` (the application id you got when you registered the app) and `redirectUrl` (*https://your host/PeoplePicker.html*). 54 | 55 |
56 | var clientId = "your application Id here"; 57 |58 | 59 | 2. Copy or clone the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) and make sure that this link to the SDK file is correct in your PeoplePicker.html file. 60 |
61 | <!-- Microsoft Graph JavaScript SDK --> 62 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 63 |64 | 3. Copy or clone the [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) repo and make sure that these links to the core Office UI Fabric files are correct in your PeoplePicker.html file. 65 |
66 | <!-- Fabric core --> 67 | <link rel="stylesheet" href="fabric.min.css"> 68 | <link rel="stylesheet" href="fabric.components.min.css"> 69 | <script src="fabric.min.js"></script> 70 |71 | 4. Copy the PeoplePicker.html file to the root directory of your web host. 72 | 73 | 5. In your browser (Chrome or Firefox) navigate to *https://your host/PeoplePicker.html*. 74 | 75 | 6. Select the *Login* button to sign in with your work or school account and grant the requested permissions. 76 | 77 | 7. Select the *Populate Picker* button to fill the PeoplePicker component with information about the current user's contacts. 78 | 79 | 80 | ## Questions and comments 81 | 82 | We'd love to get your feedback about this sample. You can send us your questions and suggestions in the [Issues](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues) section of this repository. 83 | 84 | Your feedback is important to us. Connect with us on [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Tag your questions with [MicrosoftGraph]. 85 | 86 | ## Contributing ## 87 | 88 | If you'd like to contribute to this sample, see [CONTRIBUTING.md](CONTRIBUTING.md). 89 | 90 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 91 | 92 | ## Additional resources 93 | 94 | - [Other Microsoft Graph samples](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 95 | - [Microsoft Graph overview](https://graph.microsoft.io) 96 | 97 | ## Copyright 98 | Copyright (c) 2019 Microsoft. All rights reserved. 99 | -------------------------------------------------------------------------------- /README-localized/README-pt-br.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "Este exemplo demonstra como preencher um componente JS PeoplePicker do Office UI Fabric com dados recuperados do Microsoft Graph." 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Exemplo de JS PeoplePicker do Microsoft Graph Office UI Fabric 21 | 22 | ## Sumário 23 | 24 | * [Introdução](#introduction) 25 | * [Pré-requisitos](#prerequisites) 26 | * [Registrar o aplicativo](#register-the-application) 27 | * [Executar o exemplo](#run-the-sample) 28 | * [Perguntas e comentários](#questions-and-comments) 29 | * [Colaboração](#contributing) 30 | * [Recursos adicionais](#additional-resources) 31 | 32 | ## Introdução 33 | 34 | Este exemplo demonstra como preencher um [componente JS PeoplePicker do Office UI Fabric](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md) com dados recuperados do Microsoft Graph. O exemplo usa o [SDK de JavaScript do Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) para trabalhar com dados retornados pelo Microsoft Graph. Ele é formado por um único arquivo HTML contendo todas as HTML e JavaScript necessários para criar um componente PeoplePicker e solicitar os dados do Microsoft Graph. 35 | 36 | ## Pré-requisitos 37 | 38 | Esse exemplo requer o seguinte: 39 | 40 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [SDK de JavaScript do Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * Um servidor Web para hospedar o arquivo HTML. Este servidor deve dar suporte a solicitações SSL. 43 | * Uma [conta corporativas ou de estudante](https://dev.office.com/devprogram) Microsoft. Este exemplo baseia uma solicitação para obter os quatro principais contatos do usuário atual. Esta solicitação só funcionará com uma conta corporativa ou de estudante. 44 | 45 | 1. Navegue até a página [Portal do Azure - Registros de aplicativo](https://go.microsoft.com/fwlink/?linkid=2083908). 46 | 1. Selecione **Novo registro**. 47 | 1. Quando a página **Registrar um aplicativo** for exibida, insira as informações de registro do aplicativo: 48 | - Na seção **Nome**, insira um nome de aplicativo relevante que será exibido aos usuários do aplicativo, por exemplo, `People Picker`. 49 | - Na seção **Tipos de conta com suporte**, selecione **Contas em qualquer diretório organizacional**. 50 | 1. Em URI de redirecionamento, defina a primeira lista suspensa para a Web e defina o valor como a URL hospedada, por exemplo, "https://localhost/PeoplePicker.html" 51 | 1. Selecione **Registrar** para criar o aplicativo. 52 | 1. Na página **Visão geral** do aplicativo, encontre o valor de **ID do aplicativo (cliente)** e registre-o para usar mais tarde. Será necessário para configurar o PeoplePicker.html 53 | 1. Na lista de páginas do aplicativo, selecione **Manifesto** e: 54 | - No editor de manifesto, defina a propriedade ``allowPublicClient`` como **true** 55 | - Selecione **Salvar** na barra acima do editor de manifesto. 56 | 1. Na lista de páginas do aplicativo, selecione **Permissões de API**. 57 | - Clique no botão **Adicionar uma permissão** e, em seguida, 58 | - Certifique-se de que a guia **APIs da Microsoft** esteja selecionada 59 | - Na seção *APIs mais usadas da Microsoft*, clique em **Microsoft Graph** 60 | - Na seção **Permissões delegadas**, verifique se as permissões corretas estão marcadas: **User.Read**,**Mail.Send**, **User.ReadBasic.All**,**People.Read** **People.Read.All** Use a caixa de pesquisa, se necessário. 61 | - Selecione o botão **Adicionar permissão** 62 | 63 | ## Executar o exemplo 64 | 65 | 1. Abra o arquivo PeoplePicker. html em qualquer editor de texto ou IDE. Localize essas linhas e preencha-as com os valores correspondentes para `clientId` (a ID do aplicativo que você obteve ao registrar o aplicativo) e `redirectUrl` (*https://your host/PeoplePicker.html*). 66 | 67 |
68 | var clientId = "your application Id here"; 69 |70 | 71 | 2. Copie ou clone o [SDK de JavaScript do Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) e verifique se esse link para o arquivo do SDK está correto no seu arquivo PeoplePicker.html. 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. Copie ou clone o repositório [JS do Office UI Fabric](https://github.com/OfficeDev/office-ui-fabric-js) e verifique se estes links para os principais arquivos do Office UI Fabric estão corretos em seu arquivo PeoplePicker.html. 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. Copie o arquivo PeoplePicker.html para o diretório raiz do seu host da Web. 84 | 85 | 5. No navegador (Chrome ou Firefox) navegue até *https://your host/PeoplePicker.html*. 86 | 87 | 6. Selecione o botão *Logon* para entrar com conta corporativa ou de estudante, e conceda as permissões solicitadas. 88 | 89 | 7. Selecione o botão *Preencher Seletor* para preencher o componente PeoplePicker com informações sobre os contatos do usuário atual. 90 | 91 | 92 | ## Perguntas e comentários 93 | 94 | Gostaríamos de saber sua opinião sobre este exemplo. Você pode enviar perguntas e sugestões na seção [Problemas](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues) deste repositório. 95 | 96 | Seus comentários são importantes para nós. Junte-se a nós na página do [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Marque suas perguntas com \[MicrosoftGraph]. 97 | 98 | ## Colaboração ## 99 | 100 | Se quiser contribuir para esse exemplo, confira [CONTRIBUTING.MD](CONTRIBUTING.md). 101 | 102 | Este projeto adotou o [Código de Conduta Open-Source da Microsoft](https://opensource.microsoft.com/codeofconduct/). Para saber mais, confira as [Perguntas frequentes sobre o Código de Conduta](https://opensource.microsoft.com/codeofconduct/faq/) ou contate pelo [opencode@microsoft.com](mailto:opencode@microsoft.com) se tiver outras dúvidas ou comentários. 103 | 104 | ## Recursos adicionais 105 | 106 | - [Outros exemplos do Microsoft Graph](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Visão geral do Microsoft Graph](https://graph.microsoft.io) 108 | 109 | ## Direitos autorais 110 | Copyright (c) 2019 Microsoft. Todos os direitos reservados. 111 | -------------------------------------------------------------------------------- /README-localized/README-ru-ru.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "В этом примере показано, как вносить в компонент Office UI Fabric JS PeoplePicker данные, полученные из Microsoft Graph." 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Пример Microsoft Graph Office UI Fabric JS PeoplePicker 21 | 22 | ## Содержание 23 | 24 | * [Введение](#introduction) 25 | * [Предварительные требования](#prerequisites) 26 | * [Регистрация приложения](#register-the-application) 27 | * [Запустите пример](#run-the-sample) 28 | * [Вопросы и комментарии](#questions-and-comments) 29 | * [Участие](#contributing) 30 | * [Дополнительные ресурсы](#additional-resources) 31 | 32 | ## Введение 33 | 34 | В этом примере показано, как заполнить компонент [Office UI Fabric JS PeoplePicker ](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md) данными, полученными из Microsoft Graph. Для работы с данными, возвращаемыми Microsoft Graph, используется [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript). Это один HTML-файл, который содержит все элементы HTML и JavaScript, необходимые для создания компонента PeoplePicker и запроса данных Microsoft Graph. 35 | 36 | ## Предварительные требования 37 | 38 | Для этого примера требуются приведенные ниже компоненты. 39 | 40 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * Веб-сервер для размещения HTML-файла. Нужно, чтобы этот сервер поддерживал запросы SSL. 43 | * [Рабочая или учебная учетная запись](https://dev.office.com/devprogram) Майкрософт. В этом примере используется запрос на получение 4 основных контактов для текущего пользователя. Этот запрос сработает только в случае с рабочей или учебной учетной записью. 44 | 45 | 1. Перейдите на страницу [регистрации приложений портала Azure](https://go.microsoft.com/fwlink/?linkid=2083908). 46 | 1. Выберите **Новая регистрация**. 47 | 1. После появления страницы **Регистрация приложения** введите сведения для регистрации приложения: 48 | - В разделе **Имя** введите осмысленное название приложения, которое будут видеть его пользователи, например,`People Picker`. 49 | - В разделе **Поддерживаемые типы учетных записей** выберите **Учетные записи в любом каталоге организации**. 50 | 1. В разделе "Перенаправления URI" выберите в раскрывающемся меню вкладку "Интернет" и введите размещенный URL-адрес, например, "https://localhost/PeoplePicker.html". 51 | 1. Выберите **Зарегистрировать**, чтобы создать приложение. 52 | 1. На странице **Обзор** приложения найдите значение **Идентификатор приложения (клиент)** и запишите его, чтобы использовать его позже. Это значение потребуется вам для настройки PeoplePicker.html 53 | 1. В списке страниц приложения выберите **Манифест** и: 54 | - В редакторе манифеста присвойте свойству ``allowPublicClient`` значение **true**. 55 | - Нажмите **Сохранить** в панели над редактором манифеста. 56 | 1. В списке страниц приложения выберите **Разрешения API** 57 | - Нажмите кнопку **Добавить разрешение** и 58 | - Убедитесь, что выбрана вкладка **Интерфейсы API Microsoft** 59 | - В разделе *Часто используемые интерфейсы API Microsoft* щелкните **Microsoft Graph** 60 | - Убедитесь, что в разделе **Делегированные разрешения** выбраны правильные разрешения. **User.Read**,**Mail.Send**, **User.ReadBasic.All**,**People.Read** **People.Read.All** При необходимости используйте поле поиска. 61 | - Нажмите кнопку **Добавить разрешения** 62 | 63 | ## Запустите пример 64 | 65 | 1. Откройте файл PeoplePicker.html в любом текстовом редакторе или в интегрированной среде разработки (IDE). Найдите указанные ниже строки и внесите в них соответствующие значения — идентификатор приложения, полученный при регистрации приложения в`clientId` и (*https://your host/PeoplePicker.html*) — в`redirectUrl`. 66 | 67 |
68 | var clientId = "your application Id here"; 69 |70 | 71 | 2. Скопируйте или клонируйте [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) и убедитесь в том, что эта ссылка на файл SDK правильно указана в файле PeoplePicker.html. 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. Скопируйте или клонируйте репозиторий[Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) и убедитесь в том, что эти ссылки на основные файлы структуры пользовательского интерфейса Office правильно указаны в файле PeoplePicker.html. 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. Скопируйте файл PeoplePicker.html в корневой каталог своего веб-узла. 84 | 85 | 5. Перейдите по ссылке *https://your host/PeoplePicker.html* в своем браузере (Chrome или Firefox). 86 | 87 | 6. Воспользуйтесь кнопкой *Войти*, чтобы войти с помощью рабочей или учебной учетной записи, и предоставьте необходимые разрешения. 88 | 89 | 7. Нажмите кнопку *Заполнить средство выбора*, чтобы заполнить компонент PeoplePicker сведениями о контактах текущего пользователя. 90 | 91 | 92 | ## Вопросы и комментарии 93 | 94 | Мы будем рады узнать ваше мнение об этом примере. Вы можете отправлять нам свои вопросы и предложения на вкладке [Issues](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues) (Проблемы) этого репозитория. 95 | 96 | Ваш отзыв важен для нас. Для связи с нами используйте сайт [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Помечайте свои вопросы тегом \[MicrosoftGraph]. 97 | 98 | ## Участие ## 99 | 100 | Если вы хотите добавить код в этот пример, просмотрите статью [CONTRIBUTING.md](CONTRIBUTING.md). 101 | 102 | Этот проект соответствует [Правилам поведения разработчиков открытого кода Майкрософт](https://opensource.microsoft.com/codeofconduct/). Дополнительные сведения см. в разделе [Часто задаваемые вопросы о правилах поведения](https://opensource.microsoft.com/codeofconduct/faq/). Если у вас возникли вопросы или замечания, напишите нам по адресу [opencode@microsoft.com](mailto:opencode@microsoft.com). 103 | 104 | ## Дополнительные ресурсы 105 | 106 | - [Другие примеры кода для Microsoft Graph](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Общие сведения о Microsoft Graph](https://graph.microsoft.io) 108 | 109 | ## Авторские права 110 | (c) Корпорация Майкрософт (Microsoft Corporation), 2019. Все права защищены. 111 | -------------------------------------------------------------------------------- /README-localized/README-es-es.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "Este ejemplo muestra cómo rellenar un componente Selector de usuarios de Office UI Fabric JS con datos extraídos de Microsoft Graph" 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Ejemplo de Selector de usuarios de Microsoft Graph Office UI Fabric JS 21 | 22 | ## Tabla de contenido 23 | 24 | * [Introducción](#introduction) 25 | * [Requisitos previos](#prerequisites) 26 | * [Registrar la aplicación](#register-the-application) 27 | * [Ejecutar el ejemplo](#run-the-sample) 28 | * [Preguntas y comentarios](#questions-and-comments) 29 | * [Colaboradores](#contributing) 30 | * [Recursos adicionales](#additional-resources) 31 | 32 | ## Introducción 33 | 34 | Este ejemplo muestra cómo rellenar un componente [Selector de usuarios para JS de Office UI Fabric](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md) con datos recuperados de Microsoft Graph. Usa el [SDK del JavaScript de Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) para trabajar con los datos devueltos por Microsoft Graph. Consta de un único archivo HTML que contiene todo el HTML y JavaScript necesarios para crear un componente Selector de usuarios y solicitar los datos de Microsoft Graph. 35 | 36 | ## Requisitos previos 37 | 38 | Este ejemplo necesita lo siguiente: 39 | 40 | * [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [SDK de JavaScript para Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * Un servidor web para hospedar el archivo HTML. Este servidor debe admitir las solicitudes SSL. 43 | * Una cuenta [educativa o profesional de Microsoft](https://dev.office.com/devprogram). Este ejemplo se basa en una solicitud para obtener los 4 contactos principales del usuario actual. Esta solicitud solo funcionará con una cuenta profesional o educativa. 44 | 45 | 1. Vaya a la página [Azure Portal: registros de aplicaciones](https://go.microsoft.com/fwlink/?linkid=2083908). 46 | 1. Seleccione **Nuevo registro**. 47 | 1. Cuando aparezca la **página Registrar una aplicación**, escriba la información de registro de la aplicación: 48 | - En la sección **Nombre**, escriba un nombre significativo para la aplicación, que se mostrará a los usuarios de la aplicación, por ejemplo `Selector de usuarios` . 49 | - En la sección **Tipos de cuentas compatibles**, seleccione **Cuentas de cualquier directorio de la organización**. 50 | 1. En URL de redirección, seleccione en la primera lista desplegable "web" y como valor establezca la dirección URL hospedada, por ejemplo, "https://hostlocal/SelectorDeUsuarios.html". 51 | 1. Seleccione **Registrar** para crear la aplicación. 52 | 1. En la página **Información general** de la aplicación, busque el valor **Id. de la aplicación (cliente)** y guárdelo para más tarde. Lo necesitará para configurar el archivo SelectorDeUsuarios.html. 53 | 1. En la lista de páginas de la aplicación, seleccione **Manifiesto** y haga lo siguiente: 54 | - En el editor de manifiestos, establezca la propiedad ``allowPublicClient`` como **true**. 55 | - Seleccione **Guardar** en la barra situada sobre el editor de manifiestos. 56 | 1. En la lista de páginas de la aplicación, seleccione **Permisos de API**. 57 | - Haga clic en el botón **Agregar un permiso**. 58 | - Asegúrese de que la pestaña **API de Microsoft** está seleccionada. 59 | - En la sección *API de Microsoft más usadas*, haga clic en **Microsoft Graph**. 60 | - En la sección **Permisos delegados**, asegúrese de que los permisos adecuados estén marcados: **User.Read**,**Mail.Send**, **User.ReadBasic.All**,**People.Read** y **People.Read.All**. Use el cuadro de búsqueda si lo necesita. 61 | - Seleccione el botón **Agregar permisos**. 62 | 63 | ## Ejecutar el ejemplo 64 | 65 | 1. Abra el archivo SelectorDeUsuarios.html en cualquier editor de texto o IDE. Busque estas líneas y rellénelas con los valores correspondientes para `clientId` (el identificador de la aplicación que obtuvo al registrar la aplicación) y `redirectUrl` (*https://su host/SelectorDeUsuarios.html*). 66 | 67 |
68 | var clientId = "su ID. de aplicación va aquí"; 69 |70 | 71 | 2. Copie o clone el [SDK de JavaScript para Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) y asegúrese de que este vínculo al archivo del SDK sea correcto en el archivo SelectorDeUsuarios.html. 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. Copie o clone el [repositorio de Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) y asegúrese de que estos vínculos a los archivos de Office UI Fabric básicos sean correctos en el archivo SelectorDeUsuarios.html. 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. Copie el archivo SelectorDeUsuarios.html en el directorio raíz del host de web. 84 | 85 | 5. En el navegador (Chrome o Firefox), vaya a *https://su host/SelectorDeUsuarios.html*. 86 | 87 | 6. Seleccione el botón *Iniciar sesión* para iniciar sesión con su cuenta profesional o educativa y otorgue los permisos solicitados. 88 | 89 | 7. Seleccione el botón *Rellenar del selector* para rellenar el componente Selector de usuarios con información sobre los contactos del usuario actual. 90 | 91 | 92 | ## Preguntas y comentarios 93 | 94 | Nos encantaría recibir sus comentarios sobre este ejemplo. Puede enviarnos sus preguntas y sugerencias a través de la sección [Problemas](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues) de este repositorio. 95 | 96 | Su opinión es importante para nosotros. Conecte con nosotros en [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Etiquete sus preguntas con \[MicrosoftGraph]. 97 | 98 | ## Colaboradores ## 99 | 100 | Si quiere hacer su aportación a este ejemplo, vea [CONTRIBUTING.md](CONTRIBUTING.md). 101 | 102 | Este proyecto ha adoptado el [Código de conducta de código abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/). Para obtener más información, consulte [Preguntas frecuentes sobre el Código de conducta](https://opensource.microsoft.com/codeofconduct/faq/) o póngase en contacto a través de [opencode@microsoft.com](mailto:opencode@microsoft.com) si tiene otras preguntas o comentarios. 103 | 104 | ## Recursos adicionales 105 | 106 | - [Otros ejemplos de código de Microsoft Graph](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Información general de Microsoft Graph](https://graph.microsoft.io) 108 | 109 | ## Derechos de autor 110 | Copyright (c) 2019 Microsoft. Todos los derechos reservados. 111 | -------------------------------------------------------------------------------- /README-localized/README-fr-fr.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | products: 4 | - office-365 5 | - ms-graph 6 | languages: 7 | - javascript 8 | - html 9 | description: "Cet exemple explique la façon de remplir un composant PeoplePicker Office UI Fabric JS avec des données récupérées à partir de Microsoft Graph." 10 | extensions: 11 | contentType: samples 12 | technologies: 13 | - Microsoft Graph 14 | - Office Fabric UI 15 | - Office UI Fabric 16 | services: 17 | - Office 365 18 | createdDate: 12/6/2016 3:58:50 PM 19 | --- 20 | # Exemple PeoplePicker Office UI Fabric JS de Microsoft Graph Office 21 | 22 | ## Table des matières 23 | 24 | * [Introduction](#introduction) 25 | * [Conditions préalables](#prerequisites) 26 | * [Inscription de l’application](#register-the-application) 27 | * [Exécuter l’exemple](#run-the-sample) 28 | * [Questions et commentaires](#questions-and-comments) 29 | * [Contribution](#contributing) 30 | * [Ressources supplémentaires](#additional-resources) 31 | 32 | ## Introduction 33 | 34 | Cet exemple explique la façon de renseigner un [composant PeoplePicker Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/PeoplePicker.md) avec les données récupérées de Microsoft Graph. Il utilise le [Kit de développement logiciel Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) pour fonctionner avec les données renvoyées par Microsoft Graph. Il se compose d’un fichier HTML unique qui contient toutes les informations HTML et JavaScript nécessaires pour créer un composant PeoplePicker et demander les données Microsoft Graph. 35 | 36 | ## Conditions préalables 37 | 38 | Cet exemple nécessite les éléments suivants : 39 | 40 | * [Interface utilisateur Office Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) 41 | * [Kit de développement logiciel (SDK) JavaScript Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) 42 | * Un serveur web pour héberger le fichier HTML. Ce serveur doit prendre en charge les demandes SSL. 43 | * Un [compte professionnel ou scolaire](https://dev.office.com/devprogram) Microsoft. Cet exemple s’appuie sur une demande pour obtenir les 4 principaux contacts de l’utilisateur actuel. Cette demande ne s'utilise qu’avec un compte professionnel ou scolaire. 44 | 45 | 1. Accédez à la page [Portail Azure – Inscriptions d’applications](https://go.microsoft.com/fwlink/?linkid=2083908). 46 | 1. Sélectionnez **Nouvelle inscription**. 47 | 1. Lorsque la **page Inscrire une application** s’affiche, saisissez les informations d’inscription de votre application : 48 | - Dans la section **Nom**, saisissez un nom d’application cohérent qui s’affichera pour les utilisateurs de l’application, par exemple `People Picker`. 49 | - Dans la section **Types de comptes pris en charge**, sélectionnez **Comptes dans un annuaire organisationnel**. 50 | 1. Sous l'URI de redirection, attribuez la valeur Web à la première liste déroulante, puis définissez la valeur de l’URL hébergée, par ex. « https://localhost/PeoplePicker.html » 51 | 1. Sélectionnez **S’inscrire** pour créer l’application. 52 | 1. Sur la page **Vue d’ensemble** de l’application, cherchez la valeur **ID d’application (client)** et conservez-la pour plus tard. Vous en aurez besoin pour configurer PeoplePicker.html 53 | 1. Dans la liste des pages de l’application, sélectionnez **Manifeste**, puis : 54 | - Dans l’éditeur de manifeste, attribuez la valeur **Vrai** à la propriété ``allowPublicClient`` 55 | - Sélectionnez **Enregistrer** dans la barre au-dessus de l’éditeur de manifeste. 56 | 1. Dans la liste des pages de l’application, sélectionnez **Permissions API**. 57 | - Cliquez sur le bouton **Ajouter une autorisation** puis, 58 | - Vérifiez que l'onglet **API Microsoft** est sélectionné 59 | - Dans la section *API Microsoft couramment utilisées*, cliquez sur **Microsoft Graph** 60 | - Dans la section **Autorisations déléguées**, assurez-vous que les autorisations appropriées sont vérifiées : **User.Read**,**Mail.Send**, **User.ReadBasic.All**,**People.Read** **People.Read.All** Utilisez la zone de recherche, le cas échéant. 61 | - Cliquez sur le bouton **Ajouter des autorisations** 62 | 63 | ## Exécuter l’exemple 64 | 65 | 1. Ouvrez le fichier PeoplePicker.html dans un éditeur de texte ou un IDE. Recherchez ces lignes et renseignez-les avec les valeurs correspondantes pour `clientId` (ID de l'application que vous avez obtenu lors de l’inscription de l’application) et `redirectUrl` (*https://your host/PeoplePicker.html*). 66 | 67 |
68 | var clientId = « votre ID d’application ici » ; 69 |70 | 71 | 2. Copiez ou clonez le [Kit de développement logiciel (SDK) Microsoft Graph JavaScript](https://github.com/microsoftgraph/msgraph-sdk-javascript) et assurez-vous que ce lien vers le fichier SDK est correct dans votre fichier PeoplePicker.html. 72 |
73 | <!-- Microsoft Graph JavaScript SDK --> 74 | <script type="text/javascript" src="msgraph-sdk-javascript/lib/graph-js-sdk-web.js"></script> 75 |76 | 3. Copiez ou clonez le référentiel [Office UI Fabric JS](https://github.com/OfficeDev/office-ui-fabric-js) et assurez-vous que ces liens vers les principaux fichiers Office UI Fabric sont corrects dans votre fichier PeoplePicker.html. 77 |
78 | <!-- Fabric core --> 79 | <link rel="stylesheet" href="fabric.min.css"> 80 | <link rel="stylesheet" href="fabric.components.min.css"> 81 | <script src="fabric.min.js"></script> 82 |83 | 4. Copiez le fichier PeoplePicker.html dans le répertoire racine de votre hôte web. 84 | 85 | 5. Dans votre navigateur (Chrome ou Firefox), accédez à *https://your host/PeoplePicker.html*. 86 | 87 | 6. Sélectionnez le bouton de *Connexion* à votre compte professionnel ou scolaire, puis accordez les autorisations demandées. 88 | 89 | 7. Sélectionnez le bouton du *sélecteur Remplir* pour compléter le composant PeoplePicker avec les informations des contacts de l’utilisateur actuel. 90 | 91 | 92 | ## Questions et commentaires 93 | 94 | Nous aimerions connaître votre opinion sur cet exemple. Vous pouvez nous faire part de vos questions et suggestions dans la rubrique [Problèmes](https://github.com/microsoftgraph/javascript-officeuifabric-peoplepicker-sample/issues) de ce référentiel. 95 | 96 | Votre avis compte beaucoup pour nous. Communiquez avec nous sur [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Posez vos questions avec la balise \[MicrosoftGraph]. 97 | 98 | ## Contribution ## 99 | 100 | Si vous souhaitez contribuer à cet exemple, voir [CONTRIBUTING.md](CONTRIBUTING.md). 101 | 102 | Ce projet a adopté le [Code de conduite Open Source de Microsoft](https://opensource.microsoft.com/codeofconduct/). Pour en savoir plus, reportez-vous à la [FAQ relative au code de conduite](https://opensource.microsoft.com/codeofconduct/faq/) ou contactez [opencode@microsoft.com](mailto:opencode@microsoft.com) pour toute question ou tout commentaire. 103 | 104 | ## Ressources supplémentaires 105 | 106 | - [Autres exemples Microsoft Graph](https://github.com/microsoftgraph?utf8=%E2%9C%93&q=sample) 107 | - [Présentation de Microsoft Graph](https://graph.microsoft.io) 108 | 109 | ## Copyright 110 | Copyright (c) 2019 Microsoft. Tous droits réservés. 111 | -------------------------------------------------------------------------------- /PeoplePicker.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 |