I tried using Facebook API for logging users in to my Angular-2 application . I am getting an error in my typescript file . 'Cannot find name FB'.
(<any>window).fbAsyncInit = function() {
FB.init({
appId : '123456789012345',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
Can anybody provide a solution to this? Thanks in advance!!
You need to declare a constant to use facebook SDK with angular.
Declare FB constant right above component declaration.
declare var FB: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: []
})
Then initialise facebook SDK inside your constructor function.
Related
I have a ionic project which starts a user-intro page. I'll go to Main page after click start button.
app.js:
angular.module('app', ['ionic',
'app.intro'
])
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
})
.state('main', {
url: '/main',
templateUrl: 'app/main/index.html'
});
$urlRouterProvider.otherwise('/');
});
IntroCtrl (app/intro/controller.js):
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
But if the user is not logged-in I want to show login page instead.What should I do? Sorry, I'm new to ionic and angular. Thanks
What about the default state's controller simply using $state.go to one state if you are logged in and another if you are not?
Could suggest a way to authorize my web application in Facebook to get access_token with no need for redirect? I found out that this in fact is possible with deprecated Facebook REST API, but I cannot register new application to use it.
Regards,
ToM
You can only accomplish this with the facebook javascript library. With the PHP library, you are stuck with redirecting them to facebook... If they cancel out on facebook, they are now off your site.
With the javascript library, you get a modal window that if they cancel out of, just stay on your page.
Here's a short blurb on how to make the javascript button appear on your page and do a simple login check:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// Initialize Facebook Connect
FB.init({
appId : 'YOUR_FACEBOOK_APP_ID_HERE',
status : false, // Check login status
cookie : true, // Enable cookies to allow the server to access the session
xfbml : true, // Parse XFBML
oauth : true
});
};
// Get Facebook Connect JS and append it to the DOM
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol+'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
function fbLoginCheck(response){
if(response.status != 'unknown'){
//reload or redirect once logged in...
window.location.reload();
}
}
</script>
<a class="fb_button fb_button_medium"
onclick='FB.login(fbLoginCheck,{ scope: "user_about_me,user_location,user_birthday,email,publish_stream"})'>
<span class="fb_button_text">Join with Facebook</span></a>
I want to load facebook api ( javascript SDK) synchronously. I have seen this code on facebook developers.
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
and also on reference to another link
http://www.masteringapi.com/tutorials/facebook-javascript-sdk-best-practices/58/
is is mentioned that "But you need to make sure you don’t define FB in your own JS code or libraries!"...............
I am confused ....!
Please help me....
What you are doing looks fine.
The instruction that you've seen, "But you need to make sure you don’t define FB in your own JS code or libraries!" is simply a warning to not declare a variable named FB in your application, or you will hide the Facebook SDK.
In your code, on the very next line, you could begin making calls with FB.api or any of the other methods.
Does that help?
Add the below code after opening html tag
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'Your APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session
xfbml: true, // parse XFBML
oauth: true
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
This code will load the javascript SDK asynchronously.
I has developed my apps and now I want to integrate them into Facebook. But I realize that it is dificult. I have this init method:
<javascript>
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true,
channelUrl : 'http://xyz.dyndns.org:8080/fbchannel.html',
oauth : true
});
</javascript>
After that, I can call FB.login, and FB.ui to prompt to get permission, it's OK. But if I want to get some information with FB.api() (for example, get the user name, etc.), it doesn't work. How do I call the API?
The problem is: I can call fb.init. fb.login, fb.ui, and fb.getLoginStatus, but I can't call fb.api, not even the simplest method.
In my application setting, I used an application in Facebook, and then I typed my URL (a web application), htt://xyz.dyndns.org:8080/... . Is it OK?
(I am a newcomer in making applications in Facebook.)
What error are you getting? Here is a working FB.api call example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Get Info
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: '**appId**', status: true, cookie: true, xfbml : true });
function getInfo() {
FB.login(function(response) {
if (response.session) {
FB.api('/me', function(response) {
alert('User: ' + response.name);
});
}
});
return false;
}
</script>
</body>
</html>
I am using Facebook's Javascript SDK "FB.ui" to pull up an OAuth dialog. Once you click allow, I need to capture the session object, extract the user id and use it further in my script. For some reason I cannot get this working properly, I keep getting undefined, even though the session does exist.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '***************',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.session) {
//do something
} else {
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
alert(response.session.uid); //returns underfined
});
}
});
</script>
To get the userID:
FB.getLoginStatus(function(response) {
alert(response.authResponse.userID);
});
When you login from login button of facebook then it stores cookies in your system that contains your access token that is also unique. That cookies contains your facebook id also.
Check your response. I bet it says something like "display" must be one of "popup", "iframe" or "hidden". Apparently the oauth dialog cannot be called with the default "page" display. And display: 'iframe' requires that you include an access_token, which is why you're calling the oauth dialog in the first place >:l .
I don't think FB.ui can currently be used to get the oauth dialog, unless you want to use a popup, which most everyone has blocked nowadays.
So I got this to work as I would like. This may not be the best way, but after much digging around and frustration I hope this could help somebody with the same question get on the right track.
JS source:
FB.getLoginStatus(function(response) {
if (!response.session) {
//initiate FB OAuth js popup dialog
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
if (response.session) { //if permission Allowed
var thesession = response.session;
var thesession = eval('(' + thesession + ')'); //decode json
//POSTing to local file get.user_graph.php, to fetch user info
$.ajax({
type: "POST",
url: "get.user_graph.php",
data: "client_id=<?php echo $appId; ?>&client_secret=<?php echo $secret; ?>&sessions="+thesession.session_key+"&type=client_cred&uid="+thesession.uid,
dataType: "text",
success: function(user_graph){
var user_graph1 = eval('('+user_graph+')');
alert(user_graph1.name); //users name
alert(user_graph1.id); //users id
alert(user_graph1.email); //users email
alert(user_graph1.link); //users profile link
}
});
} else {
//if permission Not Allowed
}
});
}
});
get.user_graph.php source:
//exchange our session for an access_token
define('POSTURL', 'https://graph.facebook.com/oauth/exchange_sessions');
define('POSTVARS', 'client_id='.$_POST['client_id'].'&client_secret='.$_POST['client_secret'].'&sessions='.$_POST['sessions'].'&type=client_cred');
$curl_token = curl_init(POSTURL);
curl_setopt($curl_token, CURLOPT_POST,1);
curl_setopt($curl_token, CURLOPT_POSTFIELDS,POSTVARS);
curl_setopt($curl_token, CURLOPT_FOLLOWLOCATION,1);
curl_setopt($curl_token, CURLOPT_HEADER,0);
curl_setopt($curl_token, CURLOPT_RETURNTRANSFER,1);
$token = curl_exec($curl_token);
$token_decoded = json_decode($token,true);
//get the user graph (personal info)
$user_graph = file_get_contents("https://graph.facebook.com/".$_POST['uid']."?access_token=".$token_decoded[0]['access_token']);
echo $user_graph;