├── .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 | Office Fabric People Picker with Microsoft Graph 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |

People Picker

28 | 29 | 30 |
        
 31 |           
 32 |           
33 | 38 |
39 |
40 |
41 | Contacts 42 |
43 |
44 |
46 |
47 | 48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 |
57 |
58 |
60 |
61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 | 70 |
71 |
72 |
74 |
75 | 76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 | 105 | 111 | 112 | 122 | 123 | 180 | 181 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contribute to this documentation 2 | 3 | Thank you for your interest in our documentation! 4 | 5 | * [Ways to contribute](#ways-to-contribute) 6 | * [Contribute using GitHub](#contribute-using-github) 7 | * [Contribute using Git](#contribute-using-git) 8 | * [How to use Markdown to format your topic](#how-to-use-markdown-to-format-your-topic) 9 | * [FAQ](#faq) 10 | * [More resources](#more-resources) 11 | 12 | ## Ways to contribute 13 | 14 | Here are some ways you can contribute to this documentation: 15 | 16 | * To make small changes to an article, [Contribute using GitHub](#contribute-using-github). 17 | * To make large changes, or changes that involve code, [Contribute using Git](#contribute-using-git). 18 | * Report documentation bugs via GitHub Issues 19 | * Request new documentation at the [Office Developer Platform UserVoice](http://officespdev.uservoice.com) site. 20 | 21 | ## Contribute using GitHub 22 | 23 | Use GitHub to contribute to this documentation without having to clone the repo to your desktop. This is the easiest way to create a pull request in this repository. Use this method to make a minor change that doesn't involve code changes. 24 | 25 | **Note** Using this method allows you to contribute to one article at a time. 26 | 27 | ### To Contribute using GitHub 28 | 29 | 1. Find the article you want to contribute to on GitHub. 30 | 31 | If the article is in MSDN, choose the **suggest and submit changes** link in the **Contribute to this content** section and you'll be taken to the same article on GitHub. 32 | 2. Once you are on the article in GitHub, sign in to GitHub (get a free account [Join GitHub](https://github.com/join). 33 | 3. Choose the **pencil icon** (edit the file in your fork of this project) and make your changes in the **<>Edit file** window. 34 | 4. Scroll to the bottom and enter a description. 35 | 5. Choose **Propose file change**>**Create pull request**. 36 | 37 | You now have successfully submitted a pull request. Pull requests are typically reviewed within 10 business days. 38 | 39 | 40 | ## Contribute using Git 41 | 42 | Use Git to contribute substantive changes, such as: 43 | 44 | * Contributing code. 45 | * Contributing changes that affect meaning. 46 | * Contributing large changes to text. 47 | * Adding new topics. 48 | 49 | ### To Contribute using Git 50 | 51 | 1. If you don't have a GitHub account, set one up at [GitHub](https://github.com/join). 52 | 2. After you have an account, install Git on your computer. Follow the steps in [Setting up Git Tutorial](https://help.github.com/articles/set-up-git/). 53 | 3. To submit a pull request using Git, follow the steps in [Use GitHub, Git, and this repository](#use-github-git-and-this-repository). 54 | 4. You will be asked to sign the Contributor's License Agreement if you are: 55 | 56 | * A member of the Microsoft Open Technologies group. 57 | * A contributors who doesn't work for Microsoft. 58 | 59 | As a community member, you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to a project. You only need to complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document. 60 | 61 | Signing the CLA does not grant you rights to commit to the main repository, but it does mean that the Office Developer and Office Developer Content Publishing teams will be able to review and approve your contributions. You will be credited for your submissions. 62 | 63 | Pull requests are typically reviewed within 10 business days. 64 | 65 | ## Use GitHub, Git, and this repository 66 | 67 | **Note:** Most of the information in this section can be found in [GitHub Help] articles. If you're familiar with Git and GitHub, skip to the **Contribute and edit content** section for the specifics of the code/content flow of this repository. 68 | 69 | ### To set up your fork of the repository 70 | 71 | 1. Set up a GitHub account so you can contribute to this project. If you haven't done this, go to [GitHub](https://github.com/join) and do it now. 72 | 2. Install Git on your computer. Follow the steps in the [Setting up Git Tutorial] [Set Up Git]. 73 | 3. Create your own fork of this repository. To do this, at the top of the page, choose the **Fork** button. 74 | 4. Copy your fork to your computer. To do this, open Git Bash. At the command prompt enter: 75 | 76 | git clone https://github.com//.git 77 | 78 | Next, create a reference to the root repository by entering these commands: 79 | 80 | cd 81 | git remote add upstream https://github.com/microsoftgraph/.git 82 | git fetch upstream 83 | 84 | Congratulations! You've now set up your repository. You won't need to repeat these steps again. 85 | 86 | ### Contribute and edit content 87 | 88 | To make the contribution process as seamless as possible, follow these steps. 89 | 90 | #### To contribute and edit content 91 | 92 | 1. Create a new branch. 93 | 2. Add new content or edit existing content. 94 | 3. Submit a pull request to the main repository. 95 | 4. Delete the branch. 96 | 97 | **Important** Limit each branch to a single concept/article to streamline the work flow and reduce the chance of merge conflicts. Content appropriate for a new branch includes: 98 | 99 | * A new article. 100 | * Spelling and grammar edits. 101 | * Applying a single formatting change across a large set of articles (for example, applying a new copyright footer). 102 | 103 | #### To create a new branch 104 | 105 | 1. Open Git Bash. 106 | 2. At the Git Bash command prompt, type `git pull upstream master:`. This creates a new branch locally that is copied from the latest MicrosoftGraph master branch. 107 | 3. At the Git Bash command prompt, type `git push origin `. This alerts GitHub to the new branch. You should now see the new branch in your fork of the repository on GitHub. 108 | 4. At the Git Bash command prompt, type `git checkout ` to switch to your new branch. 109 | 110 | #### Add new content or edit existing content 111 | 112 | You navigate to the repository on your computer by using File Explorer. The repository files are in `C:\Users\\`. 113 | 114 | To edit files, open them in an editor of your choice and modify them. To create a new file, use the editor of your choice and save the new file in the appropriate location in your local copy of the repository. While working, save your work frequently. 115 | 116 | The files in `C:\Users\\` are a working copy of the new branch that you created in your local repository. Changing anything in this folder doesn't affect the local repository until you commit a change. To commit a change to the local repository, type the following commands in GitBash: 117 | 118 | git add . 119 | git commit -v -a -m "" 120 | 121 | The `add` command adds your changes to a staging area in preparation for committing them to the repository. The period after the `add` command specifies that you want to stage all of the files that you added or modified, checking subfolders recursively. (If you don't want to commit all of the changes, you can add specific files. You can also undo a commit. For help, type `git add -help` or `git status`.) 122 | 123 | The `commit` command applies the staged changes to the repository. The switch `-m` means you are providing the commit comment in the command line. The -v and -a switches can be omitted. The -v switch is for verbose output from the command, and -a does what you already did with the add command. 124 | 125 | You can commit multiple times while you are doing your work, or you can commit once when you're done. 126 | 127 | #### Submit a pull request to the main repository 128 | 129 | When you're finished with your work and are ready to have it merged into the main repository, follow these steps. 130 | 131 | #### To submit a pull request to the main repository 132 | 133 | 1. In the Git Bash command prompt, type `git push origin `. In your local repository, `origin` refers to your GitHub repository that you cloned the local repository from. This command pushes the current state of your new branch, including all commits made in the previous steps, to your GitHub fork. 134 | 2. On the GitHub site, navigate in your fork to the new branch. 135 | 3. Choose the **Pull Request** button at the top of the page. 136 | 4. Verify the Base branch is `microsoftgraph/@master` and the Head branch is `/@`. 137 | 5. Choose the **Update Commit Range** button. 138 | 6. Add a title to your pull request, and describe all the changes you're making. 139 | 7. Submit the pull request. 140 | 141 | One of the site administrators will process your pull request. Your pull request will surface on the microsoftgraph/ site under Issues. When the pull request is accepted, the issue will be resolved. 142 | 143 | #### Create a new branch after merge 144 | 145 | After a branch is successfully merged (that is, your pull request is accepted), don't continue working in that local branch. This can lead to merge conflicts if you submit another pull request. To do another update, create a new local branch from the successfully merged upstream branch, and then delete your initial local branch. 146 | 147 | For example, if your local branch X was successfully merged into the OfficeDev/microsoft-graph-docs master branch and you want to make additional updates to the content that was merged. Create a new local branch, X2, from the OfficeDev/microsoft-graph-docs master branch. To do this, open GitBash and execute the following commands: 148 | 149 | cd microsoft-graph-docs 150 | git pull upstream master:X2 151 | git push origin X2 152 | 153 | You now have local copies (in a new local branch) of the work that you submitted in branch X. The X2 branch also contains all the work other writers have merged, so if your work depends on others' work (for example, shared images), it is available in the new branch. You can verify that your previous work (and others' work) is in the branch by checking out the new branch... 154 | 155 | git checkout X2 156 | 157 | ...and verifying the content. (The `checkout` command updates the files in `C:\Users\\microsoft-graph-docs` to the current state of the X2 branch.) Once you check out the new branch, you can make updates to the content and commit them as usual. However, to avoid working in the merged branch (X) by mistake, it's best to delete it (see the following **Delete a branch** section). 158 | 159 | #### Delete a branch 160 | 161 | Once your changes are successfully merged into the main repository, delete the branch you used because you no longer need it. Any additional work should be done in a new branch. 162 | 163 | #### To delete a branch 164 | 165 | 1. In the Git Bash command prompt, type `git checkout master`. This ensures that you aren't in the branch to be deleted (which isn't allowed). 166 | 2. Next, at the command prompt, type `git branch -d `. This deletes the branch on your computer only if it has been successfully merged to the upstream repository. (You can override this behavior with the `–D` flag, but first be sure you want to do this.) 167 | 3. Finally, type `git push origin :` at the command prompt (a space before the colon and no space after it). This will delete the branch on your github fork. 168 | 169 | Congratulations, you have successfully contributed to the project! 170 | 171 | ## How to use Markdown to format your topic 172 | 173 | ### Article template 174 | 175 | The [markdown template](/articles/0-markdown-template-for-new-articles.md) contains the basic Markdown for a topic that includes a table of contents, sections with subheadings, links to other Office developer topics, links to other sites, bold text, italic text, numbered and bulleted lists, code snippets, and images. 176 | 177 | 178 | ### Standard Markdown 179 | 180 | All of the articles in this repository use Markdown. A complete introduction (and listing of all the syntax) can be found at [Markdown Home] []. 181 | 182 | ## FAQ 183 | 184 | ### How do I get a GitHub account? 185 | 186 | Fill out the form at [Join GitHub](https://github.com/join) to open a free GitHub account. 187 | 188 | ### Where do I get a Contributor's License Agreement? 189 | 190 | You will automatically be sent a notice that you need to sign the Contributor's License Agreement (CLA) if your pull request requires one. 191 | 192 | As a community member, **you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to this project**. You only need complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document. 193 | 194 | ### What happens with my contributions? 195 | 196 | When you submit your changes, via a pull request, our team will be notified and will review your pull request. You will receive notifications about your pull request from GitHub; you may also be notified by someone from our team if we need more information. We reserve the right to edit your submission for legal, style, clarity, or other issues. 197 | 198 | ### Can I become an approver for this repository's GitHub pull requests? 199 | 200 | Currently, we are not allowing external contributors to approve pull requests in this repository. 201 | 202 | ### How soon will I get a response about my change request or issue? 203 | 204 | We typically review pull requests and respond to issues within 10 business days. 205 | 206 | ## More resources 207 | 208 | * To learn more about Markdown, go to the Git creator's site [Daring Fireball]. 209 | * To learn more about using Git and GitHub, first check out the [GitHub Help section] [GitHub Help]. 210 | 211 | [GitHub Home]: http://github.com 212 | [GitHub Help]: http://help.github.com/ 213 | [Set Up Git]: http://help.github.com/win-set-up-git/ 214 | [Markdown Home]: http://daringfireball.net/projects/markdown/ 215 | [Daring Fireball]: http://daringfireball.net/ 216 | --------------------------------------------------------------------------------