I want to use Facebook Login on my project. When the Facebook button is clicked I call checkLoginState function bu I get an error. I put angular js script file and I used ng-app. How can I solve this problem?
The error code is
Uncaught ReferenceError: $scope is not defined
HTML Code
<div class="text-center">{{userName}}</div>
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="$scope.checkLoginState();">Sign İn</fb:login-button>
Script Code
window.fbAsyncInit = function() {
FB.init({
appId : '391188****',
cookie : true, // enable cookies to allow the server to access
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.5
});
FB.getLoginStatus(function(response) {
$scope.statusChangeCallback(response);
});
};
var app = angular.module('myapp', []);
app.controller('ctrl', ['$scope','$http',function($scope,$http){
(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_EN/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$scope.checkLoginState=function() {
FB.getLoginStatus(function(response) {
$scope.statusChangeCallback(response);
});
}
$scope.statusChangeCallback=function(response) {
if(accessToken){
var accessToken=response.authResponse.accessToken;
}
if (response.status === 'connected') {
$scope.send(accessToken);
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = '';
} else{
document.getElementById('status').innerHTML = '';
}
}
$scope.send = function(accessToken){
$http({
method : 'POST',
url : 'https://example.com',
data:{
'smType':type,
'smID':accessToken
},
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
if (data.errors) {
console.log("An error occurred");
} else {
$scope.userName=data.name;
}
});
};
}]);
First of all, if you want to call checkLoginState from your html, it has to be inside your controller and attached to $scope:
$scope.checkLoginState=function(){...}
Second of all, you can't use $scope in statusChangeCallback without passing it in. So either put statusChangeCallback inside your controller or pass in $scope as an argument.
Third of all, make sure you are injected $scope into your controller.
app.controller('ctrl',['$scope','$http',function($scope,$http){...}])
Related
I'm trying to initialize Facebook's graph API in my angularjs app but having issues getting it started.
The angularjs framework page on Facebook developers site is very short and quite uninformative to an angularjs beginner like me, what I've got so far I've pieced together through the javascript SDK quick start and various posts found on here.
The end goal is to GET posts from several of my public pages and display them as a feed on my webpage.
I will display the feed info in individual cards that when clicked will take the user to that post on Facebook. So no actual changes will be made by the user on my webpage.
Most information I've read regarding this has started with having the user login by clicking a button, but is that necessary for my needs?
I tested it locally and I received the error regarding it having to be HTTPS, so I've now put it on a server with HTTPS, but I'm not getting any responses now.
A few more questions:
Is a user required to log in just to view public Facebook posts? Is the app ID enough or do I need to include my token somewhere?
controller.js
angular.module('myApp')
.controller('FacebookFeedCtrl', FacebookFeedCtrl)
function FacebookFeedCtrl($scope) {
window.fbAsyncInit = function() {
FB.init({
appId : '111111111111111',
xfbml : true,
version : 'v9.0'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
console.log(response);
});
FB.api('/me','GET',{"fields":"id,name"},function(response) {
console.log(response);
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$scope.getMyLastName = function() {
facebookService.getMyLastName()
.then(function(response) {
$scope.last_name = response.last_name;
console.log("this works")
}
);
};
}
service.js
angular.module('myApp')
.factory('facebookService', function($q) {
return {
getMyLastName: function() {
var deferred = $q.defer();
FB.api('/me', {
fields: 'last_name'
}, function(response) {
if (!response || response.error) {
deferred.reject('Error occured');
} else {
deferred.resolve(response);
}
});
return deferred.promise;
}
}
});
html
<div ng-controller="FacebookFeedCtrl">
<h1>testing: {{last_name}}</h1>
</div>
I'm using facebook javascript SDK, and I have issues in getting the name and email.
When I console log my response it only consists of accessToken, expiresIn, signedRequest, userID. I tried switching to different versions but no luck.
Below is what I tried -
$( document ).ready(function() {
(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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=myapp_id&autoLogAppEvents=1'; //used my app id
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : 'App_idd', //used my app id
cookie : true,
xfbml : true,
version : 'v2.11' //also tried v2.4
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function (response) {
console.log(response);
if (response.status === 'connected') {
//get needed fields
} else if (response.status === 'not_authorized') {
} else {
}
});
};
});
Use following function for email and get other fields from here,
FB.api('/me', {fields: 'email'}, function(response) {
console.log(response);
});
/me refers to current user.
I have my sdk set up and the button fires the checkLoginState function but the FB.login doesn't get called. I'm using the latest version (v2.9). I've also tried using 2.8.
I'm guessing it's something to do with it being async but I can't figure out what to do next.
The code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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'));
</script>
<fb:login-button onlogin="checkLoginState();" show-faces="false" scope="email,public_profile" width="400"></fb:login-button>
<script type='text/javascript'>
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status !== 'connected'){
Facebook_login();
}
else{
console.log(response);
}
}
function Facebook_login() {
FB.login(function (response) { <--- debugger comes here
if (response.status === 'connected') { <----- but not here :-(
//do stuff
}
});
}
The login button performs the login on its own, you do not have to call FB.login yourself when you use that button.
FB.login is for when you want to use your own link/button to trigger login.
And the way you are calling it, inside the callback function of asynchronous methods, it will most likely get blocked by the browser’s popup blocker. If you use FB.login, then you should only ever call it on directly user interaction (i.e., a click on a link/button), and not nest it into any async callbacks.
<span><a onclick="fbLogin()" id="fbLink" class="btn faceebook btn-circle muliregular text-capitalize"><i class="fa fa-facebook"></i> Facebook </a></span>
var global_fb = false;
window.fbAsyncInit = function() {
// FB JavaScript SDK configuration and setup
FB.init({
appId : 'xxxxxxxx', // FB App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript 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'));
// Facebook login with JavaScript SDK
function fbLogin() {
global_fb = true;
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
$.post('loginwithfacebook',{userData:response},function(data){
if(data.id != ""){
if(global_fb == true){
// do something
}
}
});
});
}
I'm trying to get the user's email after they press Continue with Facebook on my site. I've looked on Stackoverflow and through the Facebook Developer documentation and cannot see a reason why what I am trying isn't working.
JAVASCRIPT
window.fbAsyncInit = function() {
FB.init({
appId : '1882306058687148',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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 checkLoginState() {
FB.getLoginStatus(function(response) {
console.log(response);
statusChangeCallback(response)
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
runAPI();
}
}
function runAPI() {
FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
console.log(response);
document.getElementById('name').value = response.name;
document.getElementById('email').value = response.email;
document.getElementById('fb-login').style.display = 'none'
});
}
** HTML **
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
What's confusing me the most though is that this IS pulling the name through and that is definitely working.
You will only get an email address back if the user has a verified one set in their profile.
And even then, there are apparently some edge cases where privacy settings can still make it not return one at all. Of course, they might not have one set at all, if they registered using only their mobile. If your app needs and email address, then you should implement an additional step for users to input one manually. (Verification is your responsibility as well in that case.)
I want to add facebook login to my website. I async load it, and when I check that the person is not logged into my website through facebook I call a function to register them, but I get an error saying my function does not exist... facebook is in an html file, and the method I'm calling (FaceRegister()) is in a javascript file with the same name. I presume this is because of the loading order? Any ideas how to solve this?
Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '217518691989396',
xfbml : true,
version : 'v2.8'
}) ;
FB.AppEvents.logPageView();
$(document).trigger('fbload');
};
(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'));
$(document).on(
'fbload',
function(){
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
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 {
// The person is not logged into your app or we are unable to tell.
faceRegister();
}
}