Вызов веб-API C# из надстройки Outlook Web

Question

Я создал веб-API ASP.NET MVC, который размещен в Azure. У него есть ClientID, по которому клиенты должны проходить аутентификацию при вызове его методов действия.

Теперь я создал надстройку Outlook Web и добавил ее на ленту встреч. Пользователи входят на https://outlook.office.com/ и проходят проверку подлинности. После этого они смогут получить доступ к надстройке на ленте встреч. Когда пользователь щелкает значок надстройки, панель надстройки загружается в правой части окна.

В моей надстройке мне нужно заполнить некоторые раскрывающиеся списки и т. д., поэтому мне нужно загрузить данные из веб-API.

Итак, сначала мне нужно аутентифицировать пользователя. Я прочитал несколько статей, в которых предлагается использовать библиотеку msal.js. В моей надстройке эта часть пытается аутентифицировать пользователя:

      Office.onReady(function (info) {
    $(document).ready(function () {
        // The document is ready
        GetAccessToken();
    });
});

function GetAccessToken() {

    //************** acquireTokenSilent
    console.log('configuring msal...');
    var msalConfig = {
        auth: {
            clientId: <web pi client it>,
            authority: <my authority>,
            redirectUri: <configured redirect uri on azure for the web api app reg.>
        },
        cache: {
            cacheLocation: "sessionStorage",
            storeAuthStateInCookie: false
        }
    };
    var msalInstance = new msal.PublicClientApplication(msalConfig);
    console.log('msal configured');
    
    msalInstance.acquireTokenPopup({
        scopes: ["User.Read"]
    })
    .then(response => {
        // Handle token acquisition
        window.close(); // Close the popup window

        // Acquire token interactive success
        // Call API with token
        console.log('token acquired');
        accessToken = response.accessToken;
        console.log('access token: ' + accessToken);
    })
    .catch(error => {
        // Acquire token interactive failure
        console.log('error acquiring token: ' + error);
    });
}

При запуске кода всплывающее окно показывает и аутентифицирует пользователя. Но затем во всплывающем окне вместо закрытия отображается индексная страница веб-API, чтобы я мог получить токен доступа.

Я хочу, чтобы всплывающее окно закрылось, чтобы я мог получить токен доступа, а затем добавить его в заголовок для моих вызовов API.

Я попытался вручную закрыть всплывающее окно с помощью window.close(), но это не сработало.

Как сделать так, чтобы всплывающее окно автоматически закрывалось?

Answer 1

Добавьте этот код в свой файл Redirect.html.

      <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>


        var address_Link = window.location.href;
        console.log(address_Link)
        var address_arr = address_Link.split("=");
        var address_Token = address_arr[1];
        var Id_Token = address_Token.split("&");
        var access_token = Id_Token[0];
        console.log(Id_Token)

        Office.onReady(function (appInfo) {
            Office.context.ui.messageParent(JSON.stringify(access_token));

</script>

Я добавляю URL-адрес вашего идентификатора клиента и ваш redirect_uri. при успешном входе вы получите токен доступа в свой js. Надеюсь, это будет полезно для вас. Я изо всех сил старался объяснить вам.