Как реализовать MSAL. js в надстройке Excel с помощью OfficeJS - PullRequest
0 голосов
/ 27 мая 2020

Я создал надстройку Excel и хотел реализовать поток входа в систему с использованием MSAL. js для реализации токена refre sh. Ниже приведены logi c, которые я пробовал.

Текущий сценарий:

Шаг 1: Когда я нажимаю кнопку входа в систему в качестве командного события, он вызывает файл taskpane.ts, как показано ниже.

Шаг 2. В файле панели задач я пытаюсь вызвать UserAgentApplication в Auth.ts, используя Office.context.ui.displayDialogAsyn c

Шаг 3: Я получил result.status как успешный, но это не попасть в метод processLoginMessage, который вызывается с помощью addEventHandler.

Ожидаемый сценарий:

Должен вызвать метод processLoginMessage, где он может получить токен доступа. Поэтому любезно дайте мне знать, если что-то мне не хватает.

Auth.ts

import * as msal from 'msal';
  // The initialize function must be run each time a new page is loaded
  Office.initialize = () => {

    const config: msal.Configuration = {
      auth: {
        clientId: 'fc19440a-334e-471e-af53-a1c1f53c9226',
        authority: 'https://login.microsoftonline.com/',
        redirectUri: 'https://localhost:3000/taskpane.html'       
      },
      cache: {
        cacheLocation: 'localStorage', 
        storeAuthStateInCookie: true   
      }
    };

    const userAgentApp: msal.UserAgentApplication = new msal.UserAgentApplication(config);
    const authCallback = (error: msal.AuthError, response: msal.AuthResponse) => {

      if (!error) {
        if (response.tokenType === 'id_token') {
         localStorage.setItem("loggedIn", "yes");
        }
        else {
          // The tokenType is access_token, so send success message and token.
          Office.context.ui.messageParent( JSON.stringify({ status: 'success', result : response.accessToken }) );
        }
      }
      else {
        const errorData: string = `errorMessage: ${error.errorCode}
                                   message: ${error.errorMessage}
                                   errorCode: ${error.stack}`;
        Office.context.ui.messageParent( JSON.stringify({ status: 'failure', result: errorData }));
      }
    };

    userAgentApp.handleRedirectCallback(authCallback);

    const request: msal.AuthenticationParameters = {
      scopes: ['user.read', 'files.read.all'],
    };

    if (localStorage.getItem("loggedIn") === "yes") {
      userAgentApp.acquireTokenRedirect(request);
    }
    else {

        userAgentApp.loginRedirect(request);
    }
  };

Taskpane.ts

 Office.context.ui.displayDialogAsync(
        url,
        {height: 40, width: 30},
        (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {                
            }
            else {
                loginDialog = result.value;
                loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage);                
            }
        }
    );

 function processLoginMessage(arg: any) {
        if (arg != "jsonMessage") {
          $(".loader").show();
          var test = JSON.parse(arg.message).value.split("#")[1].split("&")[1].split("=");
          let accessToken = test[1];
          localStorage.setItem('accessToken', accessToken);
          OfficeRuntime.storage.setItem('accessCustomToken', accessToken)
            .then((result) => {
              console.log(result);
            }, (error) => {
              console.log('Store error: ');
              console.log(error);
            });       
          loadProfiles();
          $('#lstPrfId').show();
          $("#lblprf").show();
          dialog.close();
        };
      }

Снимок экрана:

enter image description here

...