Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – req.user data from Passport JS not passed to Angular Controller

I’m building an app with an Express/Node backend and Angular JS for the front end. Kinda new to using this stack and I’m having a hard time receiving the data in an Angular Service + Controller

Backend: Users can authenticate with Facebook using Passport JS that attaches a users object to every request. I opened up an endpoint that checks if req.user exists, like so:

app.get('/checklogin', function(req,res,next){

if(req.user){

  console.log("we found a user!!!");

  console.log("name:" + req.user.displayName);
  console.log("user id" + req.user.id);

  return res.status(201).json(req.user);

} else {

  console.log("there is no user logged in");


} 

});

If the req.user exists, so the user is authenticated, it sends a JSON response.

What I’m trying to do is in Angular is sending a http.get to this /checklogin endpoint and handle the response. I want to bind to the scope if the user is authenticated (req.user exists or not), and if so bind displayName and Id as well, and hide show nav links and pages.

But my setup in Angular hits the API endpoint but doesnt seem to receive any data????:

.service("Login", function($http){

    this.isLoggedIn = function(){  

        return $http.get("/checklogin")

            .then(function(response){

             console.log(response)

                return response;

            }, function(response){

                console.log("failed to check login");

            });

    };


})
.controller("mainController", function($scope, Login){


    Login.isLoggedIn()

        .then(function(doc){

            console.log(doc);
            console.log(doc.data);

        }, function(response){

            alert(response);

        });

})

the console.log(doc) and console.log(doc.data) don’t log anything…… What am I doing wrong here?????

More info: the mainController is loaded in the index.html file:

<html lang="en" ng-app="myApp" ng-controller="mainController">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--load jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!--load Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--load Angular JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> 
    <!--latest compiled and minified Bootstap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--link custom CSS file-->
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="/js/app.js"></script>
</head>

<body>
<!-- NAVBAR ================== ---->        
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="nav-header">
            <a class="navbar-brand" href="#/">Votely</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#/">Home</a></li>
                <li><a href="/auth/facebook" target="_top">Sign in with Facebook</a></li>
                <li><a href="/logout">Sign Out</a></li>
            </ul>
        </div>
    </div>
</nav>    

<!-- Dynamically render templates Angular JS -->
<div class="container" ng-view>

</div>


</body>

Any help much appreciated, thanks!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    thanks, I got it working now. I was using the browser in Cloud 9 IDE and the server was sending a 503 response, not sure why. It works now in Chrome and Firefox etc. after I set the service to return a promise!


  2. 0

    You should return a promise from service if you are using then inside controller i.e.

    .service("Login", function($http){

    this.isLoggedIn = function(){  

        return $http.get("/checklogin");
    };
    Login or Signup to reply.
  3. 0

    .isLoggedIn function in your service should looks like this:

    this.isLoggedIn = function(){
    return $http.get("/checklogin");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search