Authenticating using OfficeDev/office-js-helpers rather than adal

Question

I'm working on an Office Add-in that currently uses adal to obtain an auth token.

As I want to use the Fabric front end I am changing it to React and I notice that the officer-js-helpers have implemented authenticators that seem to do the same job as the adal library. Am I correct in this assumption? If so, how do I duplicate this adal config using the office-js-helpers authentication functions:

var adalConfig = {
    instance: 'https://login.microsoftonline.com/',
    tenant: 'myprivatesite.onmicrosoft.com',
    clientId: 'xxx-xxx-xxx-xxx-xxx',
    endpoints: {
      'https://my.private.url.endpoint/path': 'https://myprivatesite.onmicrosoft.com/path.to.something',
    }

And this token request:

var authContext = new AuthenticationContext(adalConfig);
 authContext.acquireToken('https://myprivatesite.onmicrosoft.com/path.to.something', function (error, token) {
        console.log(token)
      });

UPDATE: I have got the adal.js library working in my react app. I have used some of the code from the init function in the adalAuthenticationService angular provider to retrieve the authentication token.

So the question remains. Can I use the office-js-helpers to do the same thing?

Willmert

Answer 1

OK It appears it is extremely easy. All that is required from the adal configuration is the client Id and the tenant.

if (OfficeHelpers.Authenticator.isAuthDialog()) {
  return;
}

var authenticator = new OfficeHelpers.Authenticator();

authenticator.endpoints.registerAzureADAuth('xxx-xxx-xxx-xxx-xxx', //clientId
'myprivatesite.onmicrosoft.com' // tenant
);

authenticator.authenticate(OfficeHelpers.DefaultEndpoints.AzureAD)
  .then(function (token) {
    console.log(token);
  .catch(function(error) {
    console.log(error);
  });

Willmert

The question is misleading, you were looking for a working code for Office-js-helpers work. It is not a comparison of adal.js and office.js helpers. Actually this question has nothing to do with adal.js. – Projectionist

Answer 2

Adal.js cannot be used out of the box for web add-ins authentication because within the sandboxed iFrame context of a web add-ins you cannot navigate simply to the authentication login page hosted outside your domain.

Office-js-helpers uses the dialogAPI when available and a popup as a fallback solution when not available.

If I remember correctly Office-js-helpers targets only Azure AD v2.0 (which comes with a lot of nice new features comparing to Azure AD). I guess it is a good choice.

I created an Open source sample the documentation can be interesting to you. However, this is not exactly what you want it is based on an AuthorizationCode flow while you are looking for Implicit flow.

Projectionist

I'm not concerned about that aspect - I have an add-in that currently works and uses the existing office authentication to authenticate the add-in. In effect, if you have already authenticated with outlook.office.com (in my case), then the add-in will launch correctly. I'd like to know if the office-js-helpers are appropriate in this context and if indeed it is possible to use them in the way I have. – Willmert

I do not understand your comment. You said that you are already authenticated within Outlook but where do you get the bearer for requesting AzureAD APIs? There must be a second authentication flow to retrieve the bearer token (which was performed by adal.js). Office-js-helpers will help you implementing the OAUTH flow in an addin context without hitting the iFrame/popup problem. You will have to reimplement things that were handled by adal.js like refresh_tokens etc. – Projectionist

Even if you did not have the iFrame/popup crisis yet when implementing your flow it is because you probably set login.windows.net as a trusted appdomain in your manifest which allowed the redirection in the addin. However, in some cases the login page is a company page and you cannot know its domain by advance and set it in your manifest. See this blog post. Now with the dialogAPI (used by Office-js-helpers) the popup can be avoided in most cases. – Projectionist

I think you are right about having a trusted domain in the manifest, however I don't have any visibility of that (I'm only doing the front-end). The existing add-in uses the adal-angular.js which has a provider with an init function that retrieves user credentials and returns them to the add-in, then the token can be retrieved. I am looking for the documentation that shows me how to use office-js-helpers to achieve the same ends. This blog.mastykarz.nl/building-office-365-web-applications-react shows how to get adal.js working, but I'd prefer to use the office-js-helpers. – Willmert

I had problems with adal.js and office-js runtime github.com/AzureAD/azure-activedirectory-library-for-js/issues/… but the ADAL guys just add a support for popup based. But you would prefer relying when possible on the dialogAPI (release mid 2016). No perfect solution here... – Projectionist

OK thanks for your time - I'm going to hack out the contents of the adal-angular.js into some useable code. – Willmert

You are welcome, consider upvoting or accepting answer if it helped you. Happy coding. – Projectionist