The Facebook login pop-up is not visible, however, it is still delivering on its promise

Question

The Facebook login pop-up is not visible, however, it is still delivering on its promise

I am currently utilizing the Angular Facebook service found at this link. Within my controller, I am attempting to invoke the method $facebook.login() when a button is clicked using ng-click.

Although the promise is returned and the code inside is executed, no login pop-up appears. I have also attempted disabling the Chrome pop-up blocker without success. There are no errors displayed in the console...

Below are snippets of my code:

facebook.html

<div class="container">
    <div class="col-md-4">
        <h3>Please log in</h3>
        <button type="Log In" class="btn btn-default" ng-click="login()">Log In</button>
    </div>

facebook.js

'use strict';

angular.module('ngsocial.facebook', ['ngRoute', 'ngFacebook'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/facebook', {
      templateUrl: 'facebook/facebook.html',
      controller: 'facebookCtrl'
    });
  }])
  .config(function($facebookProvider) {
    $facebookProvider.setAppId('1816664965234931');
    $facebookProvider.setPermissions("email", "public_profile", "user_posts", "publish_actions", "user_photos");
  })
  .run(function($rootScope) {
    (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'));


    (function() {
      console.log("I'm loaded");
    }());
  })


.controller('facebookCtrl', ["$scope" , "$facebook" , function($scope,$facebook) {
  $scope.login = function () {
    $facebook.login().then (console.log("Promise has been returned"));
  }
}]);

javascript angularjs facebook-graph-api

Answer 1

Answer №1

$facebook.login().then (console.log("promise has returned"));

It's important to note that just because you use .then, it doesn't necessarily mean the promise has been returned. In your code, you are passing the return value of an immediately executed console.log as the callback function to .then. In Promises, passing a non-function as a callback essentially does nothing.

somePromise.then(undefined).then(function(data) {
    console.log(data);
});

In cases like this, the fulfilled value of somePromise will still be logged, as if .then(undefined) wasn't included at all. This is because .then actually takes two arguments: onfulfilled and onrejected.

To handle errors more effectively, you should consider using

.then(function(data) { 
    console.log(data); 
})
.catch(function(err) { 
     console.log('error', err); 
});

This way, you can see the actual results of $facebook.login() and address any potential issues with the login popup not appearing. If you want to check what exactly $facebook.login() returns, you can do so by assigning it to a variable and logging it:

var p = $facebook.login();
console.log('p is', p);
p.then(function(data) { 
    console.log('data is', data); 
})
.catch(function(err) { 
     console.log('error', err); 
});

If p is indeed a Promise, you should see

p is Promise { <state>: "pending" }

In Firefox, other browsers may display something different. If you notice that p is a promise but neither .then nor .catch is called, it indicates that the promise returned by the function never fulfills.

Answer 2

$facebook.login().then (console.log("promise has returned"));

It's important to note that just because you use .then, it doesn't necessarily mean the promise has been returned. In your code, you are passing the return value of an immediately executed console.log as the callback function to .then. In Promises, passing a non-function as a callback essentially does nothing.

somePromise.then(undefined).then(function(data) {
    console.log(data);
});

In cases like this, the fulfilled value of somePromise will still be logged, as if .then(undefined) wasn't included at all. This is because .then actually takes two arguments: onfulfilled and onrejected.

To handle errors more effectively, you should consider using

.then(function(data) { 
    console.log(data); 
})
.catch(function(err) { 
     console.log('error', err); 
});

This way, you can see the actual results of $facebook.login() and address any potential issues with the login popup not appearing. If you want to check what exactly $facebook.login() returns, you can do so by assigning it to a variable and logging it:

var p = $facebook.login();
console.log('p is', p);
p.then(function(data) { 
    console.log('data is', data); 
})
.catch(function(err) { 
     console.log('error', err); 
});

If p is indeed a Promise, you should see

p is Promise { <state>: "pending" }

In Firefox, other browsers may display something different. If you notice that p is a promise but neither .then nor .catch is called, it indicates that the promise returned by the function never fulfills.

The Facebook login pop-up is not visible, however, it is still delivering on its promise

Answer №1

Similar questions

Replicate the form to a new one while concealing the elements and then submit it

Enhance the post data in jqGrid by including an extra parameter when inserting a new row through a modal form

Component-driven form validation in Angular 2

Experiencing issues where an undefined value is being returned while attempting to pass a selected value

What could be causing my recursive function to skip over certain parts of my JSON data?

Accessing Row Data from a Material Table using a Button Click, Not through Row Selection

Unable to transfer information to chart.js graph

Is it necessary for Vue-EventBus to have its own dedicated function in order to work effectively?

The duration from when the Ajax request is sent to when the response is received results in

The CSS selector for attribute ending with a specific value is not functioning as anticipated

Step-by-step guide to adding a skew overlay to your video

The module for the class could not be identified during the ng build process when using the --

Creating a factory class in Typescript that incorporates advanced logic

Having difficulty in setting items to a relative position in order to align them properly

Define JSON as writeable: 'Error not caught'

Discord.js: AbortError: The request was cancelled by the user

What is the best way to use res.sendFile() to serve a file from a separate directory in an Express.js web application?

Hovering on the navigation bar items triggers special visual effects

Adding information to a table using React

Errors and warnings caught off guard while running json-server with the --watch flag