Java Tech Zone

Monday, 21 July 2014

How to Create a Facebook Login for WEB using JavaScript SDK

Hi Guys,
Lets see how to create Facebook login in your website using JavaScript SDK

Step 1:
For implementing Facebook related stuff, first we need to create an Facebook App.
You can refer my previous post for creating an app in Facebook.
http://oraclejavazone.blogspot.com/2014/05/how-to-create-app-in-facebook-with-user.html

Step 2:
Load your JavaScript SDK in your JSP file. You can load SDK either Synchronously or Asynchronously.
I am loading the SDK Asynchronously.
Add the below code after opening <body> tag in your JSP file.

<div id="fb-root"></div>
<script>
var AccessToken;

window.fbAsyncInit = function() {
FB.init({
appId: 'your app id',
xfbml: true, //for parsing social plugins
status: true, //for getting user status
cookie: true, //save cookie
version:'v2.0' //version of graph API
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};

(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'));

//checking login status of user
function statusChangeCallback(response) {

if(response && response.status == 'connected') {
alert('User is authorized');
AccessToken = response.authResponse.accessToken; //Get the user access token from the auth //response
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + response.id);
});
console.log(AccessToken);
} else {
alert('User is not authorized');
}
}

function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response); });
}
</script>

For more details refer https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0

Step 3:
Create the Facebook Login Button using <fb:login-button>.
Add the below code to your JSP file.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" autologoutlink="true">
</fb:login-button>

scope="public_profile,email" used to retrieve the data's that you wish to get from Facebook once user get logged in successfully.
autologoutlink="true" enable log out button once user logged in to your website using Facebook.

While running the code open browser console finding the user id and name of the user.

That's All Folks...

Thursday, 29 May 2014

How to create an app in Facebook with User access token.

Hi Guys,

Lets see how to create an App in Facebook with User access token.

Step 1:
Log in to Facebook as a developer using https://developers.facebook.com.

Step 2:
Click on the app tab and select Create New APP

Enter the display name and Choose the category you wish to Use. Once u complete this click on Create App Button.

Once your App is successfully Created you will get a APP Id and App Secret. Dont Share your App id and App Secret. App id and App Secret should be used when you go for Social Media Integration or Any other App works.

Step 3:

Once you completed this we want to make our app available to public. For this U want to provide E-Mail id in settings.

Select the Settings from left panel and Provide your E-Mail id in Contact E-Mail box. After this Select "Status and Review" from left panel and make the available to public Option as 'Yes'. Now your App is available to public with default permissions.

Step 4:
If you need more permissions go to App Details and Select Configure App Center Permissions
from App Center Listed Platforms and add your Extended permissions you need.

If your app asks for more than than public_profile, email and user_friends it will require review by Facebook before your app can be used by people other than the app's developers.

For more details refer to this https://developers.facebook.com/docs/facebook-login/permissions/v2.0

Step 4:

Adding Platform for your app. Go to Settings and Select Add Platform button. Select the platform you need.

Once you select the platform you want to provide Canvas URL or Website URL. Once you provide all these things your app is now ready with all settings.

Step 5:

Lets see how to create User Access Token for your App. For more information on Access Tokens refer this https://developers.facebook.com/docs/facebook-login/access-tokens/.

From the tools select Graph Explorer, it will take you to Graph API Explorer. Select the Application you want to generate User Access Token. Once you done this Click on Get Access Token, it will ask for the permissions you need select the permissions and click get Access token.

Now you can able to see your User Access Token in Access Token field. If you want to know the App token just click on Get App Token, You can see your App Token in the field.

Once you get the User Access Token click on submit button u can see your User id and name. If you need any additional information U can add extra fields to text field near to get button and You will get the data related to that.

That's All Folks....