Implement Facebook API login with reactjs

Implement Facebook API login with reactjs

By : user2956494
Date : November 22 2020, 10:56 AM
it helps some times I have figured out how to modify the Facebook tutorial for the Login API with ReactJS. I hope this helps anyone else struggling with this.
Firstly, in the react component where you want the Login link, include this code:
code :
componentDidMount: function() {
  window.fbAsyncInit = function() {
      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    : 'v2.1' // use version 2.1

    // 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) {

  // 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.
testAPI: function() {
  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 + '!';

// This is called with the results from from FB.getLoginStatus().
statusChangeCallback: function(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.
  } 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.';
  } 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 = 'Please log ' +
    'into Facebook.';

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
checkLoginState: function() {
  FB.getLoginStatus(function(response) {

handleClick: function() {
<a href="#" onClick={this.handleClick}>Login</a>

Share : facebook icon twitter icon
How to implement logout with facebook connect in cakephp while preserving facebook login?

How to implement logout with facebook connect in cakephp while preserving facebook login?

By : Md Shoaib
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I figured this one out just now, after reading CakePHP facebook integration logout issue with CakePHP-Facebook-Plugin.
Basically, although in the demos with webtechnick's examples, he puts the "Facebook.Connect" component in the AppController, if you want the selective logout piece, the Best place to put it is in reality within the actual controllers that you want to use it in. That or leave it in AppController and pass noAuth=> true into the Facebook.Connect component.
code :
class AppController extends Controller {
    var $components = array('Auth', 'Acl', 'Session');
       //or if you want access to "$this->Connect" universally:
       //   array('Auth', 'Facebook.Connect' => 
       //                      array('noauth'=>'true'), 'Acl', 'Session');
class UsersController extends AppController{
var $helpers = array('Facebook.Facebook');
        //an example of the users controller, enabling connect, but
        // not authorizing the user (because logout() used by Auth is here)
    var $components = array('Email', 'Session', 'Facebook.Connect' => array('createUser'=>false, 'noauth'=>true));

        //login() doesnt need to be shown and can be left alone for your traditional users

        function logout(){
              //if there is no fb user, do the logout normal
              if ($this->Connect->FB->getUser() == 0){
                //ditch FB data for safety
                //hope its all gone with this
                //logout and redirect to the screen that you usually do.
function login(){
//just need this stub function for later
$this->autoRender = false;

//you also need this for deauths or they will still be able to get into the site after deauth (against policy or whatever)
    function deauthorize(){
    //get user id from facebook API
    $uid = $this->Connect->FB->getUser();
    $record = $this->User->findByFacebookId($uid);
    $this->User->delete($record['id'], FALSE);  
  window.fbAsyncInit = function() {
      appId      : 'your app id', // App ID
      channelUrl : '//'+window.location.hostname+'/facebook/channel', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML

    // Additional initialization code here
    FB.Event.subscribe('auth.statusChange', function(response){
        if (response.status == "connected"){
            alert('redirecting you to auto facebook login');
                //here is out default place for login
            window.location.href = "http://"+window.location.hostname + "/facebook/login";

  // Load the SDK Asynchronously
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
<?php e($this->Facebook->login(array('registration-url'=>'http://www.yoursite.com/facebook/signup'))); ?>
How to manually implement facebook login and logout using a Button without using the <com.facebook.widget.LoginButton

How to manually implement facebook login and logout using a Button without using the <com.facebook.widget.LoginButton

By : Jo Ang
Date : March 29 2020, 07:55 AM
it fixes the issue Yes there is, refer facebook developers
If you want working example, you can refer this-> FbLogin
java - Implement Facebook login using Android Studio and Facebook SDK

java - Implement Facebook login using Android Studio and Facebook SDK

By : bang
Date : March 29 2020, 07:55 AM
it helps some times I've tried to use the Facebook SDK to create a simple Facebook login inside my application. Everything works fine, but the registerCallback function of LoginButton does not work properly. This is my code: , Have you implemented onActivityResult in your activity
code :
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);
How to implement login and logout with Facebook Login and ReactJS?

How to implement login and logout with Facebook Login and ReactJS?

By : somesh mhatre
Date : March 29 2020, 07:55 AM
wish helps you I'm trying to use Facebook Login for users to log in and out of my web app using React and React-Router. I made a component which redirects a user on successful login, but I am not able to render the log out button on the new view. I am also new to React-Router so I'm not entirely sure if the problem is with my routes. , Then I guess you have problem with router setup.
code :
//Solution suppose you are using creat-react-app
//At index.js of you app put this.
//other import.

//install history package from npm

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

       <Router history ={history}>
//at app.js file
//other required import
import { BrowserRouter, Route } from "react-router-dom";

//import your two component here

class App extends Component {
  render() {
    return (
          <Route exact path="/login" component={Login} />
          <Route exact path="/loggedin" component={Loggedin} />

export default App;
// Inside Login component
// Use componentDidMount life cycle hook to redirect.

  //other logic and at last...
  if(this.state.id !== null){
  const {history} = this.props;
  history.push('/loggedin') //redirection link if user is already logged in.
Unable to implement login with facebook because facebook is giving an error using angular8?

Unable to implement login with facebook because facebook is giving an error using angular8?

By : Bluearms
Date : March 29 2020, 07:55 AM
this one helps. You should add a valid redirect url in Client OAuth Settings.
Related Posts Related Posts :
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • a sensible approach to highcharts x-axis labels
  • IDE autocompletion for javascript AMD loading style
  • Bootstrap menu disappears after first click setting the ul style to none
  • split ajax json response errors in each field
  • how to add javascript in head in cmsms
  • REGEX: Finding the correct occurrence order of some given special characters in a string
  • How do you preserve a JavaScript date's time zone from browser to server, and back?
  • Return binary result from phantomjs webserver
  • must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
  • Replacing a substring of an element's text with another string
  • How do I filter marks greater than or equal to 90 in this array?
  • Modify the text of my radio input button?
  • Clicking on status bar does not scroll to top of app (Trigger.io)
  • Mocha JS: How to highlight specific assertion failure?
  • $.getJSON jquery parsing to HTML
  • Find items of a certain class (a) that are also in other classes (b,c,d)
  • Setting different images for D3 force-directed layout nodes
  • Integrating Dropzone.js with angular
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org