How 3rd Party Logins work like Facebook, Google, etc?

In order to understand this concept you need to read a little bit about OAuth 2.0 flow. The flow that frontiers use in order to get access token is called Implicit Flow in this scenario in one go you get an access token and you don't need to send your client secret as everything in web is plain and end users can inspect it.

For example for Google authentication, you use the below link with resopnse_type of token NOT code (code is a 2-step authentication flow):

- https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=https://example.com/callback. html&response_type=token&scope=openid+profile+email&prompt=select_account

But there are lot more going on in the background. How a modal is opened? Or when modal get the token how it sends access token to the main window (parent window)? How do you close the opened modal after successful authorization?

These are all critical questions that any frontier programmer needs to know.

One the simplest forms of opening a popup is:

window.popUpObj = window.open(url, '_blank')

We store the popup object in window.popUpObj in order to be able to close it in the future. As we just said in google link above we have a parameter called redirect_uri, here you put a link to where you need to get the parameters from your 3rd party. Here we have set it to:

- https://example.com/callback.html

Inside of that HTML you get the parameters. Google sends data in a hash section of the URL so in callback.html we get the hash like below and then send it to the parent window using window.opener:

<script>
     window.opener.loginCallback(window.location.hash);
 </script>

Here get the hash part using window.location.hash and pass it to parent window function loginCallback. This function is defined in your main js file like below:

window.loginCallback = function(args) {
     console.log('Login callback has been called, token: ', args);
     window.popUpObj.close();
 }

We get the hash part as args and then close the child window using window.popUpObj.close(). This is the object we have recently stored to refer later.

#javascript #google #3rd_party_login #login #facebook #oauth #oauth2 #implicit_flow

Read a little bit more about Implicit Flow here:

- https://developer.okta.com/authentication-guide/implementing-authentication/implicit

#oauth #oauth2 #implicit_flow

Facebook implicit flow example:
- https://dzone.com/articles/oauth2-implicit-grant-flow-example-using-facebook

#oauth #facebook #implicit_flow