Ingetration of Facebook and Google in ColdFusion

If we are working with some sign in functionality, we can use log in using Facebook or Google. We can get all the required info like user name, email address, phone number, address, date of birth, gender etc with out entering manually in the sign in form and it will just auto populate all the above info on the sign in form. Only we need to fetch the data from FB/Google server.

Let's start with the Facebook integration.

We have to include all the API files first.

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src=" //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
<!-- facebook button -->
        <div style="margin:5px 0;"><a  onclick="_login();" id="fbBtn" style="padding:20px;"> Log In Using Facebook</a></div>
       
        <!-- google button -->
        <div style="margin:5px 0;"><a  id="authorize-button" onclick="handleClientLoad();" >Log In Using Google</a></div>
 
Facebook java script Code starts here.

<script type="text/javascript">
    var flag = 0;       
    $("#fbBtn").click(function(){
        flag = 1;
    });   
  // Load the SDK asynchronously
  (function(thisdocument, scriptelement, id) {
    var js, fjs = thisdocument.getElementsByTagName(scriptelement)[0];
    if (thisdocument.getElementById(id)) return;
   
    js = thisdocument.createElement(scriptelement); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js"; //you can use
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
   
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '*****07300******', //Change this APP ID to yours
    cookie     : true,  // enable cookies to allow the server to access
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.1' // use version 2.1
  });

  // These three cases are handled in the callback function.
  FB.getLoginStatus(function(response) {
 // $("#fbBtn").trigger("click");
    statusChangeCallback(response);
  });

  };
   
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
     
    if (response.status === 'connected') {
       
      // Logged into your app and Facebook.
      _i();
    } else if (response.status === 'not_authorized') {
       
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  } 
 
  function _login() {
    FB.login(function(response) {
       // handle the response
       if(response.status==='connected') {
        _i();
       }
     }, {scope: 'public_profile,email'});
 }

 function _i(){
     FB.api('/me', function(response) {
         //console.log(response);           
    });
 }
</script>

Google java script code starts here.

<script type="text/javascript">
var flag=0;
$("#authorize-button").click(function(){
    flag=1;
});
var clientId = '**4876******.apps.googleusercontent.com'; // Change the Client ID to yours.
// To use in your own application, replace this API key with your own.

var apiKey = 'AI**************1L1****************F-g';

// To enter one or more authentication scopes, refer to the documentation for the API.

var scopes = 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email';

// Use a button to handle authentication the first time.

function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
}

function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}

function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
        //authorizeButton.style.visibility = 'hidden';
        makeApiCall();
    } else {
        //authorizeButton.style.visibility = '';
        authorizeButton.onclick = handleAuthClick;
        }
    }
   
function handleAuthClick(event) {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
}

// Load the API and make an API call.  Display the results on the screen.

function makeApiCall() {
    gapi.client.load('plus', 'v1', function() {
        var request = gapi.client.plus.people.get({
        'userId': 'me'
        });
   
        var request = gapi.client.plus.people.get( {'userId' : 'me'} );
        request.execute( function(profile) {
            var email = profile['emails'].filter(function(v) {
                return v.type === 'account'; // Filter out the primary email
            })[0].value;
            var fName = profile.displayName;
        });

        request.execute(function(resp) {
            //console.log(resp);         
        });
    });
}
</script>

<script src="https://apis.google.com/js/client.js"></script>