diogocapela/facebook_auth.html

## facebook_auth.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- User is Logged in -->
<div class="logged-out" style="display: none;">
    <fb:login-button
            scope="public_profile,email,user_friends"
            onlogin="auth.checkLoginState();">
    </fb:login-button>
</div>

<!-- User is Logged out -->
<div class="logged-in" style="display: none;">
    <button id="auth_logout_button">Logout</button>
    <br>
    <div id="box"></div>
</div>


<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

    let auth = {
        userData: {},
        checkLoginState: function () {
            FB.getLoginStatus(function (response) {
                if (response.status === 'connected') {
                    // if user is logged in
                    console.log('auth.checkLoginState()');
                    console.log('User logged in. ID: ' + response.authResponse.userID);
                    auth.userData.id = response.authResponse.userID;
                    auth.userData.access_token = response.authResponse.accessToken;
                    auth.getUserData(auth.userData.access_token);
                    auth.setTemplate(true);
                } else {
                    // if user is logged out
                    console.log('auth.checkLoginState()');
                    console.log('No user logged in.');
                    auth.setTemplate(false);
                    //location.href = './login';
                }
            });
        },
        getUserData: function (accessToken) {
            FB.api('/me?fields=id,name,friends,friendlists', {access_token: accessToken}, function (response) {
                if (response && !response.error) {
                    auth.userData.id = response.id;
                    auth.userData.name = response.name;
                    auth.getUserPicture(auth.userData.id);
                    console.log('auth.getUserData()');
                    console.log(response);
                } else {
                    console.log('auth.getUserData()');
                    console.log(response);
                }
            });
        },
        getUserPicture: function (userID) {
            FB.api(
                "/" + userID + "/picture",
                function (response) {
                    if (response && !response.error) {
                        auth.userData.profile_pic = response.data.url;
                        auth.buildUserProfile(auth.userData);
                        console.log('auth.getUserPicture()');
                        console.log(response);
                    } else {
                        console.log('auth.getUserPicture()');
                        console.log(response);
                    }
                }
            );
        },
        buildUserProfile: function (userObj) {
            let html = `
                <h1>${userObj.name}<h1>
                <h3>${userObj.id}</h3>
                <img src="${userObj.profile_pic}">
              `;
            $('#box').html(html);
        },
        setTemplate: function (isLoggedIn) {
            if(isLoggedIn) {
                $('.logged-in').show();
                $('.logged-out').hide();
            } else {
                $('.logged-in').hide();
                $('.logged-out').show();
            }
        },
        logout: function () {
            FB.logout(function (response) {
                console.log('auth.logout()');
                console.log(response);
                auth.setTemplate(false);
                auth.checkLoginState();
                //location.href = './login';
            });
        }
    };

    window.fbAsyncInit = function () {
        FB.init({
            appId: 'your_api_key_here',
            autoLogAppEvents: true,
            xfbml: true,
            version: 'v2.11'
        });
        FB.AppEvents.logPageView();
        auth.checkLoginState();
    };

    (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_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    $('#auth_logout_button').on('click', function () {
        auth.logout();
    });

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>

	<!-- User is Logged in -->
	<div class="logged-out" style="display: none;">
	<fb:login-button
	scope="public_profile,email,user_friends"
	onlogin="auth.checkLoginState();">
	</fb:login-button>
	</div>

	<!-- User is Logged out -->
	<div class="logged-in" style="display: none;">
	<button id="auth_logout_button">Logout</button>
	<br>
	<div id="box"></div>
	</div>


	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

	<script>

	let auth = {
	userData: {},
	checkLoginState: function () {
	FB.getLoginStatus(function (response) {
	if (response.status === 'connected') {
	// if user is logged in
	console.log('auth.checkLoginState()');
	console.log('User logged in. ID: ' + response.authResponse.userID);
	auth.userData.id = response.authResponse.userID;
	auth.userData.access_token = response.authResponse.accessToken;
	auth.getUserData(auth.userData.access_token);
	auth.setTemplate(true);
	} else {
	// if user is logged out
	console.log('auth.checkLoginState()');
	console.log('No user logged in.');
	auth.setTemplate(false);
	//location.href = './login';
	}
	});
	},
	getUserData: function (accessToken) {
	FB.api('/me?fields=id,name,friends,friendlists', {access_token: accessToken}, function (response) {
	if (response && !response.error) {
	auth.userData.id = response.id;
	auth.userData.name = response.name;
	auth.getUserPicture(auth.userData.id);
	console.log('auth.getUserData()');
	console.log(response);
	} else {
	console.log('auth.getUserData()');
	console.log(response);
	}
	});
	},
	getUserPicture: function (userID) {
	FB.api(
	"/" + userID + "/picture",
	function (response) {
	if (response && !response.error) {
	auth.userData.profile_pic = response.data.url;
	auth.buildUserProfile(auth.userData);
	console.log('auth.getUserPicture()');
	console.log(response);
	} else {
	console.log('auth.getUserPicture()');
	console.log(response);
	}
	}
	);
	},
	buildUserProfile: function (userObj) {
	let html = `
	<h1>${userObj.name}<h1>
	<h3>${userObj.id}</h3>
	<img src="${userObj.profile_pic}">
	`;
	$('#box').html(html);
	},
	setTemplate: function (isLoggedIn) {
	if(isLoggedIn) {
	$('.logged-in').show();
	$('.logged-out').hide();
	} else {
	$('.logged-in').hide();
	$('.logged-out').show();
	}
	},
	logout: function () {
	FB.logout(function (response) {
	console.log('auth.logout()');
	console.log(response);
	auth.setTemplate(false);
	auth.checkLoginState();
	//location.href = './login';
	});
	}
	};

	window.fbAsyncInit = function () {
	FB.init({
	appId: 'your_api_key_here',
	autoLogAppEvents: true,
	xfbml: true,
	version: 'v2.11'
	});
	FB.AppEvents.logPageView();
	auth.checkLoginState();
	};

	(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_US/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	$('#auth_logout_button').on('click', function () {
	auth.logout();
	});

	</script>
	</body>
	</html>