Search code examples
javascriptangularazure-active-directoryazure-ad-msalword-addins

Angular 2 Active Directory Auth Without Leaving Page

I am creating a Word Web Add-In that will involve signing in with an Azure B2C Active Directory, and then calling an API.

I have created a web add in project and am using angular 2 and msal.js following this example.

The msal.js library offers 2 ways to sign in that I can see, either with a pop up window or by redirecting to the sign in page.

this.clientApplication.loginRedirect();
this.clientApplication.loginPopup();

I have been using a browser to debug the add-in and I can use either sign in option successfully when running in a browser, however the issues arise when trying to actually use the add-in in word.

If I use the redirect option then when I click sign in, the page instead opens in chrome, I can sign in, but then I am in the browser and not in word where I can actually use the add-in (the add in is still running, but not logged in).

If I use the popout option then when trying to log in (in word) I simply get a popup that I need to select an app (and I cant even select anything but store):

popup

Is there a way to sign in that stays in one page?

Solution

  • Found the solution: Using the loginRedirect() method it was only opening in chrome becuase it wasn't an "approved" url.

    I just needed to add https://login.microsoftonline.com to AppDomains in the add in XML manifest:

    enter image description here

    Now the login page opens in the Word Taskpane as intended.