使用JavaScript的Outlook加载项O365登录流程

Question

I'm implementing Outlook add-in to my site. I need to implement authenticate Office 365 login functionality.I tried this url to login to office 365 :

https://login.microsoftonline.com/common/oauth2/authorize?api-version=2.0&client_id=XXX&response_type=code&redirect_uri=https://mysiteurl/auth.php&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default

When I hit this URL directly from the browser, I'm getting the response as

Array
(
    [code] => M26235f9c-3bb8-aa61-14ab-5d8110dc3f1a
)

But the issue is when I try to hit this URL from outlook add-in, it returns an error

"Refused to display ' https://login.microsoftonline.com/common/oauth2/authorize?api-version=2.0&client_id=XXX&response_type=code&redirect_uri=https://mysiteurl/auth.php&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default ' in a frame because it set 'X-Frame-Options' to 'deny'. ".

Why this error occurred and how to fix this.

When I hit this URL from browser:

https://login.microsoftonline.com/common/oauth2/authorize?api-version=2.0&client_id=XXX&response_type=code&redirect_uri=https://mysiteurl/auth.php&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default

I'm getting the result:

Array
(
    [code] => M26235f9c-3bb8-aa61-14ab-5d8110dc3f1a
)

Is that what I'm trying is correct or are there some other ideas to login with O365 in outlook add-in? Can anyone suggest any reference tutorial to implement login with O365 in outlook add-in?

Answer 1

As the error suggests , you cannot display this page in an Frame/IFrame/Embed

"Refused to display ' https://login.microsoftonline.com/common/oauth2/authorize?api-version=2.0&client_id=XXX&response_type=code&redirect_uri=https://mysiteurl/auth.php&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default ' in a frame because it set 'X-Frame-Options' to 'deny'. ".

You will have to use dialog to handle you authentication flow.

How to use the Dialog API in your Office Add-ins