Introduction
In this article, I'm going to share how to get user information from Facebook by submitting a token with PHP SDK, which is got by providing user a login page with JaveScript code.
Go to FB develop page, and sign up, and then go to console and add a new application
In the user information, copy App key and App secret
Create a Laravel project
laravel new Facebook
Initiate Git
git init
Install Facebook PHP SDK
- Under the project
composer require facebook/graph-sdk
Create a controller which we could interact with FB later with
php artisan make:controller FBController
Create a function called getFacebookResources
- Copy the SDK example code in its page, and paste it in the function
require_once __DIR__ . '/vendor/autoload.php'; // change path as needed
$fb = new \Facebook\Facebook([
'app_id' => '{app-id}',
'app_secret' => '{app-secret}',
'default_graph_version' => 'v2.10',
//'default_access_token' => '{access-token}', // optional
]);
// Use one of the helper classes to get a Facebook\Authentication\AccessToken entity.
// $helper = $fb->getRedirectLoginHelper();
// $helper = $fb->getJavaScriptHelper();
// $helper = $fb->getCanvasHelper();
// $helper = $fb->getPageTabHelper();
try {
// Get the \Facebook\GraphNodes\GraphUser object for the current user.
// If you provided a 'default_access_token', the '{access-token}' is optional.
$response = $fb->get('/me', '{access-token}');
} catch(\Facebook\Exceptions\FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch(\Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}
$me = $response->getGraphUser();
echo 'Logged in as ' . $me->getName();
Enter App key and App secret
- In the example above, we need to fill in some area with some information got from FB developer account as follows:
$fb = new \Facebook\Facebook([
'app_id' => 'App Key',
'app_secret' => 'App Secret',
'default_graph_version' => 'Current version',
//'default_access_token' => '{access-token}', // optional
]);
Create a user login button
User need to login in and get the token, and then we could use the token for further processing.
In routes/web.php file, create a route for the login page
Route::get('/FBToken', function(){
return view('FBToken');
});Under resources/views folder, create a php file called
FBtoken.blade, and paste the example code of JS as follows:<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : '{api-version}' // The Graph API version to use for the call
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>Same here, we need to fill in
App keyandcurrent versionthere as follows:FB.init({
appId : 'App key',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'version' // The Graph API version to use for the call
});
Familiar yourself with FB Graph API tool
We could we the API we need with FB Graph API tool
Customize endpoint
Because we might specify our endpoint simply by copying and pasting as follows:
So we could move endpoint to
.envas follows:$endpoint = env('FBEndpoint');
try
{
// Get the \Facebook\GraphNodes\GraphUser object for the current user.
// If you provided a 'default_access_token', the '{access-token}' is optional.
$response = $fb->get($endpoint, $token);And then in the
.envFBEndpoint=me?fields=id,name,email
So, in the future, we could simply copy the endpoint from FB, and paste it on
.env
Revise the error return
- In the default setting of PHP SDK, it would return error message according to the situation, which might be good. However, I only need to know true or false, and that’s it. A ineffective token might be caused by several factors as follows:
- It doesn’t exist
- Wrong token
- It expired
- It doesn’t matter which one it is, the only thing we have to do is inform front end of this matter, and ask them to provide make a request to FB again and provide the valid token to us. Therefore, we need to determine what we are going to by a simple true or false feedback from FB PHP SDK, so we revise it as follows:
catch (\Facebook\Exceptions\FacebookResponseException $e) { return false; // echo 'Graph returned an error: ' . $e->getMessage(); // exit; }
Get a public URL
- Use ngrok to get a public URL for the HTML page that we will use to get token from users.
- Login the application => Find login product => shortcut => website => paste the public URL
Comments