Аутентификация через соц. сети в попап окне. Интересует именно js реализация?

Question

[Максим Девда]

Сделал регистрацию и вход на сайте через соц. сети по средствам php. Но доступ к данным пользователя происходит в том же окне что и сам сайт. Видел на других сайтах что это происходит в окне, которое потом закрывается.

В google искал - ничего что то толком не нашел. Может не те поисковые запроси делал.
Вопрос в том как мне самому такое реализовать ? Если можно пример или ссылку на него. Или хотя бы в которую сторону копать.

Answer 1

[Сергей Соколов]

OAuth2

1. По клику открывают popup с соц. сетью, где запрашивается логин и права доступа.
   
2. Соц.сеть после подтверждения пользователя редиректит на URL сайта с неким временным токеном.
   
3. Этот токен, оказавшись на сервере сайта, напрямую обменивается у соц. сети на токен пользователя. Или просто сайт убеждается в валидности токена – значит, пользователь именно тот, за кого себя выдает.
   
4. popup шлет postMessage() в открывшее его основное окно сайта, и то перезагружается или просто обновляет данные. Сразу же после отправки сообщения попап сам себя закрывает. Или его закрывает окно-родитель при получении сообщения.
   

Comments

[Максим Девда]

спасибо за ответ. основной принцип я понял. можно хотя бы примерные куски кода ?
просто сам на все это дело убью целый день. а времени нет (

[Сергей Соколов]

Максим Девда, например, авторизация в VK через authorization code flow. Или Implicit flow, где они передают временный код не GET-параметром, а в хеше адресной строки site.ru/oauth/vk#code=123 поэтому приходится его вытаскивать JavaScript'ом:

$(function() {
			if(window.location.hash) {
				var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
				$.post(
					'<?php echo $tokenUrl; ?>',
					{hash: hash},
					function( data){
						if( data == 'OK') {
							// token saved, notify the app iframe, and close this window
							$('#codemsg').text('Токен сохранён. Это окно можно закрыть.');
							self.opener.tokenSaved();
							window.setTimeout("self.close();",4000);
						} else {
							// post error, token not saved
							$('#codemsg').text('токен НЕ сохранён. ' + data);
							self.opener.tokenFailed();
						}
					}
				);
			} else {
			// No hash found
			}
		});

Здесь безо всяких postMessage(), поскольку на одном домене, просто вызывается глобальный метод родительского окна: self.opener.methodName()