Авторизация через соц. сети в концепции SPA?

Question

[vetsmen]

Доброго времени суток. Как правильнее организовать авторизацию через соц. сети, которые требуют у пользователя авторизацию на их сервере, в концепции SPA?
Классический процесс авторизации такой: перенаправляем пользователя на сайт соц. сети, он там авторизуется и возвращается на redirect url.
А как действовать с SPA? Единственный вариант, который приходит в голову, это через pop-up окно, но как правильнее его реализовать? При нажатии на кнопку авторизации открыть pop-up окно с формой авторизации в соц. сети, после этого процесса в том же окне вывести необходимые данные в формате json и далее уже из основного окна их выцепить и произвести перерисовку основного интерфейса?

Comments

[kulaeff]

Можно еще использовать window.postMessage.

Answer 1

[vetsmen]

Кому интересно решение данной задачи: все предельно просто.
Сначала создаем pop-up окно, авторизовываемся в нем и редиректимся на нашу страницу прослойку, там мы имеем уже наш jwt токен (или любой другой) и через window.opener мы можем вызвать любой метод в родительском окне. К примеру: window.opener.setToken('{token}'), перед этим определив функцию в родительском окне:

window.setToken = function(token){ /* записываем наш токен */}

Answer 2

[Златослав Десятников]

Первая часть правильная: открывается окошко (Вы сами, вероятно, много раз видели такое), в нём происходит вход.
После успешного (или нет) входа, сервис (скажем, VK) отправит юзера на вашу страницу (redirect_url). Окошко закрывается.

В JS можно проверять, не закрыто ли окно входа (а оно должно закрыться после входа): вот пример. Отправляете не сервер запрос (действительно вошли?), если да, то перерисовываете интерефейс (отправляете юзера на другой роут).

Comments

[vetsmen]

Факт в том, что мне в этот момент нужно перехватить jwt токен.

[Златослав Десятников]

vetsmen, так у Вас не получится просто так перехватить информацию из соседнего окна (в целях безопасности так сделано)

[vetsmen]

Златослав Десятников, тогда я не понимаю, запрос с какими параметрами мне нужно будет отправить на сервер, чтобы получить наконец-таки свой jwt-token.
Факт в том, что на клиенте никакой информации в момент авторизации через соц. сеть нет, и чем оперировать далее - неизвестно.

[Златослав Десятников]

vetsmen, так сохраните токен в сессии, а запрос без параметров, просто заберите из сессии.

[vetsmen]

Златослав Десятников, никак не хотел привязывать сессию ко всему этому, но да ладно, пусть будет так, но как я узнаю, что пользователю при запросе нужно будет отдать именно этот токен, а не какой-то другой?

[Златослав Десятников]

vetsmen, так у него же только один токен может быть.
Не претендую на правильность подхода, до этого всегда использовал настоящие редиректы даже в случае SPA. Ещё один вариант – websocket, сервер говорит браузеру, что всё, юзер залогинен, такой подход тоже видел пару раз.

[vetsmen]

Златослав Десятников, вы должны идентифицировать клиента как-то, прежде чем рассылать какую-то информацию.
"Может быть только один токен" - при чем тут это? Вот тебе на сервер прилетает запрос от клиента на получение токена, ты не знаешь, прошел ли он авторизацию через соц. сеть или нет, ты не знаешь его идентификатор в этой соц. сети, ты вообще ничего о нем не знаешь. То же самое относится с сокетам, от протокола обмена данными ничего не изменится. Да и сам принцип авторизации через JWT подразумевает авторизацию пользователя без использования сессий вообще.

На счет дочерних pop-up окон и вашего комментария "не получится перехватить контент":

Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если URL нового окна происходит из того же источника (англ. – «Same Origin»), т.е. совпадают домен, протокол и порт.

[Златослав Десятников]

vetsmen, так изначально в окне открывается страница стороннего oauth сервиса (e.g. google) и там совсем не Same Origin.

[Златослав Десятников]

vetsmen, хотя, можно открывать сначала свою страницу с указанием на, например, название сервиса.
Проверка там, вроде бы, происходит на первую страницу в окне и текущую, сам не пользовался перехватом контента из дочерних окон, могу где-то ошибаться, опираюсь только на теоретические данные, полученные из какой-то статьи на хабре (сейчас уже вряд ли найду).

[vetsmen]

Златослав Десятников, впрочем, спасибо за внимание к вопросу, посмотрю еще решения, может что подскажут

[Златослав Десятников]

vetsmen, будет здорово, если отпишите тут, когда найдёте годное решение, стало интересно.

[vetsmen]

Златослав Десятников, выше

[Златослав Десятников]

vetsmen, ааа, вот оно как.