OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
670 stars 96 forks source link

Ensure the opening of dialog box #3356

Closed chengtie closed 5 months ago

chengtie commented 1 year ago

Message from office-js bot: We’re closing this issue because it has been inactive for a long time. We’re doing this to keep the issues list manageable and useful for everyone. If this issue is still relevant for you, please create a new issue. Thank you for your understanding and continued feedback.

I have an Office add-in. In some pages of the add-in, I need to implement a button which leads to the opening of a Stripe checkout session. As Stripe Checkout is not supported in an iframe, I guess the best choice is to open it in a dialog box.

I tried to use a code similar to follows.

Office.context.ui.displayDialogAsync(
  url,
  { height: 90, width: 60 },
    asyncResult => {
      console.log("asyncResult", asyncResult)
    }
)

When we click on the button for the first time, it shows a permission prompt to say the addin wants to display a new window, Allow or Ignore. Then we click on Allow, the session can be opened in a dialog box.

However, after we close the session dialog, and we click on the button again, the permission prompt does not popup, the dialog box does not popup either. In the console, I can see caught (in promise) Error: Timeout: could not perform cross-storage:get.

I also tried to add promptBeforeOpen: false. With this option, there is no permission prompt, and we can open and close the dialog box many times.

I think in this scenario, the most important thing is to be able to open (and close) the dialog box in all the environments and prevent it from being blocked. Having the permission prompt or not is secondary. So my questions are

  1. Without promptBeforeOpen: false, why cannot I open the dialog again and how to fix that?
  2. With promptBeforeOpen: false, can we ensure that the dialog box cannot be blocked?
iotataru commented 1 year ago

Hey @chengtie, what browser are you using? Or are you on Office on Windows or Mac For 1, that sounds like a bug. It should either show the prompt again or it should cache properly and work. For 2, in short no. Some users have browser settings that prevent opening new windows without explicit user action

Could you also please try promptBeforeOpen: true` and let me know if you still observe the same behavior as without anything explicitly set or if it solves the issue.

chengtie commented 1 year ago

Hello, thank you for your reply. I have been trying with different parameters these days. The behavior is also related to whether the URL passed to the displayDialogAsync method is in the exact same domain as the add-in itself. When I post my question, I did not pay attention to that.

According to this doc, "The URL passed to the displayDialogAsync method must be in the exact same domain as the add-in itself." Could you tell me what is supposed to happen if they are not in the same domain?

For instance, I have a button in my addin (whose domain is https://localhost:8000 in localhost) to launch third-party authentication. The url passed to displayDialogAsync is https://localhost/akey/auth/..., after some redirection by nginx, it goes to e.g., https://accounts.google.com/.... for authentication, then https://localhost:8000/#/signinSuccess. The whole workflow including opening and auto-closing works well in localhost in Excel Online Chrome even though the domains are different (https://localhost:8000 v.s. https://localhost). Is it supposed to happen?