Authorization via social networks in the SPA concept?

Question

JavaScript

Good day. What is the best way to organize authorization through social networks? networks that require the user to authorize on their server, in the SPA concept?
The classic authorization process is as follows: we redirect the user to the social site. network, he logs in there and returns to the redirect url.
And how to act with SPA? The only option that comes to mind is through a pop-up window, but what is the best way to implement it? When you click on the authorization button, open a pop-up window with an authorization form in the social. network, after this process in the same window display the necessary data in json format and then pull them out of the main window and redraw the main interface?

Answer 1

Who cares about the solution to this problem: everything is extremely simple.
First, we create a pop-up window, log in to it and redirect to our layer page, there we already have our jwt token (or any other) and through window.opener we can call any method in the parent window. For example: window.opener.setToken('{token}'), having previously defined a function in the parent window:

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

Answer 2

The first part is correct: a window opens (you yourself have probably seen this many times), the entrance takes place in it.
After a successful (or not) login, the service (say, VK) will send the user to your page (redirect_url). The window closes.
In JS, you can check if the login window is not closed (and it should be closed after login): here is an example . You send a non-server request (are you really logged in?), if yes, then redraw the interface (send the user to another route).