Geek Answers Handbook

OAuth workflow integration in the mobile version of the site

We have the following workflow for services such as twitter and facebook:

  • The user clicks the Publish button.
  • We get auth url on the server
  • We send auth url to the client
  • Client opens auth url in standard javascript popup
  • The client authorizes and returns the callback URL
  • In the callback, we interact with the social service.

We have big problems with step 4 on mobile phones.

Standard javascript popups do not work on mobile devices. What alternatives can we use for external URLs?

UPD The workaround is to generate auth links as bindings and place them in the document. This solves the problem, but we want a better UX.

+4
source share
1 answer

I use jQuery mobile popup for these mobile sites and also works great for desktop browsers. I hope you use a callback like this (well, I use something like this)

var jsonp = document.createElement("script"); jsonp.type = "text/javascript"; jsonp.src = "http://foo.com/api/ad?foo_var=4345&callback=displayinfo"; document.getElementsByTagName("body")[0].appendChild(jsonp);

In the callback function, you can use these popups, for example

 function displayinfo(data) { $("#somepopup").html('<div data-role="popup"> '+data+' <div id="ok" data-inline=true data-role=button> <a class="ui-link-inherit" href="">Ok</a> </div> <div id="cancel" data-inline=true data-role=button> <a class="ui-link-inherit" href="">Cancel</a> </div> </div>'); $('#ok').button(); $('#cancel').button(); $("#somepopup").popup(); }

you should have a div with id somepopup in your document, and all this works fine if you implement jquery mobile. Hope this helps.

+4
source

More articles:


All Articles