I am trying to create a facebook javascript application - that will take an array of facebook id's -- and display them as a list.
Johnny Cash
Roger Maleon
Mealine Pip
[23432432, 1313232, 43534543]
here is the
latest jsfiddle
http://jsfiddle.net/0ht35rpb/94/
-- I've started to try and make the application but its coming up with the error
""An active access token must be used to query information about the current user.""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var facebookArray = [23432432, 1313232, 43534543]
var app = {
getFriends : function(){
FB.api('/me?fields=id,name', function(response) {
console.log(response)
if(response.data) {
$.each(response.data,function(index,friend) {
alert(friend.name + ' has id:' + friend.id);
});
} else {
alert("Error!");
}
});
}
}
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '803898723110754',
version: 'v2.7' // or v2.1, v2.2, v2.3, ...
});
$('#loginbutton,#feedbutton').removeAttr('disabled');
FB.getLoginStatus();
app.getFriends();
});
});
//app id
//803898723110754
//client token
//a10b3f9479bac9cce58aeecd8a037a04
</script>
</head>
<body>
</body>
</html>
Related
My Problem
I have a login page that gives the user the option to "Login With Google".
When the user successfully logs in, I am storing their username and Google ID in the Session.
My problem is, on pages OTHER than the login page, I need to check to see if they are logged in. I am having problems getting this to work. If they are not logged in, I need to know that - putting in a simple global page variable for now would be suffice.
This code handles the login: ( the renderButton function is called immediately on page load )
var googleID; // global variable to hold ID
var token; // will hold token ( once I get this working )
// Render Google Sign-in button
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
// Sign-in success callback
function onSuccess(googleUser) {
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get({
'userId': 'me'
});
request.execute(function (resp) {
// GET GOOGLE ID
googleId = resp.id;
});
});
}
// Sign-in failure callback
function onFailure(error) {
alert(error);
}
// Sign out the user
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
loggedIn = false;
});
// Change Link
document.querySelector("#loginNav").innerHTML = "Login";
auth2.disconnect();
}
So this all works great on the login page.
But on my other pages, for instance my index page, how to I check to see if they are logged in?
I am trying this code, but getting NOTHING - no error, no success.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Login</title>
</head>
<body>
<div id="loginStatus">Status</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=init" async defer></script>
<script>
var auth2; // Global
var loggedIn;
function init() {
var appStart = function () {
gapi.load('auth2', initSigninV2);
};
}
/**
* Initializes Signin v2 and sets up listeners.
*/
var initSigninV2 = function () {
auth2 = gapi.auth2.init({
client_id: 'MY-CLIENT--ID-HERE',
scope: 'profile'
});
if (auth2.isSignedIn.get() == true) {
alert("Loggin in!");
loggedIn = "LOGGED IN";
} else {
alert("Not Logged IN!!!");
loggedIn = "NOT LOGGED IN";
}
document.getElementById("loginStatus").innerHTML = loggedIn;
}
</script>
</body>
</html>
Can anyone help me get this working?
Thank you.
I found a solution that worked for me.
Once logged in the first time, I simply saved the user credentials in a local storage variable.
Then on subsequent pages, I check that variable.
It's not fool-proof, but for my basic needs it works.
I m trying to connect Podio API with a webpage.
I have this error : "podio.hasAuthError is not a function", but i don t know what to do....
I show you my (basic) code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="lib/podio-js/dist/podio-js.js"></script>
<script type="text/javascript">
var podio = new PodioJS({ authType: 'client', clientId: 'foo'});
var redirectURL = 'http://foo';
// isAuthenticated either gets the cached accessToken
// or will check whether it is present in the hash fragment
podio.isAuthenticated().then(function(){
// ready to make API calls...
}).catch(function(){
if (podio.hasAuthError()) {
console.log(podio.getAuthError());
} else {
// start authentication via link or redirect
console.log(platform.getAuthorizationURL(redirectURL));
}
});
</script>
</head>
<body>
</body>
</html>
I was used 2.0 version of Contacts API with Gdata library to import customer gmail information. This version not supported anymore and I try to move to V3 but I see the Gdata not supported with v3 and I spend dayes try to modify current code to work with "Contacts API version 3.0" for javascript.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gmail Login</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body style="margin:0;padding:0;">
<img src="/images/templates.png" style="display:none;"/>
<script type="text/javascript">
google.load("gdata", "2.s");
google.setOnLoadCallback(function (){
if(window.location.hash=="") {
if(!checkLogin()){
logMeIn();
} else {
var feedUrl = "https://www.google.com/m8/feeds/contacts/default/full";
query = new google.gdata.contacts.ContactQuery(feedUrl);
query.setMaxResults(5000);
myService = new google.gdata.contacts.ContactsService('exampleCo-exampleApp-1.0');
myService.getContactFeed(query, function(result) {
document.cookie="g314-scope-0=";
window.opener.parseGmailContacts(result.feed.entry);
close();
}, function(e){
alert(e.cause ? e.cause.statusText : e.message);
});
}
}
});
function logMeIn() {
scope = "https://www.google.com/m8/feeds";
var token = google.accounts.user.login(scope);
}
function logMeOut() {
google.accounts.user.logout();
}
function checkLogin(){
scope = "https://www.google.com/m8/feeds/";
var token = google.accounts.user.checkLogin(scope);
return token;
}
</script>
</body>
</html>
Google Contacts API version 3.0 supported javascript client or gdata library?
var authParams = gapi.auth.getToken() // from Google oAuth
authParams.alt = 'json';
$.ajax({
url: 'https://www.google.com/m8/feeds/contacts/default/full',
dataType: 'jsonp',
data: authParams,
success: function(data) { console.log(data); }
});
Basically just plug this in to the authSample.html provided in the google api javascript library -- https://code.google.com/p/google-api-javascript-client/
I am grabbing the facebook pages a user admins and displaying them in a select box through the Facebook JS SDK.
What's the best way to take the array I get back from facebook response.data and iterate so it goes into the select?
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'119406238144386', cookie:true,
status:true, xfbml:true
});
FB.api('/me/accounts/', function(response) {
alert(response.data);
});
</script>
<select id="pages"></select>
<fb:login-button perms="manage_pages">Connect to Facebook</fb:login-button>
Facebook returns the object in an object array, so just loop through each one and add a new html object item to the select list.
A full working example without jQuery:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Get Pages
<select id="pages" style="display:none;"></select>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function getPages() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me/accounts/', function(response) {
var pages = document.getElementById('pages');
pages.style.display = 'block';
for(var i =0; i < response.data.length; i++)
{
pages[i] = new Option(response.data[i].name);
}
}
);
}
} , {perms:'manage_pages'});
}
</script>
</body>
</html>
FB.api('/me/accounts/', function(response) {
for i in response.data {
var option = $('<option></option>')
.attr("val",response.data[i])
.html(reponse.data[i]);
$('#pages').append(option);
}
});
i'm just assuming response.data is giving back an array.
I am trying to add events information to the facebook users profile from a 3rd party website using Javascript SDK provided by facebook. I just googled for few tutorials and I got this links
http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/
http://www.masteringapi.com/tutorials/how-to-ask-for-extended-permission-in-your-facebook-application/32/
http://www.masteringapi.com/tutorials/how-to-create-facebook-events-using-graph-api/49/#using_the_js-sdk
I tried with the combination of login logout and session handling
this is the code which I am run just to test whether it works or not.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.init({
appId: '207712505927107',
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response)
{
if (response.session)
{
// logged in and connected user, someone you know
login();
}
});
};
(function()
{
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login()
{
FB.api('/me', function(response)
{
document.getElementById('login').style.display = "block";
var loggedInMessage = response.name + " successfully logged in!";
document.getElementById('login').innerHTML = loggedInMessage;
});
}
function logout()
{
document.getElementById('login').style.display = "none";
}
//addevent to facebook profile
function addevents()
{
FB.api('/me/events', 'post', {
name: "JS-SDK Event",
start_time: 1272718027,
location: "Beirut",
privacy_type: "OPEN"
}, function(resp) {
alert(resp.id);
});
}
</script>
<p>
<fb:login-button
autologoutlink="true"
perms="email,user_birthday,status_update,publish_stream,create_event">
</fb:login-button>
</p>
<p>
Add Events
</p>
<br />
<br />
<br />
<br />
<div id="login" style ="display:none"></div>
<div id="name"></div>
</body>
</html>
When I click on the add event page I am getting "undefined". Iam not able to add events to facebook profle. Kindly help me
I would try your code again, and maybe console.log(resp) in your callback method for the addevents function. I tested your code on fbrell.com and it seemed to work perfectly and as expected.
edit: after a little research (and your fixed code..) I found that the fb:login button doesn't ensure that your application has the correct permissions that the perms parameter requests. We find this out when we do a Graph request and it fails. So we catch the error, and then launch the Login modal via the FB.login method, and ask for the create_event permission. When the user accepts that dialog, we retry creating the event.
<fb:login-button
autologoutlink="true"
perms="email,user_birthday,status_update,publish_stream,create_event">
</fb:login-button>
create
<script>
FB.XFBML.parse();
document.getElementById('create_event').onclick = function() { create_event(); }
function create_event()
{
FB.api('/me/events', 'post', {
name: "JS-SDK Event",
start_time: 1272718027,
location: "Anywhere USA",
privacy_type: "OPEN"
}, function(resp) {
if (typeof resp.error != 'undefined')
{ /*this failed. most likely because we don't have the extended permission
for create_event. so lets check for it, ask for it, and try to create
the event again. but first, we'll make sure that the error message says
something about 'create_event' so we don't launch an infinite loop
*/
if (resp.error.message.match(/create_event/))
{
FB.login(function(response)
{
if (response.session
&& response.status == 'connected'
&& response.perms.match(/create_event/))
{
//this user is connected & we have create event permission.
create_event();
}
},
{
perms: 'create_event'
});
}
}
});
}
</script>
Working code on fbrell.com: http://fbrell.com/saved/17c7b60eab91e6736a2a10c87d53c5b8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '207712505927107', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login(){
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";
});
}
function logout(){
document.getElementById('login').style.display = "none";
}
//add events
function addevents() {
FB.api('/me/events','post',{
name:"awesome event",
start_time:1272718027,
location:"Bengaluru",
privacy_type:"OPEN",
description:"U r invited !!!"
}, function(resp) {
document.write(resp.id);
});
}
//checking persmission
function check_perm() {
FB.api({ method: 'users.hasAppPermission', ext_perm: 'create_event' }, function(resp)
{
if (resp === "1") {
alert('Permission granted');
} else {
alert("Permission not granted");
}
});
}
</script>
<p>Please click on Login button first </p>
<p><fb:login-button autologoutlink="true" perms="create_event"></fb:login-button></p>
<p> Please click on check permissions first </p>
check permissions
<p> now u r all set to add events to facebook </p>
<p>
Add Events
</p>
<br /><br /><br />
<div id="login" style ="display:none"></div>
<div id="name"></div>
</body>
</html>