OAuth2 authentication js client

Question

I'm developing an outlook addin. It is JS based, which uses OAuth2 to authenticate users. I'm using poupp window to open authorization page like google, azure ... and after success login I close it. To go back into application I'm registering a callback function on parent window of popup which is accessible via window.opener property. Everything is working fine, however I would like to support mobile devices. To run that kind of addin is possible via OWA for Devices app, which could be downloaded via Play Store. Problem is that window.opener property is always null. So I can't call back into application. Is there any other way how to call back into application? How to access the parent window of the popup?

Answer 1

The correct way of solving that problem is through WebSockets. You can make sure that you're posting the credentials to a single client. In your web addin, start a socket

Add-In - Client Javascript should look like:

var socket = io('http://localhost');
var email = Office.context.mailbox.userProfile.email;
socket.on('oauth_providerName_'+email, function(data){
  // Callback when you receive the credential data.
});

// Pop the user to the OAuth frame

Once the user is redirected from the OAuth experience back to your website,

Website - Client Javascript

var socket = io('http://localhost');
var email = Office.context.mailbox.userProfile.email;
socket.emit('oauth_cred_providerName_'+email, {credentials});

Server - depending on your chosen language, you pass the credential data through sockets to the Add-In client.

So ideally you have 3 components here:

1. The add-in Javascript which listens to a credential socket with particular data (can be a cookie guid or a unique value like email address)
2. The webpage which you'll get redirected after the OAuth is complete, which is going to pass the credentials (Access Token / Refresh Token) via the sockets to the server. (You can still host this as a page deployed with your add-in, what's important here is it should have a separate JS file)
3. The server sockets, which will take the credentials and pass it to the add-in client.