Login using Facebook Button

@Andres Pena

Register your site with facebook and obtain your appId for use in the iFrame then code something like this:

iFrame HTML code:

<meta charset="utf-8"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<title></title> 

<link rel="stylesheet" href=""> 
<script> 

		// Load the SDK asynchronously 

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = ‘https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2’;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

	// initialize and setup facebook js sdk 

	window.fbAsyncInit = function() { 

	    FB.init({ 

	      appId      : 'XXXXXXXXXXXXXXXX', 

	      xfbml      : true, 

	      version    : 'v3.2' 

	    }); 





	    FB.getLoginStatus(function(response) { 

			//console.log(response); 

	    	if (response.status === 'connected') {					 

				console.log("connected with facebook for status"); 

	    				    		
	    	} else if (response.status === 'not_authorized') { 

	    		console.log("facebook connection not authorized for status"); 

	    	} else { 

	    		console.log("you are not logged into facebook for status"); 

	    	} 

	    }); 

	}; 

	
// login with facebook with extra permissions 


	function login() { 

		FB.login(function(response) { 

		//console.log(response); 

							
		if (response.status === 'connected') {		 

	    			    		
				//get user info and post to page code 


			FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,email'}, function(response) { 

				
				//console.log(response);				 


				let userId = response.id; 

				let fullName = response.name; 

				let firstName = response.first_name; 

				let lastName = response.last_name; 

				let userEmail = response.email; 


				


				window.parent.postMessage({userId: (userId),fullName: (fullName), firstName: (firstName), lastName: (lastName),userEmail: (userEmail)}, "*"); 


				//now we log the user back out of facebook on our site only as we have already posted the user info to the page code 
				
				FB.logout(function(response) { 
				// user is now logged out 
				}); 

			    });							 

	    		}  
				else if (response.status === 'not_authorized') { 

	    		console.log("facebook connection not authorized for login"); 

				
	    		}  
				else { 

	    		console.log("you are not logged into facebook for login"); 

						   } 

		}, {scope: 'email'}); 

	} 


	</script> 

Sign in with Facebook

Javascript code for front end:

import wixUsers from ‘wix-users’;

$w.onReady( function () {

$w(“#facebookAuthHTML”).onMessage((results) => {

let facebookAccoutInfo = results.data;

//console.log(facebookAccoutInfo);

//string values for each item

let fUserId = results.data.userId;
let firstName = results.data.firstName;
let lastName = results.data.lastName;
let fullName = results.data.fullName;
let unformattedUserEmail = results.data.userEmail

console.log(fUserId);
console.log(firstName);
console.log(lastName);
console.log(fullName);
console.log(unformattedUserEmail);

//proceed to register or log in user as appropriate

})
})