From 5ae778fbf7fb94dd7d22a1d0e05192d2a4630274 Mon Sep 17 00:00:00 2001 From: OfficeGlobal Date: Mon, 27 Apr 2020 15:33:54 +0200 Subject: [PATCH] HB of localized readme files --- .../README-Localized/README-es-es.md | 97 +++++++++++++++++++ .../README-Localized/README-fr-fr.md | 97 +++++++++++++++++++ .../README-Localized/README-ja-jp.md | 97 +++++++++++++++++++ .../README-Localized/README-pt-br.md | 97 +++++++++++++++++++ .../README-Localized/README-ru-ru.md | 96 ++++++++++++++++++ .../README-Localized/README-zh-cn.md | 97 +++++++++++++++++++ .../README-Localized/README-es-es.md | 91 +++++++++++++++++ .../README-Localized/README-fr-fr.md | 91 +++++++++++++++++ .../README-Localized/README-ja-jp.md | 91 +++++++++++++++++ .../README-Localized/README-pt-br.md | 91 +++++++++++++++++ .../README-Localized/README-ru-ru.md | 91 +++++++++++++++++ .../README-Localized/README-zh-cn.md | 91 +++++++++++++++++ .../README-Localized/README-es-es.md | 92 ++++++++++++++++++ .../README-Localized/README-fr-fr.md | 92 ++++++++++++++++++ .../README-Localized/README-ja-jp.md | 92 ++++++++++++++++++ .../README-Localized/README-pt-br.md | 92 ++++++++++++++++++ .../README-Localized/README-ru-ru.md | 92 ++++++++++++++++++ .../README-Localized/README-zh-cn.md | 92 ++++++++++++++++++ 18 files changed, 1679 insertions(+) create mode 100644 samples/angular-msgraph/README-Localized/README-es-es.md create mode 100644 samples/angular-msgraph/README-Localized/README-fr-fr.md create mode 100644 samples/angular-msgraph/README-Localized/README-ja-jp.md create mode 100644 samples/angular-msgraph/README-Localized/README-pt-br.md create mode 100644 samples/angular-msgraph/README-Localized/README-ru-ru.md create mode 100644 samples/angular-msgraph/README-Localized/README-zh-cn.md create mode 100644 samples/react-invitation-manager/README-Localized/README-es-es.md create mode 100644 samples/react-invitation-manager/README-Localized/README-fr-fr.md create mode 100644 samples/react-invitation-manager/README-Localized/README-ja-jp.md create mode 100644 samples/react-invitation-manager/README-Localized/README-pt-br.md create mode 100644 samples/react-invitation-manager/README-Localized/README-ru-ru.md create mode 100644 samples/react-invitation-manager/README-Localized/README-zh-cn.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-es-es.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-fr-fr.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-ja-jp.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-pt-br.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-ru-ru.md create mode 100644 samples/react-msal-msgraph/README-Localized/README-zh-cn.md diff --git a/samples/angular-msgraph/README-Localized/README-es-es.md b/samples/angular-msgraph/README-Localized/README-es-es.md new file mode 100644 index 000000000..6d1246899 --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-es-es.md @@ -0,0 +1,97 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +## Elemento web de Microsoft Graph de angular creado con Angular v1.x + +## Resumen +Este es un elemento web de Microsoft Graph de ejemplo que se conecta a Microsoft Graph y extrae información de SharePoint del espacio empresarial. +Primero, extraerá la colección de sitios raíz (lo que actualmente es una limitación de Microsoft Graph), +y luego mostrará todas las listas asociadas con el sitio seguidos de todos los elementos de la lista. + +![Primera pantalla](./assets/Connect.png) + +![Sesión iniciada](./assets/Connected.png) + +![Colección de sitios raíz](./assets/Root.png) + +![Listas en el sitio raíz](./assets/Lists.png) + +![Elementos de la lista de anuncios](./assets/Items.png) + + +> Nota: Actualmente, solo tengo desarrollados modelos para la lista de anuncios. Cualquier otra lista generará errores. + +## Version de SharePoint Framework utilizada +![drop](https://img.shields.io/badge/drop-ga-green.svg) + +## Se aplica a + +* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Espacio empresarial de desarrollador de Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solución + +Solución | Autor(es) +--------|--------- +angular-msgraph|David Hartman ([Slalom](https://slalom.com)) + +## Historial de versiones + +Versión | Fecha |Comentarios +-------|----|-------- +2.0|19 de abril de 2017 | Versión GA +1.0| 6 de febrero de 2017| Lanzamiento inicial + +## Aviso de declinación de responsabilidades +**ESTE CÓDIGO SE PROPORCIONA*TAL CUAL* SIN GARANTÍA DE NINGÚN TIPO, YA SEA EXPRESA O IMPLÍCITA, INCLUYENDO CUALQUIER GARANTÍA IMPLÍCITA DE IDONEIDAD PARA UN PROPÓSITO PARTICULAR, COMERCIABILIDAD O NO INFRACCIÓN.** + +--- + +## Configuración perfecta +- Clone este repositorio +- En la línea de comandos, ejecute: + - `npm i typings -g` + - `npm i` + - `gulp serve + +## Registrar la aplicación + +1. Inicie sesión en el [Portal de registro de aplicaciones](https://apps.dev.microsoft.com/) mediante su cuenta personal, profesional o educativa. + +2. Elija **Agregar una aplicación**. + +3. Escriba un nombre para la aplicación y elija **Crear aplicación**. + + Se muestra la página de registro, indicando las propiedades de la aplicación. + +4. Copie el Id. de aplicación. Este es el identificador único de la aplicación. + +5. En **Plataformas**, elija **Agregar plataforma**. + +6. Elija **Web**. + +7. Asegúrese de que la casilla **Permitir flujo implícito** está seleccionada y escriba *http://{Ubicación del área de trabajo SP}* como URI de redireccionamiento. + +8. Elija **Guardar**. + +## Configurar la aplicación +1. Reemplace los valores de los marcadores de posición **aad** y **redirect_uri** con el Id. +de la aplicación y la dirección URL de redireccionamiento de la aplicación de Azure registrada en el archivo GraphHelper.ts en src -> angularMsGraph -> GraphHelper.ts + + \ No newline at end of file diff --git a/samples/angular-msgraph/README-Localized/README-fr-fr.md b/samples/angular-msgraph/README-Localized/README-fr-fr.md new file mode 100644 index 000000000..821994a73 --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-fr-fr.md @@ -0,0 +1,97 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +Composant graphique WebPart Angular MS Graph créé avec Angular v1.x + +## Résumé +Il s’agit d’un exemple de composant WebPart Angular MS Graph qui se connecte à Microsoft Graph et extrait des informations SharePoint de votre client. +Il extrait tout d’abord la collection de sites racine (actuellement limitée par Microsoft Graph), +puis affiche toutes les listes associées au site, suivies de tous les éléments dans la liste. + +![Premier écran](./assets/Connect.png) + +![Connecté](./assets/Connected.png) + +![Collection de sites racine](./assets/Root.png) + +![Listes dans le site racine](./assets/Lists.png) + +![Éléments de liste d’annonces](./assets/Items.png) + + +> Remarque : Je n'ai actuellement que des modèles développés pour la liste des annonces. Toutes les autres listes génèrent actuellement des erreurs. + +## Version SharePoint Framework utilisée +![drop](https://img.shields.io/badge/drop-ga-green.svg) + +## S’applique à + +* [Version préliminaire pour développeurs de SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Client de développeur Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solution + +Solution|Auteur (s) +--------|--------- +angular-MSGraph|David Hartman ([Slalom](https://slalom.com)) + +## Historique des versions + +Version|Date|Commentaires +-------|----|-------- +2,0 | 19 avril 2017|GA version +1.0|6 février 2017|Publication initiale + +## Clause d’exclusion +**CE CODE EST FOURNI *EN L’ÉTAT*, SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS TOUTE GARANTIE IMPLICITE D'ADAPTATION À UN USAGE PARTICULIER, DE QUALITÉ MARCHANDE ET DE NON-CONTREFAÇON.** + +--- + +## Bliss de configuration +- clonez ce référentiel. +- dans la ligne de commande, exécutez : + - `npm i typings -g` + - `npm i` + - `gulp serve + +## Inscription de l’application + +1. Connectez-vous au [portail d’inscription des applications](https://apps.dev.microsoft.com/) en utilisant votre compte personnel, professionnel ou scolaire. + +2. Choisissez **Ajouter une application**. + +3. Entrez un nom pour l’application, puis choisissez **Créer une application**. + + La page d’inscription s’affiche, répertoriant les propriétés de votre application. + +4. Copiez l’ID de l’application. Il s’agit de l’identificateur unique de votre application. + +5. Sous **Plateformes**, choisissez **Ajouter une plateforme**. + +6. Choisissez **Web**. + +7. Assurez-vous que la case **Autoriser le flux implicite** est cochée, puis entrez *http://{Location of SP Workbench}* comme URI de redirection. + +8. Sélectionnez **Enregistrer**. + +## Configuration de l’application +1. Remplacez les valeurs d’espace réservé **aad**et **redirect_uri** par l’ID d’application et +redirigez l’URL de votre application Azure inscrit dans le fichier GraphHelper.ts sous src-> angularMsGraph-> GraphHelper.ts + + \ No newline at end of file diff --git a/samples/angular-msgraph/README-Localized/README-ja-jp.md b/samples/angular-msgraph/README-Localized/README-ja-jp.md new file mode 100644 index 000000000..77f473fb0 --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-ja-jp.md @@ -0,0 +1,97 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +##Angular v1.x で作成された Angular MS Graph Web パーツ + +## 概要 +これは、Microsoft Graph に接続し、テナントから SharePoint +情報を引き出すサンプルの MS Graph Web パーツです。最初にルート サイト コレクションを取得し (現在は Microsoft Graph による制限)、 +次にサイトに関連付けられているすべてのリストを表示し、次にリスト内のすべてのアイテムを表示します。 + +![最初の画面](./assets/Connect.png) + +![ログイン済み](./assets/Connected.png) + +![ルート サイト コレクション](./assets/Root.png) + +![ルート サイト内のリスト](./assets/Lists.png) + +![お知らせリストのアイテム](./assets/Items.png) + + +> 注:現在、お知らせリスト用に開発されたモデルのみを持っています。その他のリストはすべて、現在エラーが発生しています。 + +## 使用されている SharePoint Framework バージョン +![drop](https://img.shields.io/badge/drop-ga-green.svg) + +## 適用対象 + +* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 Developer のテナント](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解決方法 + +ソリューション|作成者 +--------|--------- +angular-msgraph|David Hartman ([Slalom](https://slalom.com)) + +## バージョン履歴 + +バージョン|日付|コメン +-------|----|-------- +2.0|2017 年 4 月 19 日|GA リリース +1.0|2017 年 2 月 6 日|初期リリース + +## 免責事項 +**このコードは、明示または黙示のいかなる種類の保証なしに*現状のまま*提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。** + +--- + +## 構成の草原 +- このリポジトリの複製を作成する +- コマンド ラインで、次を実行する + - `npm i typings -g` + - `npm i` + - `gulp serve + +## アプリケーションの登録 + +1. 個人用アカウントか職場または学校アカウントのいずれかを使用して、[アプリ登録ポータル](https://apps.dev.microsoft.com/)にサインインします。 + +2. [**アプリの追加**] を選択します。 + +3. アプリの名前を入力して、[**アプリケーションの作成**] を選択します。 + + 登録ページが表示され、アプリのプロパティが一覧表示されます。 + +4. アプリケーション ID をコピーします。これは、アプリの一意識別子です。 + +5. [**プラットフォーム**] で、[**プラットフォームの追加**] を選択します。 + +6. [**Web**] を選択します。 + +7. [**暗黙的フローを許可する**] チェック ボックスが選択されていることを確認して、リダイレクト URI として *http://{SP ワークベンチの場所}* を入力します。 + +8. [**保存**] を選択します。 + +## アプリの構成 +1. **aad** および **redirect_uri** プレースホルダー値をアプリケーション ID に置き換え、 +GraphHelper.ts ファイルの登録済み Azure アプリケーションの URL を src -> angularMsGraph -> GraphHelper.ts でリダイレクトします。 + + \ No newline at end of file diff --git a/samples/angular-msgraph/README-Localized/README-pt-br.md b/samples/angular-msgraph/README-Localized/README-pt-br.md new file mode 100644 index 000000000..a8ac195f9 --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-pt-br.md @@ -0,0 +1,97 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +## Web Part do MS Graph em Angular integrada com o Angular v1\. x + +## Resumo +Este é um exemplo de web part do MS Graph que se conecta ao Microsoft Graph e extrai informações sobre o SharePoint do seu locatário. +Primeiro, ele receberá o conjunto de sites raiz (na limitação do Microsoft Graph) +e exibirá todas as listas associadas ao site seguido por todos os itens da lista. + +![Primeira tela](./assets/Connect.png) + +![Conectado](./assets/Connected.png) + +![Conjunto de sites raiz](./assets/Root.png) + +![Listas no site raiz](./assets/Lists.png) + +![Itens da lista de comunicados](./assets/Items.png) + + +> Observação: Atualmente, no momento, só temos modelos desenvolvidos para a lista de comunicados. Todas as outras listas gerarão erros no momento. + +## Versão do SharePoint Framework usada +![drop](https://img.shields.io/badge/drop-ga-green.svg) + +## Aplicável a + +* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Locatário de desenvolvedor do Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solução + +Solução | Autor (s) +--------|--------- +angulares-msgraph | David Hartman ([Slalom](https://slalom.com)) + +## Histórico de versão + +Versão | Data | Comentários +-------|----|-------- +2.0 | 19 de abril de 2017 | GA versão +1.0 | 6 de fevereiro de 2017 | Versão inicial + +## Aviso de isenção de responsabilidade +**ESSE CÓDIGO É FORNECIDO *EM* GARANTIA DE QUALQUER TIPO, SEJA EXPRESSA OU IMPLÍCITA, INCLUINDO QUAISQUER GARANTIAS IMPLÍCITAS DE ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA, COMERCIABILIDADE OU NÃO VIOLAÇÃO.** + +--- + +## Diversão de configuração +- clone este repositório. +- na linha de comando, execute: + - `npm i typings -g` + - `npm i` + - `gulp serve + +## Registrar o aplicativo + +1. Entre no [Portal de Registro do Aplicativo](https://apps.dev.microsoft.com/) usando sua conta pessoal ou sua conta corporativa ou de estudante. + +2. Escolha **Adicionar um aplicativo**. + +3. Insira um nome para o aplicativo e escolha **Criar aplicativo**. + + A página de registro é exibida, listando as propriedades do seu aplicativo. + +4. Copie a ID do Aplicativo. Esse é o identificador exclusivo do aplicativo. + +5. Em **Plataformas**, escolha **Adicionar plataforma**. + +6. Escolha **Web**. + +7. Não deixe de marcar a caixa de diálogo **Permitir Fluxo Implícito** e insira *http://{Location of SP Workbench}* como o URI de Redirecionamento. + +8. Escolha **Salvar**. + +## Configurando o aplicativo +1. Substitua os valores de espaço reservado **aad** e **redirect_uri** pela ID do aplicativo e URL de redirecionamento do aplicativo registrado do Azure no arquivo GraphHelper.ts Em +src -> angularMsGraph -> GraphHelper.ts + + \ No newline at end of file diff --git a/samples/angular-msgraph/README-Localized/README-ru-ru.md b/samples/angular-msgraph/README-Localized/README-ru-ru.md new file mode 100644 index 000000000..fba484d34 --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-ru-ru.md @@ -0,0 +1,96 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +## Веб-часть Angular на основе Angular 1.x с использованием MS Graph + +## Сводка +Это пример веб-части на платформе MS Graph, которая подключается к Microsoft Graph и получает данные SharePoint из вашего клиента. +Сначала она получает корневое семейство веб-сайтов (в настоящее время ограничено Microsoft Graph), +а затем отображает все списки, связанные с сайтом, а также все элементы списка. + +![Первый экран](./assets/Connect.png) + +![Вход выполнен](./assets/Connected.png) + +![Корневое семейство веб-сайтов](./assets/Root.png) + +![Списки в корневом сайте](./assets/Lists.png) + +![Элементы списка извещений](./assets/Items.png) + + +> Примечание. В настоящее время есть только модели, разработанные для списка извещений. Во всех остальных списках будут возникать ошибки. + +## Использованная версия SharePoint Framework +![Удалить](https://img.shields.io/badge/drop-ga-green.svg) + +## Область применения + +* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Клиент Office 365 для разработчиков](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Решение + +Решение|Автор(-ы) +--------|--------- +Angular-MSGraph|Дэвид Хартман ([Slalom](https://slalom.com)) + +## Журнал версий + +Версия|Дата|Комментарии +-------|----|-------- +2.0|19 апреля 2017 г.|Общедоступный выпуск +1.0|6 февраля 2017 г.|Первоначальный выпуск + +## Заявление об отказе +**ЭТОТ КОД ПРЕДОСТАВЛЯЕТСЯ *КАК ЕСТЬ* БЕЗ КАКОЙ-ЛИБО ЯВНОЙ ИЛИ ПОДРАЗУМЕВАЕМОЙ ГАРАНТИИ, ВКЛЮЧАЯ ПОДРАЗУМЕВАЕМЫЕ ГАРАНТИИ ПРИГОДНОСТИ ДЛЯ КАКОЙ-ЛИБО ЦЕЛИ, ДЛЯ ПРОДАЖИ ИЛИ ГАРАНТИИ ОТСУТСТВИЯ НАРУШЕНИЯ ПРАВ ИНЫХ ПРАВООБЛАДАТЕЛЕЙ.** + +--- + +## Язык настройки (BLISS) +- Клонируйте этот репозиторий +- Введите в командной строке следующую команду: + - `npm i typings -g` + - `npm i` + - `gulp serve + +## Регистрация приложения + +1. Войдите на [портал регистрации приложений](https://apps.dev.microsoft.com/) с помощью личной, рабочей или учебной учетной записи. + +2. Нажмите кнопку **Добавить приложение**. + +3. Введите имя приложения и нажмите кнопку **Создать приложение**. + + Откроется страница регистрации со свойствами приложения. + +4. Скопируйте идентификатор приложения. Это уникальный идентификатор приложения. + +5. В разделе **Платформы** нажмите кнопку **Добавить платформу**. + +6. Выберите **Интернет**. + +7. Убедитесь, что установлен флажок **Разрешить неявный поток** и введите URI перенаправления *http://{Расположение SP Workbench}*. + +8. Выберите команду **Сохранить**. + +## Настройка приложения +1. Замените **aad** и **redirect_uri** на идентификатор приложения и URL-адрес перенаправления приложения, зарегистрированного в Azure, в файле GraphHelper.ts (src -> angularMsGraph -> GraphHelper.ts) + + \ No newline at end of file diff --git a/samples/angular-msgraph/README-Localized/README-zh-cn.md b/samples/angular-msgraph/README-Localized/README-zh-cn.md new file mode 100644 index 000000000..95db00e3a --- /dev/null +++ b/samples/angular-msgraph/README-Localized/README-zh-cn.md @@ -0,0 +1,97 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - AngularJS + createdDate: 2/16/2017 12:00:00 AM +--- +## 通过 Angular v1.x 构建的 Angular MS Graph web 部件 + +## 摘要 +此 MS Graph Web 部件连接到 Microsoft Graph，并从租户中提取 SharePoint 信息。 +首先拉取跟网站集（当前由 Microsoft Graph 限制）， +随后显示后面跟着列表内所有项目的网站的关联列表。 + +![首屏](./assets/Connect.png) + +![已登录](./assets/Connected.png) + +![根网站集](./assets/Root.png) + +![根网站中列表](./assets/Lists.png) + +![通知列表项](./assets/Items.png) + + +> 注意：我当前只拥有专为通知列表开发的模型。所有其他列表当前都会产生错误。 + +## 使用的 SharePoint Framework 版本 +![drop](https://img.shields.io/badge/drop-ga-green.svg) + +## 适用于 + +* [SharePoint Framework 开发人员预览版](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 开发人员租户](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解决方案 + +解决方案|作者 +--------|--------- +angular-msgraph|David Hartman ([Slalom](https://slalom.com)) + +## 版本历史记录 + +版本 |日期 |注释 +-------|----|-------- +2.0 |2017年4月19日 | GA 发布 +1.0 |2017 年 2 月 6日 |首次发布 + +## 免责声明 +**此代码*按原样提供*，不提供任何明示或暗示的担保，包括对特定用途适用性、适销性或不侵权的默示担保。** + +--- + +## 配置 Bliss +- 克隆此存储库。 +- 在命令行中运行： + - `npm i typings -g` + - `npm i` + - `gulp serve + +## 注册应用程序 + +1. 使用个人或工作或学校帐户登录到[应用注册门户](https://apps.dev.microsoft.com/)。 + +2. 选择“**添加应用**”。 + +3. 输入应用的名称，并选择“**创建应用程序**”。 + + 将显示注册页，其中列出应用的属性。 + +4. 复制应用程序 ID。这是应用的唯一标识符。 + +5. 在“**平台**”下，选择“**添加平台**”。 + +6. 选择“**Web**”。 + +7. 请确保已选中“**允许隐式流**”复选框，输入 *http://{Location of SP Workbench}* 作为重定向 URI。 + +8. 选择“**保存**”。 + +## 配置应用程序 +1. 使用 src -> angularMsGraph -> GraphHelper.ts 下 GraphHelper. +ts 文件中的已注册 Azure 应用的应用程序 ID 和重定向 url 替换 **aad** 和 **redirect\_uri** 占位符值 + + \ No newline at end of file diff --git a/samples/react-invitation-manager/README-Localized/README-es-es.md b/samples/react-invitation-manager/README-Localized/README-es-es.md new file mode 100644 index 000000000..ac30ccfa8 --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-es-es.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Ejemplos de Graph API para el administrador de invitaciones de Azure Active Directory + +## Resumen + +Elementos web de ejemplo de SharePoint Framework creados con React que muestran la posibilidad de usar Graph API para invitar a usuarios externos a Azure Active Directory. + +### Administrador de invitaciones + +Ejemplo de elemento web del lado cliente de SharePoint Framework creado con React que muestra cómo invitar al usuario externo mediante Microsoft Graph. + +NB. Estoy esperando la disponibilidad general de HttpGraphClient (estoy un poco limitado en lo que respecta a permisos) para usarlo en este escenario. +Consulte este documento para profundizar: +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part). + +![El elemento web del administrador de invitaciones que se muestra en SharePoint Workbench](./assets/SPFx-Invitation-Manager.gif) + +## Version de SharePoint Framework utilizada +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## Se aplica a + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Espacio empresarial de desarrollador de Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solución + +Solución|Author +--------|--------- +react-invitation-manager|Giuliano De Luca ([@giuleon](https://twitter.com/giuleon), [www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## Historial de versiones + +Versión|Fecha|Comentarios +-------|----|-------- +1.0.0|14 de julio de 2017|Versión inicial +1.0.1|9 de octubre de 2017|Actualizada a la versión 1.3.0 + +## Aviso de declinación de responsabilidades +**ESTE CÓDIGO ES PROPORCIONADO *TAL CUAL* SIN GARANTÍA DE NINGÚN TIPO, YA SEA EXPLÍCITA O IMPLÍCITA, INCLUIDAS LAS GARANTÍAS IMPLÍCITAS DE IDONEIDAD PARA UN FIN DETERMINADO, COMERCIABILIDAD O AUSENCIA DE INFRACCIÓN.** + +--- + +## Requisitos previos + +- Una suscripción a Office 365 con SharePoint Online y Exchange + +## Pasos mínimos + +- Clone este repositorio. +- En el Azure Active Directory correspondiente a su espacio empresarial de Office 365, registre una nueva aplicación web: + - Especifique la URL de la versión hospedada de SharePoint Workbench como la **URL de inicio de sesión**, p. ej. *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx*. + - Habilite el flujo implícito de OAuth. + - Conceda a la aplicación el permiso **Leer y escribir datos de directorio de Microsoft Graph/Read**. + - Copie el Id. de aplicación. +- En el archivo **src/webparts/invitationManager/AdalConfig.ts** en la propiedad **clientId**, introduzca el Id. de la aplicación registrada en Azure. +- En la línea de comandos, ejecute lo siguiente: + - `npm i` + - `gulp serve --nobrowser` +- Vaya a la versión hospedada de SharePoint Workbench. +- Agregue el elemento web del **administrador de invitaciones**. + +## Características + +El elemento web de ejemplo en esta solución ilustra los siguientes conceptos en SharePoint Framework: + +- Cómo usar React para crear elementos web del lado cliente de SharePoint Framework. +- Cómo usar los estilos de Office UI Fabric React para crear una experiencia de usuario coherente con SharePoint y Office. +- La autenticación a petición con Azure Active Directory y con la biblioteca ADAL JS. +- La comunicación con Microsoft Graph mediante la API de REST. +- Cómo usar la biblioteca ADAL JS con elementos web de SharePoint Framework creados con React. + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-invitation-manager/README-Localized/README-fr-fr.md b/samples/react-invitation-manager/README-Localized/README-fr-fr.md new file mode 100644 index 000000000..8df4329ff --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-fr-fr.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Exemples d’API Graph de gestionnaire d’invitation Azure Active Directory + +## Résumé + +Exemple de composant WebPart SharePoint Framework créé à l’aide de React et montrant comment utiliser l’API Graph pour inviter des utilisateurs externes dans Azure Active Directory. + +### Gestionnaire d’invitation + +Exemple de composant WebPart SharePoint Framework côté client créé à l’aide de la fonction React montrant comment inviter l’utilisateur externe à l’aide de Microsoft Graph. + +NB. J’attend la GA de HttpGraphClient (un bit limité en termes d’autorisation) pour l’utiliser dans ce scénario. +Regardez ceci pour aller plus loin : +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part) + +![Le composant WebPart gestionnaire d’invitation affiché dans SharePoint Workbench](./assets/SPFx-Invitation-Manager.gif) + +## Version SharePoint Framework utilisée +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## S’applique à + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Client de développeur Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solution + +Solution|Auteur (s) +--------|--------- +react-invitation-gestionnaire|Giuliano De Luca ([@giuleon](https://twitter.com/giuleon), [www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## Historique des versions + +Version|Date|Commentaires +-------|----|-------- +1.0.0 |14 juillet 2017|Version initiale +1.0.1|09 octobre 2017|Mise à jour vers la version 1.3.0 + +## Clause d’exclusion +**CE CODE EST FOURNI *EN L’ÉTAT*, SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS TOUTE GARANTIE IMPLICITE D'ADAPTATION À UN USAGE PARTICULIER, DE QUALITÉ MARCHANDE ET DE NON-CONTREFAÇON.** + +--- + +## Conditions préalables + +- Abonnement à Office 365 avec SharePoint Online et Exchange + +## Chemin d’accès minimal à extraordinaire + +- clonez ce référentiel. +- dans Azure Active Directory correspondant à votre locataire Office 365, enregistrez une nouvelle application web : + - comme l’**URL de connexion** entrez l’URL de la version hébergée de SharePoint Workbench (par exemple,). *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx* + - activer le flux implicite OAuth + - octroyer à l’application l’autorisation **Microsoft Graph/lire et écrire des données d’annuaire** + - copiez l’ID de l’application. +- dans le fichier **SRC/WebParts/invitationManager/AdalConfig. TS** dans la propriété **clientId** entrer l’ID d’application enregistré dans Azure +- dans la ligne de commande, exécuter + - `npm i` + - `gulp serve --nobrowser` +- accéder à la version hébergée de SharePoint Workbench +- Ajouter le composant WebPart **gestionnaire d’invitation** + +## Fonctionnalités + +L’exemple de composant WebPart dans cette solution illustre les concepts suivants au-dessus de SharePoint Framework : + +- utilisation de la fonction React pour créer des composants WebPart côté client dans SharePoint Framework +- utilisation des styles Office UI Fabric React pour créer une expérience utilisateur cohérente avec SharePoint et Office +- authentification à la demande avec Azure Active Directory à l’aide de la bibliothèque ADAL JS +- communication avec Microsoft Graph à l’aide de l’API REST +- utilisation de la bibliothèque ADAL JS avec les composants WebPart SharePoint Framework créés à l’aide de la fonction React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-invitation-manager/README-Localized/README-ja-jp.md b/samples/react-invitation-manager/README-Localized/README-ja-jp.md new file mode 100644 index 000000000..483e5e3db --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-ja-jp.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Azure Active Directory 招待マネージャー Graph API のサンプル + +## 概要 + +Azure Active Directory に外部ユーザーを招待する Graph API を使用する可能性を示す React を使用して構築された SharePoint Framework Web パーツのサンプルです。 + +### 招待マネージャー + +Microsoft Graph を使用して外部ユーザーを招待する方法を示す、React を使用して構築されたサンプルの SharePoint Framework クライアント側 Web パーツ。 + +NB.このシナリオでそれを使用するために HttpGraphClient の GA (許可という点では少し制限があります) を待っています。 +詳細を確認するには、ここを参照してください: +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part) + +![SharePoint ワークベンチに表示される招待マネージャーの Web パーツ](./assets/SPFx-Invitation-Manager.gif) + +## 使用されている SharePoint Framework バージョン +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## 適用対象 + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 Developer のテナント](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解決方法 + +ソリューション|作成者 +--------|--------- +react-invitation-manager|Giuliano De Luca ([@giuleon](https://twitter.com/giuleon)、[www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## バージョン履歴 + +バージョン|日付|コメント +-------|----|-------- +1.0.0|2017 年 7 月 14 日|初期リリース +1.0.1|2017 年 10 月 9 日|バージョン 1.3.0 に更新 + +## 免責事項 +**このコードは、明示または黙示のいかなる種類の保証なしに*現状のまま*提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。** + +--- + +## 前提条件 + +- SharePoint Online および Exchange 付きの Office 365 サブスクリプション + +## 素晴らしいへの最小限の道 + +- このリポジトリの複製を作成する +- Office 365 テナントに対応する Azure Active Directory で、新しい Web アプリケーションを登録する: + - **サインオン URL** に SharePoint ワークベンチのホスト バージョンの URL を入力する (例: *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx*) + - OAuth 暗黙的フローを有効にする + - アプリケーションに **Microsoft Graph/ディレクトリ データの読み取りと書き込み**権限を付与する + - アプリケーション ID をコピーする +- **clientId** プロパティの **src/webparts/invitationManager/AdalConfig.ts** ファイルに、Azure に登録されているアプリケーション ID を入力する +- コマンド ラインで、次を実行する + - `npm i` + - `gulp serve --nobrowser` +- SharePoint ワークベンチのホスト バージョンに移動する +- **招待マネージャー**の Web パーツを追加する + +## 機能 + +このソリューションの Web パーツのサンプルは、SharePoint Framework の上位にある次の概念を示しています。 + +- React を使用した SharePoint Framework クライアント側 Web パーツの構築 +- Office UI Fabric React スタイルを使用した SharePoint および Office と一貫性のあるユーザー エクスペリエンスの構築 +- ADAL JS ライブラリを使用した Azure Active Directory でのオンデマンド認証 +- REST API を使用した Microsoft Graph との通信 +- React を使用して構築された SharePoint Framework Web パーツを使用した ADAL JS ライブラリの使用 + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-invitation-manager/README-Localized/README-pt-br.md b/samples/react-invitation-manager/README-Localized/README-pt-br.md new file mode 100644 index 000000000..0b9d81170 --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-pt-br.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Exemplos de API do Gerenciador de convite do Azure Active Directory + +## Resumo + +Exemplo de Web Parts da Estrutura do SharePoint compiladas usando React, ilustrando a possibilidade de usar a API do Graph para convidar usuários externos para o Azure Active Directory. + +### Gerenciador de convites + +Exemplo de Web Part de cliente do SharePoint Framework criado usando reagir mostrando como convidar o usuário externo usando o Microsoft Graph. + +NB. Estou aguardando o lançamento do HttpGraphClient (um bit limitado em termos de permissão) para usá-lo neste cenário. +Dê uma olhada detalhada: +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part) + +![Web Part do Gerenciador de convites exibida no Workbench do SharePoint](./assets/SPFx-Invitation-Manager.gif) + +## Versão do SharePoint Framework usada +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## Aplicável a + +* [Estrutura do SharePoint](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Locatário de desenvolvedor do Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solução + +Solução | Autor (s) +--------|--------- +reagir – Gerenciador de convite | Giuliano de Luca ([@giuleon](https://twitter.com/giuleon), [www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## Histórico de versão + +Versão | Data | Comentários +-------|----|-------- +1.0.0 | 14 de julho de 2017 | Versão inicial do +1.0.1 | 9 de outubro de 2017 | Atualizado para a versão 1.3.0 + +## Aviso de isenção de responsabilidade +**ESSE CÓDIGO É FORNECIDO *EM* GARANTIA DE QUALQUER TIPO, SEJA EXPRESSA OU IMPLÍCITA, INCLUINDO QUAISQUER GARANTIAS IMPLÍCITAS DE ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA, COMERCIABILIDADE OU NÃO VIOLAÇÃO.** + +--- + +## Pré-requisitos + +- Assinatura do Office 365 com o SharePoint Online e o Exchange + +## Caminho mínimo para impressionante + +- Clone este repositório. +- no Azure Active Directory correspondente ao seu locatário do Office 365, registre um novo aplicativo Web: + - como o **URL de logon** insira a URL da versão hospedada do SharePoint Workbench, por exemplo, *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx* + - habilitar o fluxo implícito OAuth + - conceder ao aplicativo a permissão**de dados do Microsoft Graph/leitura e gravação do diretório** + - copie a ID do aplicativo. +- no arquivo **src/WebParts/convitemanager/AdalConfig. TS**, na propriedade **clientId** insira a ID de aplicativo registrada no Azure +- na linha de comando, execute: + - `npm i` + - `gulp serve --nobrowser` +- Navegue até a versão hospedada do Workbench do SharePoint +- Adicionar a Web Part **Gerenciador de convites** + +## Recursos + +A web part de exemplo nesta solução ilustra os seguintes conceitos sobre a estrutura do SharePoint: + +- usando reagir à criação de web parts do lado do cliente do SharePoint Framework +- usando o Office UI Fabric React estilos para criar uma experiência de usuário consistente com o SharePoint e o Office +- autenticação sob demanda com o Azure Active Directory usando a biblioteca ADAL JS +- comunicar-se com o Microsoft Graph usando sua API REST +- usar a biblioteca do JS do ADAL com web parts do SharePoint Framework construída usando o React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-invitation-manager/README-Localized/README-ru-ru.md b/samples/react-invitation-manager/README-Localized/README-ru-ru.md new file mode 100644 index 000000000..1df2a1faf --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-ru-ru.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Образцы диспетчера приглашений API Graph для Azure Active Directory + +## Сводка + +Примеры созданных с использованием React веб-частей SharePoint Framework, демонстрирующие возможность использовать Graph API для приглашения внешних пользователей в Azure Active Directory. + +### Диспетчер приглашений + +Пример клиентской веб-части SharePoint Framework на основе React, иллюстрирующих приглашение внешнего пользователя с помощью Microsoft Graph. + +NB Я ожидаю общедоступную версию от HttpGraphClient (в условиях разрешения), чтобы использовать его в сценарии. +Ознакомьтесь с этой статьей: +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part) + +![Веб-часть диспетчера приглашений, отображаемая в рабочей области SharePoint](./assets/SPFx-Invitation-Manager.gif) + +## Использованная версия SharePoint Framework +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## Сфера применения + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [клиент разработчика приложений для Office 365;](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Решение + +Решение | Авторы +--------|--------- +react-invitation-manager | Гиулиано де-Лука ([@giuleon](https://twitter.com/giuleon) [www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## Журнал версий + +Версия | Дата | Примечания +-------|----|-------- +1.0.0 | 14 июля 2017 г. | Начальный выпуск +1.0.1 | 09 октября 2017 г. | Обновлено до версии 1.3.0 + +## Заявление об отказе +**ЭТОТ КОД ПРЕДОСТАВЛЯЕТСЯ *КАК ЕСТЬ* БЕЗ КАКОЙ-ЛИБО ЯВНОЙ ИЛИ ПОДРАЗУМЕВАЕМОЙ ГАРАНТИИ, ВКЛЮЧАЯ ПОДРАЗУМЕВАЕМЫЕ ГАРАНТИИ ПРИГОДНОСТИ ДЛЯ КАКОЙ-ЛИБО ЦЕЛИ, ДЛЯ ПРОДАЖИ ИЛИ ГАРАНТИИ ОТСУТСТВИЯ НАРУШЕНИЯ ПРАВ ИНЫХ ПРАВООБЛАДАТЕЛЕЙ.** + +--- + +## Необходимые компоненты + +- Подписка на Office 365 с SharePoint Online and Exchange. + +## Путь к совершенству + +- Клонируйте этот репозиторий +- Зарегистрировать новое веб-приложение в службе Azure Active Directory, соответствующей вашему клиенту Office 365: + - Введите URL-адрес размещенной версии рабочей области SharePoint как **URL-адрес для входа**, например. *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx* + - Включите неявный поток OAuth + - Предоставьте приложению разрешение на ** чтение и запись данных каталога Microsoft Graph** + - Скопируйте идентификатор приложения +- В файле **src/webparts/invitationManager/AdalConfig.ts** свойства **clientId** введите идентификатор приложения, зарегистрированный в Azure +- выполните в командной строке следующую команду: + - `npm i` + - `gulp serve --nobrowser` +- перейдите к размещенной рабочей области SharePoint +- добавьте веб-части** диспетчера приглашений ** + +## Функции + +Образец веб-части иллюстрирует следующие концепции SharePoint Framework: + +- использование React для создания клиентских веб-частей SharePoint Framework +- использование стилей Office UI Fabric React для постоянного взаимодействия пользователей с SharePoint и Office +- проверка подлинности по запросу используя Azure Active Directory с помощью библиотеки ADAL JS +- взаимодействие с Microsoft Graph с помощью REST API +- использование библиотеки ADAL JS с веб-частями SharePoint Framework, созданными с помощью React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-invitation-manager/README-Localized/README-zh-cn.md b/samples/react-invitation-manager/README-Localized/README-zh-cn.md new file mode 100644 index 000000000..d08377b5d --- /dev/null +++ b/samples/react-invitation-manager/README-Localized/README-zh-cn.md @@ -0,0 +1,91 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Azure Active Directory 邀请管理器 Graph API 示例 + +## 摘要 + +此示例 SharePoint 框架 Web 部件使用 React 生成，展示了如何使用 Graph API 邀请外部用户转到 Azure Active Directory。 + +### 邀请管理器 + +使用“回应”创建的示例 SharePoint 框架客户端 web 部件显示如何利用 Microsoft Graph 邀请外部用户。 + +NB。我正在等待 HttpGraphClient 的 GA（权限方面有所限制）以在此场景中使用。 +查看以深入了解： +* [HttpGraphClient](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part) + +![邀请管理器 web 部件在 SharePoint 工作台中显示](./assets/SPFx-Invitation-Manager.gif) + +## 使用的 SharePoint Framework 版本 +![drop](https://img.shields.io/badge/drop-1.3.0-green.svg) + +## 适用于 + +* [SharePoint 框架](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 开发人员租户](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解决方案 + +解决方案|作者 +--------|--------- +react-invitation-manager|Giuliano De Luca ([@giuleon](https://twitter.com/giuleon) , [www.delucagiuliano.com](http://www.delucagiuliano.com)) + +## 版本历史记录 + +版本|日期|注释 +-------|----|-------- +1.0.0|2017 年 7 月 14 日|首次发布 +1.0.1|2017 年 10 月 9 日|更新到版本 1.3.0 + +## 免责声明 +**此代码*按原样提供*，不提供任何明示或暗示的担保，包括对特定用途适用性、适销性或不侵权的默示担保。** + +--- + +## 先决条件 + +- 包含 SharePoint Online 和 Exchange 的 Office 365 订阅 + +## 通向卓越的最短路径 + +- 克隆此存储库。 +- 在对应 Office 365 租户的 Azure Active Directory 中注册新的 Web 应用程序： + - 在“**登录 URL**”上输入托管版 SharePoint 工作台的 URL，例如 *https://contoso.sharepoint.com/\_layouts/15/workbench.aspx* + - 启用 OAuth 隐式流 + - 向应用程序授予 **Microsoft Graph/读写目录数据** 权限 + - 复制应用程序 ID +- 在 **clientId** 属性中的 **src/webparts/invitationManager/AdalConfig.ts** 件内输入 Azure 中注册的应用程序 ID +- 在命令行中，运行 + - `npm i` + - `gulp serve --nobrowser` +- 转到 托管版 SharePoint 工作台 +- 添加 **邀请管理器** web 部件 + +## 功能 + +此解决方案中的示例 web 部件基于 SharePoint 框架阐述了以下概念： + +- 使用“回应” 构建 SharePoint 框架客户端 Web 部件 +- 使用 Office UI Fabric React 样式创建与 SharePoint 和 Office 一致的用户体验 +- 使用 ADAL JS 库通过 Azure Active Directory 按需进行身份验证 +- 使用 REST API 与 Microsoft Graph 通信 +- 使用 ADAL JS 库及使用“回应”创建的 SharePoint 框架 web 部件 + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-invitation-manager) diff --git a/samples/react-msal-msgraph/README-Localized/README-es-es.md b/samples/react-msal-msgraph/README-Localized/README-es-es.md new file mode 100644 index 000000000..ffa34bf28 --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-es-es.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Ejemplo de autenticación de la biblioteca de autenticación de Microsoft (MSAL) + +## Resumen + +Elemento web de ejemplo de SharePoint Framework que usa la [Biblioteca de autenticación de Microsoft (MSAL JS)](https://github.com/AzureAD/microsoft-authentication-library-for-js) para llamar a Microsoft Graph. + +### MSAL WP + +El elemento web de ejemplo recuperará un token de acceso con el ámbito `User.Read` y `Mail.Read`. Una vez que se recupera el token de acceso, realizará una llamada para recibir al usuario actual y sus mensajes de correo electrónico. + +![Ámbitos de permisos](./assets/permission-scopes.png) + +Luego de que conceda los permisos, se mostrará la siguiente información: + +![El elemento web de MSAL que se muestra en el área de trabajo de SharePoint](./assets/msal-wp-output.png) + +## Version de SharePoint Framework utilizada +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## Se aplica a + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Espacio empresarial de desarrollador de Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solución + +Solución | Autor(es) +--------|--------- +react-msal-msgraph|Elio Struyf (MVP, [U2U](https://www.u2u.be), [@eliostruyf](https://www.twitter.com/eliostruyf)) + +## Historial de versiones + +Versión | Fecha | Comentarios +-------|----|-------- +1.0.0 | 17 de marzo de 2017 | Lanzamiento inicial + +## Aviso de declinación de responsabilidades +**ESTE CÓDIGO ES PROPORCIONADO *TAL CUAL* SIN GARANTÍA DE NINGÚN TIPO, YA SEA EXPLÍCITA O IMPLÍCITA, INCLUIDAS LAS GARANTÍAS IMPLÍCITAS DE IDONEIDAD PARA UN FIN DETERMINADO, COMERCIABILIDAD O AUSENCIA DE INFRACCIÓN.** + +--- + +## Requisitos previos + +- Una suscripción a Office 365 con SharePoint Online y Exchange + +## Pasos mínimos + +- Clone este repositorio +- Vaya y registre una nueva aplicación en [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) + - Una vez que haya iniciado sesión, haga clic en **agregar una aplicación** + - Especifique un nombre para la aplicación y haga clic en crear + - Haga clic en **agregar plataforma** y elija **web**. + - Especifique la dirección URL del área de trabajo y asegúrese de que **permitir el flujo implícito** esté habilitado. + - Haga clic en guardar para guardar los cambios. + +![Configuración de la dirección URL web y flujo implícito](./assets/redirect-url.png) + +- Copie el **Id. de la aplicación** y cambie o agréguelo al [archivo MsalWP.tsx en la línea 20](./src/webparts/msalWp/components/MsalWp.tsx#20) +- Ejecute `npm i` +- Ejecute `gulp serve --nobrowser` +- Pruebe el elemento web en el área de trabajo local o hospedado + +## Características + +El elemento web de ejemplo en esta solución ilustra los siguientes conceptos en SharePoint Framework: + +- Cómo usar React para crear elementos web del lado cliente de SharePoint Framework. +- Cómo usar los estilos de Office UI Fabric React para crear una experiencia de usuario coherente con SharePoint y Office. +- Cómo usar la biblioteca MSAL JS para la autenticación a petición con Azure Active Directory +- Cómo comunicarse con Microsoft Graph mediante la API de REST +- Cómo usar la biblioteca MSAL JS con elementos web de SharePoint Framework creados con React. + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph) diff --git a/samples/react-msal-msgraph/README-Localized/README-fr-fr.md b/samples/react-msal-msgraph/README-Localized/README-fr-fr.md new file mode 100644 index 000000000..9c90009c7 --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-fr-fr.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Exemple d’authentification de la Bibliothèque d’authentification Microsoft (MSAL JS) + +## Résumé + +Exemple de composant WebPart SharePoint Framework à l’aide de la [Bibliothèque d’authentification Microsoft (MSAL JS)](https://github.com/AzureAD/microsoft-authentication-library-for-js) pour appeler Microsoft Graph. + +### MSAL WP + +L’exemple de composant WebPart récupère un jeton d’accès avec l’étendue `User.Read` and `Mail.Read`. Une fois qu’un jeton d’accès est récupéré, il effectue un appel pour recevoir l’utilisateur actuel et ses courriers électroniques. + +![Étendues d’autorisation](./assets/permission-scopes.png) + +Une fois les autorisations attribuées, les informations suivantes sont affichées : + +![Le composant WebPart MSAL affiché dans SharePoint Workbench](./assets/msal-wp-output.png) + +## Version SharePoint Framework utilisée +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## S’applique à + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Client de développeur Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solution + +Solution|Auteur (s) +--------|--------- +react-msal-msgraph|Elio Struyf (MVP, [U2U](https://www.u2u.be), [@eliostruyf](https://www.twitter.com/eliostruyf)) + +## Historique des versions + +Version|Date|Commentaires +-------|----|-------- +1.0.0 | 17 mars 2017 | Publication initiale + +## Clause d’exclusion +**CE CODE EST FOURNI *EN L’ÉTAT*, SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS TOUTE GARANTIE IMPLICITE D'ADAPTATION À UN USAGE PARTICULIER, DE QUALITÉ MARCHANDE ET DE NON-CONTREFAÇON.** + +--- + +## Conditions préalables + +- Abonnement à Office 365 avec SharePoint Online et Exchange + +## Chemin d’accès minimal à extraordinaire + +- Clonez ce référentiel. +- Accédez et Inscrivez une nouvelle application sur [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) + - Une fois connecté, cliquez sur **Ajouter une application** + - Spécifiez le nom de l’application, puis cliquez sur créer. + - Cliquez sur **Ajouter une plateforme** et choisissez **Web**. + - Spécifiez l’URL Workbench et vérifiez que la case à cocher **Autoriser un flux implicite** est activée + - Cliquez sur Enregistrer pour sauvegarder les modifications. + +![Configuration d’URL web et flux implicite](./assets/redirect-url.png) + +- Copiez l’**ID de l’application** puismodifiez-le en l'ajoutant au [fichier MsalWP.tsx en ligne 20](./src/webparts/msalWp/components/MsalWp.tsx#20) +- Exécutez `npm i` +- Exécutez `gulp serve --nobrowser` +- Testez votre composant WebPart dans le workbench local ou hébergé + +## Fonctionnalités + +L’exemple de composant WebPart dans cette solution illustre les concepts suivants au-dessus de SharePoint Framework : + +- utilisation de la fonction React pour créer des composants WebPart côté client dans SharePoint Framework +- utilisation des styles Office UI Fabric React pour créer une expérience utilisateur cohérente avec SharePoint et Office +- authentification à la demande avec Azure Active Directory à l’aide de la bibliothèque MSAL JS +- communication avec Microsoft Graph à l’aide de l’API REST +- utilisation de la bibliothèque MSAL JS avec les composants WebPart SharePoint Framework créés à l’aide de la fonction React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph) diff --git a/samples/react-msal-msgraph/README-Localized/README-ja-jp.md b/samples/react-msal-msgraph/README-Localized/README-ja-jp.md new file mode 100644 index 000000000..f64ea99b9 --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-ja-jp.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Microsoft Authentication Library (MSAL JS) の認証サンプル + +## 概要 + +[Microsoft Authentication Library (MSAL JS)](https://github.com/AzureAD/microsoft-authentication-library-for-js) を使用して Microsoft Graph を呼び出す SharePoint Framework Web パーツのサンプルです。 + +### MSAL WP + +サンプル Web パーツは、`User.Read` および `Mail.Read` 範囲でアクセス トークンを取得します。アクセス トークンを取得すると、現在のユーザーとそのメール メッセージを受信する呼び出しが行われます。 + +![アクセス許可スコープ](./assets/permission-scopes.png) + +アクセス許可を付与すると、次の情報が表示されます。 + +![SharePoint ワークベンチに表示される MSAL の Web パーツ](./assets/msal-wp-output.png) + +## 使用されている SharePoint Framework バージョン +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## 適用対象 + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 Developer のテナント](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解決方法 + +ソリューション|作成者 +--------|--------- +react-msal-msgraph|Elio Struyf (MVP、[U2U](https://www.u2u.be)、[@eliostruyf](https://www.twitter.com/eliostruyf)) + +## バージョン履歴 + +バージョン|日付|コメント +-------|----|-------- +1.0.0|2017 年 3 月 17 日|初期リリース + +## 免責事項 +**このコードは、明示または黙示のいかなる種類の保証なしに*現状のまま*提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。** + +--- + +## 前提条件 + +- SharePoint Online および Exchange 付きの Office 365 サブスクリプション + +## 素晴らしいへの最小限の道 + +- このリポジトリの複製を作成する +- [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) にアクセスして、新しいアプリケーションを登録する + - ログインしたら、[**アプリの追加**] をクリックする + - [アプリケーション名] を指定し、[作成] をクリックする + - [**プラットフォームの追加**] をクリックし、[**Web**] を選択する + - ワークベンチの URL を指定し、[**暗黙的フローを許可する**] が有効であることを確認する + - [保存] をクリックして変更を保存する + +![Web URL 構成と暗黙的フロー](./assets/redirect-url.png) + +- **アプリケーション ID** をコピーし、変更して [20 行目の MsalWP.tsx](./src/webparts/msalWp/components/MsalWp.tsx#20) ファイルに追加する +- `npm i` を実行する +- `gulp serve --nobrowser` を実行する +- ローカルまたはホスト ワークベンチで Web パーツをテストする + +## 機能 + +このソリューションの Web パーツのサンプルは、SharePoint Framework の上位にある次の概念を示しています。 + +- React を使用した SharePoint Framework クライアント側 Web パーツの構築 +- Office UI Fabric React スタイルを使用した SharePoint および Office と一貫性のあるユーザー エクスペリエンスの構築 +- MSAL JS ライブラリを使用した Azure Active Directory でのオンデマンド認証 +- REST API を使用した Microsoft Graph との通信 +- React を使用して構築された SharePoint Framework Web パーツを使用した MSAL JS ライブラリの使用 + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph) diff --git a/samples/react-msal-msgraph/README-Localized/README-pt-br.md b/samples/react-msal-msgraph/README-Localized/README-pt-br.md new file mode 100644 index 000000000..40c15846d --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-pt-br.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Exemplo de autenticação do MSAL JS (biblioteca de autenticação da Microsoft) + +## Resumo + +Exemplo de Web Part da Estrutura do SharePoint que utiliza a [Microsoft Authentication Library (MSAL JS)](https://github.com/AzureAD/microsoft-authentication-library-for-js) para chamar o Microsoft Graph. + +### MSAL WP + +A web part de exemplo recuperará um token de acesso com o escopo `User.Read` e `Mail.Read`. Quando um token de acesso é recuperado, ele fará uma chamada para receber o usuário atual e suas mensagens de e-mail. + +![Escopos de permissão](./assets/permission-scopes.png) + +Depois de ter concedido as permissões, as seguintes informações serão exibidas: + +![A web part MSAL exibida no Workbench do SharePoint](./assets/msal-wp-output.png) + +## Versão do SharePoint Framework usada +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## Aplicável a + +* [Estrutura do SharePoint](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Locatário de desenvolvedor do Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Solução + +Solução | Autor (s) +--------|--------- +reagir-MSAL-msgraph | Elio Struyf (MVP, [U2U](https://www.u2u.be), [@eliostruyf](https://www.twitter.com/eliostruyf)) + +## Histórico de versão + +Versão | Data | Comentários +-------|----|-------- +1.0.0 | 17 de março de 2017 | Versão inicial + +## Aviso de isenção de responsabilidade +**ESSE CÓDIGO É FORNECIDO *EM* GARANTIA DE QUALQUER TIPO, SEJA EXPRESSA OU IMPLÍCITA, INCLUINDO QUAISQUER GARANTIAS IMPLÍCITAS DE ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA, COMERCIABILIDADE OU NÃO VIOLAÇÃO.** + +--- + +## Pré-requisitos + +- Assinatura do Office 365 com o SharePoint Online e o Exchange + +## Caminho mínimo para impressionante + +- Clone este repositório +- Vá e registre um novo aplicativo no [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) + - Quando estiver conectado, clique em **adicionar um aplicativo** + - Especifique o nome do aplicativo e clique em criar + - Clique em **Adicionar plataforma** e escolha **Web**. + - Especifique a URL do Workbench e certifique-se de que **permitir o fluxo implícito** esteja habilitado + - Clique em salvar para armazenar essas alterações + +![Configuração de URL da Web e fluxo implícito](./assets/redirect-url.png) + +- Copie a **identificação do aplicativo** e altere adicionar isto ao arquivo [MsalWP.tsx na linha 20](./src/webparts/msalWp/components/MsalWp.tsx#20) +- Executar `npm i` +- Execute `gulp serve --nobrowser` +- Teste sua Web Part no ambiente de trabalho local ou hospedado + +## Recursos + +A web part de exemplo nesta solução ilustra os seguintes conceitos sobre a estrutura do SharePoint: + +- usando reagir à criação de web parts do lado do cliente do SharePoint Framework +- usando o Office UI Fabric React estilos para criar uma experiência de usuário consistente com o SharePoint e o Office +- autenticação sob demanda com o Azure Active Directory usando a biblioteca MSAL JS +- comunicar-se com o Microsoft Graph usando sua API REST +- usar a biblioteca do JS do MSAL com web parts do SharePoint Framework construída usando o React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph) diff --git a/samples/react-msal-msgraph/README-Localized/README-ru-ru.md b/samples/react-msal-msgraph/README-Localized/README-ru-ru.md new file mode 100644 index 000000000..ff5cdd4c8 --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-ru-ru.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Образец проверка подлинности Microsoft Authentication Library (MSAL JS) + +## Сводка + +Пример веб-части SharePoint Framework, в которой используется [библиотека проверки подлинности Microsoft (MSAL JS)](https://github.com/AzureAD/microsoft-authentication-library-for-js) для вызова Microsoft Graph. + +### MSAL WP + +Образец веб-части получает маркер доступа с помощью областей `User.Read` и `Mail.Read`. После получения маркера доступа, выводится вызов для получения текущего пользователя и его сообщений. + +![Области разрешений](./assets/permission-scopes.png) + +После вашего разрешения, появится следующая информация: + +![Веб-часть MSAL, отображаемая в рабочей области SharePoint](./assets/msal-wp-output.png) + +## Использованная версия SharePoint Framework +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## Сфера применения + +* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [клиент разработчика приложений для Office 365;](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## Решение + +Решение | Авторы +--------|--------- +react-msal-msgraph| Елио Струйф (MVP [U2U](https://www.u2u.be), [@eliostruyf](https://www.twitter.com/eliostruyf)) + +## Журнал версий + +Версия | Дата | Примечания +-------|----|-------- +1.0.0 | 17 марта 2017 г. | Первоначальный выпуск + +## Заявление об отказе +**ЭТОТ КОД ПРЕДОСТАВЛЯЕТСЯ *КАК ЕСТЬ* БЕЗ КАКОЙ-ЛИБО ЯВНОЙ ИЛИ ПОДРАЗУМЕВАЕМОЙ ГАРАНТИИ, ВКЛЮЧАЯ ПОДРАЗУМЕВАЕМЫЕ ГАРАНТИИ ПРИГОДНОСТИ ДЛЯ КАКОЙ-ЛИБО ЦЕЛИ, ДЛЯ ПРОДАЖИ ИЛИ ГАРАНТИИ ОТСУТСТВИЯ НАРУШЕНИЯ ПРАВ ИНЫХ ПРАВООБЛАДАТЕЛЕЙ.** + +--- + +## Необходимые компоненты + +- Подписка на Office 365 с SharePoint Online and Exchange. + +## Путь к совершенству + +- Клонируйте этот репозиторий +- Зарегистрируйте новое приложение в [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) + - После входа, нажмите **Добавить приложение** + - Укажите имя приложения и щелкните "Создать". + - Щелкните **Добавить платформу** и выберите параметр **Веб**. + - Укажите URL-адрес рабочей области и убедитесь, что **разрешение неявного потока** включено + - Чтобы сохранить изменения, нажмите кнопку "Сохранить". + +![Настройка URL-адреса и неявный поток](./assets/redirect-url.png) + +- Скопируйте **идентификатор приложения** и измените добавив в [файл MsalWP.tsx в строке 20](./src/webparts/msalWp/components/MsalWp.tsx#20) +- Запустите `npm i` +- Запустите `gulp serve --nobrowser` +- Проверьте нашу веб-часть в местной или размещенной рабочей области + +## Функции + +Образец веб-части иллюстрирует следующие концепции SharePoint Framework: + +- использование React для создания клиентских веб-частей SharePoint Framework +- использование стилей Office UI Fabric React для постоянного взаимодействия пользователей с SharePoint и Office +- проверка подлинности по запросу используя Azure Active Directory с помощью библиотеки MSAL JS +- взаимодействие с Microsoft Graph с помощью REST API +- использование библиотеки MSAL JS с веб-частями SharePoint Framework, созданными с помощью React + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph) diff --git a/samples/react-msal-msgraph/README-Localized/README-zh-cn.md b/samples/react-msal-msgraph/README-Localized/README-zh-cn.md new file mode 100644 index 000000000..ccf4beb07 --- /dev/null +++ b/samples/react-msal-msgraph/README-Localized/README-zh-cn.md @@ -0,0 +1,92 @@ +--- +page_type: sample +products: +- office-sp +- ms-graph +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + - Microsoft Graph + services: + - SharePoint + platforms: + - react + createdDate: 8/1/2017 12:00:00 AM +--- +# Microsoft 身份验证库(MSAL JS) 身份验证示例 + +## 摘要 + +此示例 SharePoint 框架 Web 部件使用 [Microsoft 身份验证库 (MSAL JS) ](https://github.com/AzureAD/microsoft-authentication-library-for-js)来调用 Microsoft Graph。 + +### MSAL WP + +此示例使用 `User.Read` 和 `Mail.Read` 范围检索访问令牌。检索到访问令牌后，将执行调用以接收当前用户和其邮件正文。 + +![权限范围](./assets/permission-scopes.png) + +授予权限后，将显示下列信息： + +![SharePoint 工作台中显示的 MSAL web 部件](./assets/msal-wp-output.png) + +## 使用的 SharePoint Framework 版本 +![drop](https://img.shields.io/badge/drop-GA-green.svg) + +## 适用于 + +* [SharePoint 框架](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) +* [Office 365 开发人员租户](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) + +## 解决方案 + +解决方案|作者 +--------|--------- +react-msal-msgraph|Elio Struyf (MVP, [U2U](https://www.u2u.be), [@eliostruyf](https://www.twitter.com/eliostruyf)) + +## 版本历史记录 + +版本|日期|注释 +-------|----|-------- +1.0.0|2017 年 3 月 17 日|首次发布 + +## 免责声明 +**此代码*按原样提供*，不提供任何明示或暗示的担保，包括对特定用途适用性、适销性或不侵权的默示担保。** + +--- + +## 先决条件 + +- 包含 SharePoint Online 和 Exchange 的 Office 365 订阅 + +## 通向卓越的最短路径 + +- 克隆此存储库 +- 转到 [https://apps.dev.microsoft.com](https://apps.dev.microsoft.com) 注册新的应用程序 + - 登录后，单击“**添加应用**” + - 指定应用程序名称，并点击“创建”。 + - 单击“**添加平台**”并选择 **Web** + - 指定工作台 URL，并确保已启用“**允许隐式流**” + - 点击“保存”以存储这些更改 + +![Web URL 配置和隐式流](./assets/redirect-url.png) + +- 复制**应用程序 id**并添加至 [MsalWP.tsx file on line 20](./src/webparts/msalWp/components/MsalWp.tsx#20) +- 运行 `npm i` +- 运行 `gulp serve --nobrowser` +- 在本地或托管工作台中测试 web 部件 + +## 功能 + +此解决方案中的示例 web 部件基于 SharePoint 框架阐述了以下概念： + +- 使用“回应” 构建 SharePoint 框架客户端 Web 部件 +- 使用 Office UI Fabric React 样式创建与 SharePoint 和 Office 一致的用户体验 +- 使用 MSAL JS 库通过 Azure Active Directory 按需进行身份验证 +- 使用 REST API 与 Microsoft Graph 通信 +- 使用 MSAL JS 库及使用“回应”创建的 SharePoint 框架 web 部件 + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-msal-msgraph)