CODEWITHSUNDEEP
javascriptfacebookoauthpostmessage
John Michael Law
John Michael Law

Reputation: 153

Facebook Login OAuth Flow without SDK

When I use the connect.facebook.net/en_US/sdk.js and call FB.login() I get a login/auth popup window. When someone logs in, the window closes, and the callback function supplied to FB.login is called with a response object. From that response object I pull out response.authResponse.accessToken and I can use that to verify user information by calling facebook. Great!

Now how do I do that without using the sdk.js?

I can manually open the popup and there is some documentation out in the wild on how to do that.

const appId = 'REDACTED';
const redirectUri = encodeURIComponent('https://example.net/callback');
    
// Construct the Facebook login URL
const loginUrl = `https://www.facebook.com/v19.0/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&scope=public_profile,email`;

// Open the Facebook login window
window.open(loginUrl, 'Facebook Login', 'width=600,height=400');

But now the flow is completely different! It uses a callback address and loads that address in the popup after login instead of closing. I don't want that. Somehow or other the SDK opens the window and sets up messaging between the parent and the popup. How do I recreate that?

The end goal is to :

  1. Not have the js sdk loaded
  2. Have the facebook popup close on login
  3. Have the facebook popup call my own callback method and pass the token

Upvotes: 0

Views: 121

Answers (1)

toninospiderman123
toninospiderman123

Reputation: 1

You have to manage through postMessage API:

So when the user land on /callback page in the opened popup you can do:

window.opener.postMessage(dataParsedFromUrl, "*") // comunicate data to opener
// dataParsedFromUrl is derived from parameters that facebook append to your redirect url
window.close() //close the popup

So in your page you need to add the EventListener to get data in the moment that the popup comunicate the message:

const appId = 'REDACTED';
const redirectUri = encodeURIComponent('https://example.net/callback');
    
// Construct the Facebook login URL
const loginUrl = `https://www.facebook.com/v19.0/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&scope=public_profile,email`;

// Open the Facebook login window
window.open(loginUrl, 'Facebook Login', 'width=600,height=400');

window.addEventListener("message", function(e){
  console.log(e.data) // dataParsedFromUrl
})

Upvotes: 0

Related Questions