Azure-based authentication authentication with iPhone HTML5 in application mode (full-screen mode)

Question

I have an HTML5 application that uses Azure Mobile Services Authentication to login (directly from the sample code ... below). It works great in all desktop browsers and iPhone 5 in Safari. But from the application / full-screen mode, it does nothing (does not request permission to display a pop-up window, as in safari, and pop-up windows do not appear), and I can always wait, and nothing happens. If I call it a second time, you will get the error message "Error: unexpected failure" ... maybe because the first attempt is still working? Any help / understanding is clear.

client.login ("facebook").done(function (results) { alert("You are now logged in as: " + results.userId); }, function (err) { alert("Error: " + err); }); 

edited update with additional information and 2 potential ideas *

I did some more research and found a site that uses an approach that overcomes this problem, and also solves two other side effects when using the Azure mobile authentication approach. I think the Azure mobile team might look for something like this because the code has some hints of other authentication options (although it’s hard to read and be sure because the code minimized is hidden). It may just be a matter of activating them in code ...

"Decision":

Go to http://m.bcwars.com/ and click on Facebook. You will see that it works great in iPhone Safari in “application mode” instead of making a popup, it just stays in the current browser window.

This approach solves two other problems with the current Azure mobile approach. Firstly, the pop-up window is interpreted by most browsers as a potential ad and either blocks automatically (desktop Chrome) ... and the user does not know why it is not working ... or gives a warning that the user must approve (iPhone Safari in "browser mode" "), which is the problem. And if the user has a pop-up blocker, it becomes more difficult and even more opportunities for the user to not work correctly. The bcwars.com method does not have this problem.

Secondly, on iPhone Safari, when the pop-up window closes automatically, the original page does not receive focus if other browser windows are open in Safari. Instead, it is in smaller / slide mode so that they can choose which one to show. If this happens, the user must go through another sttep ... click on the browser window to activate it and give it focus .. more pain and more potential for them to spoil, and not do it right and you need Help. M.bcwars.com does not have this problem.

Azure Options:

Looking at the Azure mobile code, there seems to be a solution already. I cannot read this easliy because it is minimized / fabricated, but it has 4 options (including iFrame, etc.) to invoke authentication, and only 1 is used (a “less perfect” pop-up). An easy solution would be to set a property that allows you to work with one of the alternative authentications. But I cannot read it well enough to understand it. Another would be to crack the code (temporarily until the fix is ​​installed by Microsoft).

Can I help a little?

Answer 1

You can implement an authentication flow from Facebook that does not use a popup. The basic idea is to use "Web Flow" to log in, and as soon as the window returns from log in, use the access token to log in to Azure Mobile Services.

The Facebook documentation for this is here: https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2

Some sample code to make your job easier.

You will start with something like this:

(Remember to replace YOUR_APP_ID and YOUR_URL with something relevant to your site.

 function logIn() { window.location.replace('https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2FYOUR_URL&response_type=token') } 

This redirects the window to the Facebook page to log in and authorize your application. When the user is completed, Facebook will redirect the user back to YOUR_URL above.

There you can handle the forwarding and log in to the mobile services using the following:

 function handleLoginResponse() { var frag = $.deparam.fragment(); if (frag.hasOwnProperty("access_token")) { client.login("facebook", { access_token: frag.access_token }).then(function () { // you're logged in }, function (error) { alert(error); }); } } 

Here, you parse the access token that you get as a fragment of the URL, and pass it as an argument to the login that you do in Azure Mobile Services.

This code is dependent on jQery BBQ to easily handle the URL fragment.

Hope this solves your problem!