Press enter to see results or esc to cancel.

Jinu in facebook, JAVA, Javascript, JSP
  0 Comments

Integrate login with Facebook using JAVA

This tutorial helps you to integrate Facebook login in Java websites with the help of JAVASCRIPT. This is the simplest way I have found to do it.

      1. First register in https://developers.facebook.com/ and get the app ID for your APP.
        1.1 Login first to the Developer site with your facebook ID and Click on Add a New App under My Apps section1.2 Give a Display and Enter your email id in the Pop UP1.3 It will Ask for filling Captcha, Just fill and Submit the Captcha
        1.4 Now it will redirect to a Page and show your APP idNow we registered our APP and received the APP id as 1857976271192448
      2. Now update the App domain details to localhost for that,
        2.1 Go to Settings > Basic Settings
        2.2 Enter App Domains as localhost
        2.3 Click on Add Platform
        2.4 Select the Platform as Website
        2.5 Enter the Site URL as http://localhost:8080/
        2.6 And Click on Save Changes.




      3. The project structure in Eclipse IDE is as Shown,
      4. fblogin.jsp
        Update your APP id here in the Code

        <!DOCTYPE html>
 <head> 
<meta charset="UTF-8">
</head>
<body>
<center>
<h1>Login Page</h1> 
<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 if (response.status === 'not_authorized') {
 // The person is logged into Facebook, but not your app.
 document.getElementById('status').innerHTML = 'Login with Facebook ';
 } else {
 // The person is not logged into Facebook, so we're not sure if
 // they are logged into this app or not.
 document.getElementById('status').innerHTML = 'Login with Facebook ';
 }
 }
 // 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 : 'UPDATE YOUR APP ID HERE',
 cookie : true, // enable cookies to allow the server to access 
 // the session
 xfbml : true, // parse social plugins on this page
 version : 'v2.2' // use version 2.2
 });
 // 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 = "//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?fields=name,email', function(response) {
 console.log('Successful login for: ' + response.name); 
 
 document.getElementById("status").innerHTML = '<p>Welcome '+response.name+'! <a href=fblogincontroller.jsp?user_name='+ response.name.replace(" ", "_") +'&user_email='+ response.email +'>Continue with facebook login</a></p>'
 });
 } 
</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.
-->
<br><br>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div> 
 <script type="text/javascript">
</script>
</center>
</body>
</html>
      5. fblogincontroller.jsp 
        <% String user_name=(String)request.getParameter("user_name");
String user_email=(String)request.getParameter("user_email"); %>

<%=user_name %>
 <%=user_email %>
      6. Now if you run the project in local host, fblogin.jsp will be as shown
        http://localhost:8080/Facebook_login_project/fblogin.jsp
      7. Click on Login Button, It will ask user permission to access the public info of user as shown. It will show your APP name as shown.
      8. Now when the user clicks continue, It will redirect back to fblogin.jsp as shown with the user name,
      9. Now the user can click continue as facebook login and it will redirect to fblogincontroller.jsp where it will receive the email id and password of the user. Here you can further code to register User information.

        10. You can download the facebook login preject here
Download Facebook_login_project.rar files here

        If you have any doubt in this, Please comment below.

    Related posts:

    1. Check an email exist using JAVA- Java email verification and validation
    2. Integrate login with google in Websites with JAVA
    3. Create Facebook Share button for Website Webpages

0 Comments
Written By
Jinu
Tags
Comments

Leave a Comment

Recent Posts

Categories