Azure mobile facebook authentication with iPhone HTML5 in app (full screen) mode -
i have html5 application uses azure mobile services authentication login (straight example code...provided below). works fine in desktop browsers , iphone 5 in safari. app / full screen mode, nothing (doesn't ask permission show popup window in safari , no popup windows shows up) , can wait forever , nothing happens. if invoke second time, gives error saying "error: unexpected failure"...perhaps because 1st attempt still running? help/insight appreciated.
client.login ("facebook").done(function (results) { alert("you logged in as: " + results.userid); }, function (err) { alert("error: " + err); });
edited update more info , 2 potential ideas*
i did more research , found site uses approach overcomes problem , solves 2 other side effects current azure mobile approach authentication. think azure mobile team might looking similar because there hints of other authentication options in code (although difficult read , sure because minimized code obsfucated). might matter of activating these in code...
the "solution":
go http://m.bcwars.com/ , click on facebook login. you'll see works in iphone safari in "app mode" becuase instead of doing popup, stays in current browser window.
this approach solves 2 other problems current azure mobile approach. first, popup gets interpreted browsers potential ad , either blocked automatically (desktop chrome) ... , user doesn't know why it's not working...or gives warning user has approve (iphone safari in "browser mode") hassle. , if user has popup blocker, gets more difficult , more potential user not getting work properly. bcwars.com method doesn't have problem.
second, in iphone safari, when popup window auto closes, original page doesn't focus if there other browser windows open in safari. instead, it's in smaller/slide mode can choose 1 show. if happens, user has go through 1 more sttep...click on browser window activate , give focus..again more of pain , more potential them mess , not correctly , need help. m.bcwars.com doesn't have problem.
azure options:
looking @ azure mobile code looks may have solution. can't read easliy becuase it's minified/obsfucated, seems have 4 options (including iframe, etc.) invoking authentication, , 1 (the "less ideal one" of popup) being used. easy solution set property allow 1 of alternate authentications work. can't read enough figure out. hack code (temporarily until fix put microsoft).
could there perhaps?
you can implement authentication flow facebook doesn't use popup. basic idea use 'web flow' doing login, , once window return login, use access token login user in azure mobile services.
the facebook documentation doing here: https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
some code samples make easier you.
you start this:
(remember replace your_app_id , your_url relevant 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 window facebook page user log in , authorize app. when user done, facebook redirect user your_url given above.
there can handle redirect , mobile services login this:
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); }); } }
in here parse access token url fragment , pass argument login call make azure mobile services.
this code depends on jquery bbq plugin handle url fragment easily.
hope solves problem!
Comments
Post a Comment