Pop-up authorization VKontakte for OAuth 2.0

At the moment there are 2 possibilities of authorization in the social network "V Kontakte":

• Open API
• OAuth 2.0

The first is obsolete, and the second is fashionable, progressive and standardized.

But, however, going to a new way, I noticed that nowhere in the documentation “Vkontakte” does not say how to make the authorization window a small popup.

On the " Website Authorization " page it says: "To begin the authorization process, you must create a browser window and open an authorization dialog in it." But not a word is said about how to create such a window.
')
Facebook has its own FB.login JavaScript method for this purpose. OpenAPI "In Contact" has VK.Auth.login. And for OAuth 2 "In Contact" there is nothing.

“Well, challenge accepted,” I told myself. And I decided to write my own method.

Here's what I got:

function vk_popup(options)<br>{<br> var <br> screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,<br> screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,<br> outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document .body.clientWidth,<br> outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : ( document .body.clientHeight - 22),<br> width = options.width,<br> height = options.height,<br> left = parseInt(screenX + ((outerWidth - width) / 2), 10),<br> top = parseInt(screenY + ((outerHeight - height) / 2.5), 10),<br> features = (<br> 'width=' + width +<br> ',height=' + height +<br> ',left=' + left +<br> ',top=' + top<br> );<br> return window.open(options.url, 'vk_oauth' , features);<br>}<br><br> function doLogin() {<br> var win;<br> var redirect_uri = 'http://MY_APP/vk_auth/' ;<br> var uri_regex = new RegExp(redirect_uri);<br> var url = 'http://oauth.vkontakte.ru/authorize?client_id=CLIENT_ID&display=popup&redirect_uri=' + redirect_uri;<br> win = vk_popup({<br> width:620,<br> height:370,<br> url:url<br> });<br><br> var watch_timer = setInterval( function () {<br> try {<br> if (uri_regex.test(win.location)) {<br> clearInterval(watch_timer);<br><br> setTimeout( function () {<br> win.close();<br> document .location.reload();<br> }, 500);<br> }<br> } catch (e) {<br><br> }<br> }, 100);<br>} <br><br> * This source code was highlighted with Source Code Highlighter .

First, I create a window with an authorization dialog that looks exactly like the one for OpenAPI.



Then, using a timer, I track the change of the current URL in this window in order to determine when “In Contact” redirects to my URL authorization. And I wait 500 ms for the server to have time to process the request. After that, I reload the main window of my site.

It is necessary to wrap the call to win.location in try {} catch (e) {} because the cross-domain policy does not allow to recognize the URLs of windows of other sites.

I also wanted to do this through some Observer, which would watch the win.location change and notify about the event, but I did not find suitable examples and JavaScript is not my main specialization, so I stopped on the implementation by the timer. I would be grateful if someone tells you how to translate into events.

I hope this post will be useful to people.