Authorization in PhoneGap application through Facebook, Vkontakte and Habrahabr

Hi, Habrayuzer. Recently, I wrote an article about my vision of the interface of the mobile phone operating system , but it was of little interest to anyone and I decided to try writing an application that would partially translate the idea into reality, and since I don’t know much about web languages, I decided to write applications on html5 + js + css using PhoneGap. And he began with the authorization and receipt of tokens or cookies from various sources. In a day of unhurried coding, authorization plug-ins for Facebook, Vkontakte and Habr turned out (most of the time was spent on Google and reading API documentation).



It is assumed that you have already installed the Android SDK (for development for this operating system), Eclipse and PhoneGap and know how to start making an application. If not, then you need to start from here .



When writing plugins, you will need a small additional JS script that will parse the links and cookies.

var url_parser={ get_args: function (s) { var tmp=new Array(); s=(s.toString()).split('&'); for (var i in s) { i=s[i].split("="); tmp[(i[0])]=i[1]; } return tmp; }, get_args_cookie: function (s) { var tmp=new Array(); s=(s.toString()).split('; '); for (var i in s) { i=s[i].split("="); tmp[(i[0])]=i[1]; } return tmp; } }; 

I specifically divided the code for links and cookies (what if changed), although the differences in them are currently minimal. get_args accepts a line like param1 = hello & param2 = world, and get_args_cookie accepts what the document.cookie gives, i.e. a string like param1 = hi; param2 = habr. The output is an array of the form key => value.

Vkontakte and Facebook

Vkontakte and Facebook use similar authorization methods, namely the URL of the form (to which the user should be redirected)

oauth.vk.com/authorize?client_id=ID_&scope=_&redirect_uri=http://oauth.vk.com/blank.html&display=touch&response_type=token

www.facebook.com/dialog/oauth?client_id=ID_&scope=_&redirect_uri=http://sovgvd.info/blank.html&response_type=token

VKontakte, unlike Facebook for JS applications, offers its own address, while for facebook it was necessary to create a blank page on a long-abandoned personal blog (although you can probably use it in VKontakte).

Answers after successful authorization are similar and after the anchor (#) look like:

access_token=&expires_in=__

And Vkontakt adds more &user_id=ID_ .

')

To request the pages of these social networks, the InAppBrowser extension is used , which launches the browser from inside your almost browser-based application, in which you can embed JS or CSS into the open page, as well as read the title after the page has finished loading.



Knowing all this it turned out 2 very similar scripts with the same methods:







To authorize in the body of the main JavaScript, run plugin_vk.auth (false); or plugin_fb.auth (false); At the same time, if authorization has already been done, nothing will happen if the list of access rights has changed, authorization did not occur, or forced authorization is running (plugin_vk.auth (true); or plugin_fb.auth (true);), then redirection to the window will occur login one of the social networks.

Habrahabr

Our favorite Habr does not have an API for authorization (as well as for everything else), so we will catch cookies, for this we will need the InAppBrowser extension for implementing JavaScript code — executeScript . You can embed both a piece of code and an entire JS file and get the result of the execution of the last command in the callback function (not to be confused with return). Those. The code for implementing and receiving cookies will look something like this:

  plugin_habr.wwwref.executeScript({ code: "document.cookie;" }, function(arg) { plugin_habr.auth_event_url(arg); }); 

And all the authorization plugin code for Habr is like this:



The authorization call is performed in the same way as previous plugins plugin_habr.auth (false);



I'm not sure that this is useful to someone, but suddenly. Besides, it’s not a fact that I’ll bring my idea to mind, and losing pieces of code would be a pity.