Why the ZUMO token returned by Easy Euth from Azure App Service is absent in a popup scenario?

Question

When using the Easy Auth authentication feature of Azure App Service, one can start the authentication process by directing the user to https://my-app.azurewebsites.net/.auth/login/{provider}.

The user is then redirected to the provider login page, and then redirected again to the URL specified on the app declared in the provider (usually https://my-app.azurewebsites.net/.auth/login/{provider}/callback). Then the Easy Auth module redirect to the generic page /.auth/login/{provider}/done indicating that the authentication is successful.

This generic page can be replaced by providing the parameter post_login_redirect_uri in the login URL. With this, the last redirection is not done toward the generic page but to the specified URL.

In this final page, Easy Auth normally add the token which it generated, in the URL after the fragment (#). e.g. : https://my-app.azurewebsites.net/login#token={"authenticationToken"%3A"eyJ0eX[...].

If I try this workflow in my browser, directly in the address bar, it works (all redirections are done and in the final page, the token is present after the fragment), but as soon as I integrate it in my app in a popup (so opening https://my-app.azurewebsites.net/.auth/login/{provider}?post_login_redirect_uri=[...] in a new window in Javascript with window.open()), the token is not returned by Easy Auth.

Is this behavior of not returning the token if the login URL is opened in a popup normal ? From the server point of view, I don't see the difference between opening the URL in the address bar or in a popup so I don't explain this behavior.

I tried on Chromium, Firefox and Edge and the result is the same.

This problem seems to be evoked on this post : How to gain access tokens using Azure Easy Auth? but I'm not sure it's the same since I can see a token in the fragment by opening the URL directly in the browser. The solution provided on this post is not applicable in my scenario since my app is on a separate server (different domain) from the API where Easy Auth is enabled (thus I cannot use the AppServiceAuthSession cookie neither).

Answer 1

If I try this workflow in my browser, directly in the address bar, it works (all redirections are done and in the final page, the token is present after the fragment), but as soon as I integrate it in my app in a popup (so opening https://my-app.azurewebsites.net/.auth/login/{provider}?post_login_redirect_uri=[...] in a new window in Javascript with window.open()), the token is not returned by Easy Auth.

According to your description, I did some test, you could follow the details below for this issue.

For window.open(), I used fiddler to capture the network traces as follows:

For directly access the login endpoint via the browser, the network traces look like this:

I compared the requests sent between them and found that request sent via window.open has the Referer header, at this point, the cookie AppServiceSessionMode would not be set in the subsequent requests, and the token would not be presented.

Per my test, when using window.open, you could explicitly specify the mode by using the following url:

https://{app-name}.azurewebsites.net/.auth/login/{provider}?post_login_redirect_uri={custom_login_redirect_uri}&session_mode=token 

Moreover, I would recommend you use the JavaScript client library for Azure Mobile Apps to handle the authentication for you. More details, you could follow here.

Test:

<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.2.0.0.js"></script>

var client = new WindowsAzure.MobileServiceClient('https://{your-app-name}.azurewebsites.net');
client.login("microsoftaccount").done(function (results) {
    alert("You are now logged in as: " + results.userId);
    console.log(results);
}, function (err) {
    alert("Error: " + err);
});

Additionally, you could refer to the settings under this issue.