mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-19 11:26:13 +00:00
93 lines
4.8 KiB
Markdown
93 lines
4.8 KiB
Markdown
---
|
||
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`. После получения маркера доступа, выводится вызов для получения текущего пользователя и его сообщений.
|
||
|
||

|
||
|
||
После вашего разрешения, появится следующая информация:
|
||
|
||

|
||
|
||
## Использованная версия SharePoint Framework
|
||

|
||
|
||
## Сфера применения
|
||
|
||
* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||
* [клиент разработчика приложений для Office 365;](https://learn.microsoft.com/sharepoint/dev/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-адрес рабочей области и убедитесь, что **разрешение неявного потока** включено
|
||
- Чтобы сохранить изменения, нажмите кнопку "Сохранить".
|
||
|
||

|
||
|
||
- Скопируйте **идентификатор приложения** и измените добавив в [файл 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
|
||
|
||

|