redirect and automatically closing authentication dialog and token issue (MAC safari)

[ntranvinh]

Hello,

I am currently doing an outlook add in using office-js-helpers to get token for calling Graph API. I also following some instructions found on issues resolution here to setup redirect url is https://localhost:3000/taskpane.html in app registration in azure portal and also in the code:

authenticator.endpoints.registerMicrosoftAuth('my client id', {redirectUrl: "https://localhost:3000/taskpane.html"});

I also put the check for closing the dialog inside Office.Initialize
I tested in the web application that can login to by outlook.office.com

Here are some issues I found:

1. When using version 1.0.2, the add in ask to open the dialog for authentication as expected, and it redirect to my url setting up above and attached to that url is access_token (what I can use to call Graph API successfully). But then the dialog does not close automatically (I check the script and it console out the message I put there):

if (OfficeHelpers.Authenticator.isAuthDialog()) {
    // Adding code here isn"t guaranteed to run as we need to close the dialog
    console.log("inside")
    console.log(OfficeHelpers.Authenticator.getUrlParams())
    return;
  }

Here is from the console.log

URL: https://localhost:3000/taskpane.html#access_token=eyJ0eXAiOiJKV1QiLCJub25jZSI6IkFRQUJBQUFBQUFEQ29NcGpKWHJ4VHE5Vkc5dGUtN0ZYMkw3UkFLdTVmbnJ0YnFUVDZ0MkRSTmpWeXhXdzBRSzNLX25XRS1XSXNFNlFTY0g1dkZTcVlUcTNXUkZwME5fcl9acWdWOTd5ak1xbnE...
[Log] Object (taskpane.js, line 9636)

access_token: "eyJ0eXAiOiJKV1QiLCJub25jZSI6IkFRQUJBQUFBQUFEQ29NcGpKWHJ4VHE5Vkc5dGUtN0ZYMkw3UkFLdTVmbnJ0YnFUVDZ0MkRSTmpWeXhXdzBRSzNLX25XRS1XSXNFNlFTY0g1dkZT…"

expires_in: "3600"

scope: "openid+profile+email+https://graph.microsoft.com/Files.Read.All+https://graph.microsoft.com/Mail.Read+https://graph.microsoft.com/Mail.ReadW…"

session_state: "a83f5af8-fcb0-4afb-90de-1188b5049254"

state: "2937613407"

token_type: "Bearer"

Object Prototype

When I tried closing this manually, I got error with dialog show out in the console and there is nothing return

authenticator
    .authenticate(OfficeHelpers.DefaultEndpoints.Microsoft)
    .then(function (token) { console.log(JSON.stringify(token)); console.log(OfficeHelpers.Authenticator.getUrlParams())})
    .catch(OfficeHelpers.Utilities.log);

2. When I switch the library version to 1.0.0 and run the flow again, it did return the result for me (it reached "then" statement in the code above), but inside that result, I cannot find any token that can be used (here is what I got from console.log):

[Log] {"clientId":"my client id","baseUrl":"https://login.microsoftonline.com/common/oauth2/v2.0","authorizeUrl":"/authorize","responseType":"token","scope":"https://graph.microsoft.com/user.read","extraQueryParameters":{"response_mode":"fragment"},"nonce":true,"state":true,"redirectUrl":"https://localhost:3000/taskpane.html","provider":"Microsoft"} (taskpane.js, line 9731)

I then set force re-authentication, the behavior happens as described in 1.

Please let me know if the issues I found is duplicated somewhere and feel free to close or let me know if I can help close this.

PS: I am new to develop a web add-in like this. So it would be great if I have your suggestion on this :) : Is this a best practice to have the add in get token then call its backend (writing in node or asp.net api) to validate and call rest API there and return result to the add in OR the add in can do everything itself ? (I have successfully try Office js getCallbackTokenAsync and use the token to call Outlook REST API directly in the add in code, but I wonder in case the mailbox version does not support that getCallbackTokenAsync as ver 1.4, what will I do as a replacement? ). My add in just do some simple jobs like reading email, send email with attachment and moving email to folder in mailBox.

Thank you very much,

Vinh