如何将Office displayDialogAsync与oauth库一起使用

问题描述 投票:0回答:1

我们在Office Excel加载项中实现了Office js Helpers进行身份验证。但是由于刷新令牌功能,出于以下原因,不得不迁移其他OAUTH库。

1)支持本地服务器2)实现刷新令牌/静默令牌

因此,我们尝试使用oidc-client通过displaydialogasync用OAUTH库之一将Office js Helpers替换为OAUTH库之一,但它收到消息“ jsonMessage”且未获得任何令牌,因此请确认实现。

auth.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <!-- Office JavaScript API -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>    
        <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>          
    </head>    
<body>  
</body>
<!-- <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
<script src="/dist/auth.js"></script>
<script>
  Office.initialize = function () {
    showLogin();
    // Office.context.ui.messageParent("jsonMessage");
    console.log('first')
  };

</script>
</html>

auth.ts

import { User, UserManager, UserManagerSettings } from 'oidc-client';
import { environment } from 'src/environments/environment';

export { User };

export class AuthService {

  userManager: UserManager;
  constructor() {
    const settings = {
      authority: "https://qa-xxxxxxxx.com/xxxx/",
      client_id: "https://qa-xxxxxxxx.com/xxxx/",
      redirect_uri: "https://localhost:3000/taskpane.html",
      // silent_redirect_uri: `${environment.clientRoot}assets/silent-callback.html`,
      // post_logout_redirect_uri: `${environment.clientRoot}`,
      response_type: 'id_token token',
      scope: "openid read:investments read:profiles read:portfolios"
    };
    this.userManager = new UserManager(settings);
  }

  public getUser(): Promise<User> {
    return this.userManager.getUser();
  }

  public login(): Promise<void> {
    return this.userManager.signinRedirect();
  }

  public renewToken(): Promise<User> {
    return this.userManager.signinSilent();
  }

  public logout(): Promise<void> {
    return this.userManager.signoutRedirect();
  }
}

taskpane.ts

 if (localStorage.getItem('accessToken') == null) {
    if (OfficeHelpers.Authenticator.isAuthDialog())
      return;
    var dialog: any;
    var url: any;
    url = environment.AuthUrl;
    let loginDialog: Office.Dialog;

    const loginpopup =  function () {
       Office.context.ui.displayDialogAsync(
        url,
        {height: 40, width: 30},
        (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
                // displayError(`${result.error.code} ${result.error.message}`);
            }
            else {
                loginDialog = result.value;
                loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage);
                // loginDialog.addEventHandler(Office.EventType.DialogEventReceived, processLoginDialogEvent);
            }
        }
    );

 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();
        };
      }
office-js
1个回答
0
投票
  1. 我对oidc-client本身一无所知,但您可以在Auth with the Dialog API上找到有关将Office Dialog API与OAuth库一起使用的一些一般性指导。

  2. Office Helpers仅对Azure AD,Google,Facebook,Dropbox和Microsoft帐户具有内置支持。由于使用的是自己的身份验证服务器,因此需要修改帮助程序以添加自定义端点。 (例如,参见帮助程序文件endpoint.manager.ts。)但这将是毫无意义的复杂性。我真的建议您完全不要使用帮助器。

  3. 我无法从您的代码中分辨出environment.AuthUrl的值,所以我无法分辨您要传递给displayDialogAsync的URL。我假设它是auth.html。如果不是,那么事情就搞砸了。

  4. 似乎您正在使用auth.html加载auth.js,但是auth.ts仅定义了内容。然后auth.html调用showLogin,但是该方法不在您使用auth.html加载的任何库中。

  5. 似乎您在auth.html中两次加载了office.js。

  6. 您已将重定向URL设置为taskpane.html。我不知道oidc-client`的工作原理,但是几乎可以肯定这是错误的。如果auth代码在auth.html中运行,则您希望auth.html作为重定向URL。

© www.soinside.com 2019 - 2024. All rights reserved.