In this code snippet, we will see how to signup and login with Facebook using PHP. You can easily integrate the Facebook login to your PHP application.
In order to integrate the Facebook login, first, you have to register with the Facebook developers portal to get the Facebook appid.
Once you received the Facebook App Id, then you can use the below code to call the Facebook API to get the user details to log in.
<!DOCTYPE html>
<html>
<title>PHP Facebook Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<!-- Display login status -->
<div id="display-status"></div>
<!-- Login or logout buttons -->
<a href="javascript:void(0);" onclick="login();" id="display-link">Login</a>
<!-- Display user's profile information -->
<div id="userInfo"></div>
<script>
window.fbAsyncInit = function() {
/* Facebook SDK configuration and setup */
FB.init({
appId : '111111111111', /* FacebookB App ID - Register and get APP Id from facebook developer console */
cookie : true, /* Enable cookies to allow the server to access the session */
xfbml : true,
version : 'v3.2'
});
/* Check whether the user is already logged in or not */
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
/* display user information */
getUserInfo();
}
});
};
/* Load the JavaScript 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 = "/* connect.facebook.net/en_US/sdk.js"; */
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/* Facebook login with JavaScript SDK */
function login() {
FB.login(function (response) {
if (response.authResponse) {
/* Retrieve and display the user profile data */
getUserInfo();
} else {
document.getElementById('display-status').innerHTML = 'It seems user cancelled the login process.';
}
}, {scope: 'email'});
}
/* Get the user profile data from facebook */
function getUserInfo(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
document.getElementById('display-link').setAttribute("onclick","logout()");
document.getElementById('display-link').innerHTML = 'Logout';
document.getElementById('display-status').innerHTML = '<p>Welcome, ' + response.first_name + '!</p>';
document.getElementById('userInfo').innerHTML = '<h2>Your Profile Details, </h2><p><img src="'+response.picture.data.url+'"/></p><p><b>FB ID:</b> '+response.id+'</p><p><b>Name:</b> '+response.first_name+' '+response.last_name+'</p><p><b>Email:</b> '+response.email+'</p>';
});
}
/* Logout Logic*/
function logout() {
FB.logout(function() {
document.getElementById('display-link').setAttribute("onclick","login()");
document.getElementById('display-link').innerHTML = 'Login';
document.getElementById('display-status').innerHTML = '<p>Successfully logout from the Facebook.</p>';
document.getElementById('userInfo').innerHTML = '';
});
}
</script>
</body>
</html>
Comments (0)