Использование Secure Azure API из SharePoint в Интернете

Ниже приведены шаги по вызову размещенного API Azure из SharePoint в Интернете с использованием библиотеки JavaScript и ADAL.js, без запроса подписи, все должно обрабатываться в сценарии с использованием ADAL.js для проверки подлинности безопасного API.

Создание и настройка API

1. Создать лазурный API
2. Опубликуйте свой лазурный API в лазурном

3. Перейдите на портал Azure, выберите приложение API, выберите Аутентификация / авторизация.

   • Установите для службы приложений Аутентификацию: Вкл.

   • Действия, которые необходимо предпринять, если запрос не прошел аутентификацию: Войдите в словарь Azure.

   • Провайдеры аутентификации: Экспресс

4. Теперь API защищен с помощью Azure AD, если вы перемещаетесь по API через браузер, вам будет предложено войти в систему.

5. Когда мы устанавливаем аутентификацию в экспресс-режиме, приложение будет автоматически создано в Azure Active Directory, вы можете увидеть имя в приложении Azure AD.
6. Перейдите на портал управления Azure, нажмите активный каталог на левой панели навигации,

7. Щелкните каталог, который будет интегрирован в ваш офис 365 (или любой источник, который вы хотите вызвать API Azure, который использует тот же активный каталог Azure, что и настроенная для вас проверка подлинности API).
8. Щелкните приложение, и вы найдете свое приложение AD в списке, который был создан с помощью метода Express, как мы обсуждали в шаге №3.
9. Теперь нам нужно создать новое приложение в AAD, которое будет нашим каналом связи от Office 365 к API Azure. Нажмите «ДОБАВИТЬ» в нижнем колонтитуле.
10. Введите имя и выберите опцию «ВЕБ-ПРИЛОЖЕНИЕ И / ИЛИ ВЕБ-AP».
11. В поле URL-адрес входа введите URL-адрес SharePoint в Интернете, из которого вы планируете вызывать API Azure.
12. Для APP ID UR L введите уникальный URL, он будет использоваться в качестве уникального логического идентификатора для вашего приложения.
13. После создания приложения нажмите "Настроить" и скопируйте идентификатор клиента, который будет использоваться позже.
14. В разделе Разрешение для других приложений нажмите «Добавить приложение», на следующей странице выберите «Все приложения» и выберите приложение Azure API, которое вы дважды проверили на шаге 8 и подтверждаете
15. Вы будете перенаправлены обратно на страницу настройки. Теперь в разделе Разрешение для других приложений вы видите, что ваше приложение Azure API указано здесь, нажмите делегированное разрешение, выберите доступ к приложению.
16. Внизу страницы нажмите Управление манифестом> Скачать манифесты t.
17. Загрузите файл в место, где вы сможете его отредактировать.
18. В загруженном файле манифеста найдите свойство oauth2AllowImplicitFlow. Измените значение этого свойства с false на true, а затем сохраните файл.
19. Нажмите Управление манифестом> Загрузить манифест и загрузите файл, который вы обновили на предыдущем шаге.
20. Портал управления Azure, выберите параметр и скопируйте идентификатор подписки AAD для соответствующего AAD

Вызов API Azure из SharePoint Online

После выполнения вышеуказанных шагов вы можете вызвать Azure API из sharePoint в Интернете, который использует тот же Active Directory, указанный выше.

21. Отредактируйте страницу и добавьте веб-часть редактора скриптов
22. Добавьте следующий сценарий · subscriptionId, см. Шаг 20 · clientId см. Шаг 13

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal.min.js"></script>
<script type="text/javascript">
function CallAzureAPI() {
    "use strict";
  
    var subscriptionId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    var clientId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; 
    window.config = {
        subscriptionId: subscriptionId,                 
        clientId: clientId,     
        postLogoutRedirectUri: window.location.origin,
        endpoints: {
            AzureApiUri: 'https://xxxxxxxxxxxx.azurewebsites.net'
        }, 
         cacheLocation: 'localStorage' 
    };
    var authContext = new AuthenticationContext(config);    
    var isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();    
    if (isCallback && !authContext.getLoginError()) {
        window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
    }    
    // If not logged in force login
    var user = authContext.getCachedUser();
    if (user) {
        // Logged in already
        console.log(user);
    } 
    else {
        
        authContext.login();
    }    
    // Acquire token for Files resource.
    authContext.acquireToken(config.endpoints. AzureApiUri, function (error, token) {
        // Handle ADAL Errors.
        if (error || !token) {
            console.log('ADAL error occurred: ' + error);
            return;
        }
        var ApiUri = "https://xxxxxxxxx.azurewebsites.net/api/Get";

        $.ajax({
            type: "GET",
            url: ApiUri,
            headers: {
                'Authorization': 'Bearer ' + token,
            }
        }).done(function (response) {
            console.log('Successfully called API.');
            console.log(response);
            
        }).fail(function () {
            console.log('Calling API failed.');
           
        });
    });
}
</script>
<input type='button' value='Call Azure API' onclick=" CallAzureAPI ();"/>

Это решение работает, хотя через некоторое время (позже я узнал, когда истек срок действия файла cookie AAD), мы получаем эту ошибку «Операция обновления токена не удалась из-за тайм-аута»,

Я провел небольшое исследование и обнаружил, что методы getCachedUser или getUser просматривают хранилище браузера для id_token и возвращают ненулевого пользователя, если в кеше есть токен. Однако время истечения срока действия токена не учитывается. Что происходит здесь, поскольку используется localStorage, токены сохраняются в кеше при повторном открытии браузера (и, следовательно, getCachedUser возвращает ненулевой объект), но срок действия файла cookie AAD истек (если пользователь не установил флажок держать меня в системе, когда Вход в систему). Поскольку срок действия cookie истек, вызов токена получения завершается с ошибкой "требуется вход в систему".

так как обходной путь я проверил, установите флажок держать меня в системе при входе в систему, и он работает.

Можно вызвать веб-API, защищенный Azure AD, из SharePoint в Интернете с помощью JavaScript, однако это очень сложно.

Вот шаги для справки:

1. Разработка веб-API, защищенного Azure AD
2. зарегистрировать собственное приложение на том же клиенте
3. включить неявный поток для собственного приложения
4. предоставить собственному приложению доступ к веб-API с портала Azure
5. используя admin_consent для собственного приложение для предоставления разрешения организации
6. разработка веб-страницы в проекте веб-API для страницы перенаправления для запроса OAuth 2.0

7. напишите код на веб-странице, используя windows.postMessage, чтобы опубликовать токен на родительской странице

   $().ready(function () {
       if (window.parent != null) {
           // get the token from URL here
           var token = "123";
           console.log(window.location);
           window.parent.postMessage(token, "*");
       }
   
   })
   

8. На онлайн-странице SharePoint с использованием iframe для отправки неявного потока, как в приведенном ниже коде.

<iframe id="iframe_id" src="https://login.microsoftonline.com/{tenanit}.onmicrosoft.com/oauth2/authorize?response_type=token&client_id={clientId}&resource={webApiAppIdUri}&redirect_uri={redirect_uri}&prompt=none"></iframe>
<script>
        var token = "";
        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {
            token=event.data;
            console.log(event.data);
        }
      
</script>

Вот цифра, которая поможет понять прогресс: