I want to add last 4 news to my website, fetching them from facebook API. There is no facebook login on website or anything like that. I've created FB APP and used FB.api() function to fetch news, but APIs need access_token, which should not be seen publicly, but news fetching is on frontend (js). Is there a way to obtain some other access_token only for reading public news which can be public?
My code (which is working, just not safe)
window.fbAsyncInit = function() {
FB.init({
appId : 'my_app_id',
xfbml : true,
version : 'v2.8'
});
FB.api(
"https://graph.facebook.com/my_fb_page/feed?fields=full_picture,message,story,created_time&access_token=my_access_token",
function (response) {
if (response && !response.error) {
var news = response.data.splice(0,4);
console.log(news);
}
}
);
};
The proper way to do this is to use the Access Token server-side. Never use Tokens on the client, the App Access Token includes the App Secret - which is called "Secret" for a reason.
More information about Tokens:
https://developers.facebook.com/docs/facebook-login/access-tokens/
http://www.devils-heaven.com/facebook-access-tokens/
Related
For context I am trying to build a small microsite to pull social media insights from Facebook. I am looking to build a Django backend and React front end.
I would like to implement FB login with the Javascript SDK since according to the docs this refreshes the access token each time a FB call is made using the SDK.
I have a very simple login script taken from FB official docs which literally just logs in the user and then outputs the list of accounts the user has access to.
The issue is that, despite refreshing the page (and therefore performing an API request) the data expiration date doesn’t extend (it still displays the date of first login).
Is anyone familiar with the Javascript SDK and whether this is normal behaviour?
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log(response);
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
FB.getAuthResponse(function(response){
console.log(response.authResponse.accessToken);
});
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID_GOES_HERE',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v13.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me/accounts',
function(response) {
console.log(response)
});
}
function logout_js_user(){
FB.logout(function(response) {
// Person is now logged out
});
};
FB.getLoginStatus does refresh the Token, but not on every Page call. It only refreshes the Token when it is not valid anymore. That is why the expiration data does not change.
You can can a more accurate status with the second parameter of the function set to true, but be aware that this might affect performance:
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
If you call FB.getLoginStatus on every page load, be careful not to
set this parameter for each as it will significantly increase the
number of requests to Facebook's servers, and thus decrease the
performance of your application.
Side note: ou can use FB.login to make the login less complicated (in my opinion) - here's an old but still valid article about that: https://www.devils-heaven.com/facebook-javascript-sdk-login/
Recently I was using the Sign-up and Sign-in template similar this one developed by Vladimir Budilov.
But now, I've been modifying my application to use the hosted UI developed by Amazon. So my application redirects to the hosted UI, all the authentication is made there and they send me the authentication token, more os less as explained in this tutorial.
Summarizing, I call the hosted UI and do login:
https://my_domain/login?response_type=token&client_id=my_client_id&redirect_uri=https://www.example.com
I'm redirected to:
https://www.example.com/#id_token=123456789tokens123456789&expires_in=3600&token_type=Bearer
So, I have now the token_id but I can't get the current user or user parameters from this. Could anyone help me with informations or some directions?
I've tried the methods in Amazon developer guide .
It works well when I was using Vladimir Budilov's template but trying to use the token_id, I'm not succeeding. Thanks in advance for your time and help.
var data = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
var cognitoUser = userPool.getCurrentUser();
if (cognitoUser != null) {
cognitoUser.getSession(function(err, session) {
if (err) {
alert(err);
return;
}
console.log('session validity: ' + session.isValid());
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId : '...' // your identity pool id here
Logins : {
// Change the key below according to the specific region your user pool is in.
'cognito-idp.<region>.amazonaws.com/<YOUR_USER_POOL_ID>' : session.getIdToken().getJwtToken()
}
});
// Instantiate aws sdk service objects now that the credentials have been updated.
// example: var s3 = new AWS.S3();
});
}
The attributes you configure to be added as claims are already available inside the id_token with base64 encoding (Since its a JWT token).
You can decode the token and access these attributes both at Client Side using Javascript and on Server.
For more info refer the StackOverflow question How to decode JWT tokens in JavaScript.
Note: If you need to trust these attributes for a backend operation, make sure you verify the JWT signature before trusting the attributes.
Here's a specific example of how to parse the callback parameters and set up a user session. This could be initiated in onLoad of your page.
import { CognitoAuth } from 'amazon-cognito-auth-js';
const authData = {
ClientId : '<TODO: add ClientId>', // Your client id here
AppWebDomain : '<TODO: add App Web Domain>',
TokenScopesArray : ['<TODO: add scope array>'], // e.g.['phone', 'email', 'profile','openid', 'aws.cognito.signin.user.admin'],
RedirectUriSignIn : '<TODO: add redirect url when signed in>',
RedirectUriSignOut : '<TODO: add redirect url when signed out>',
IdentityProvider : '<TODO: add identity provider you want to specify>', // e.g. 'Facebook',
UserPoolId : '<TODO: add UserPoolId>', // Your user pool id here
AdvancedSecurityDataCollectionFlag : '<TODO: boolean value indicating whether you want to enable advanced security data collection>', // e.g. true
Storage: '<TODO the storage object>' // OPTIONAL e.g. new CookieStorage(), to use the specified storage provided
};
const auth = new CognitoAuth(authData);
auth.userhandler = {
onSuccess: function(result) {
alert("Sign in success");
showSignedIn(result);
},
onFailure: function(err) {
alert("Error!");
}
};
const curUrl = window.location.href;
auth.parseCognitoWebResponse(curUrl);
Now you're "signed in" as far as the Cognito JS client is concerned, and you can use getCurrentUser(), getSession(), etc. `See "Use case 2" here for more context/details.
We plan to use keycloak to secure a bunch of web apps, some written in Java, some in JavaScript (with React).
After the user is logged in by keycloak, each of those web apps needs to retrieve the user that is logged in and the realm/client roles that the user has.
For Java apps, we tried the keycloak Java API (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims). They seem to work fine
For JavaScript apps, we tried the following code, but could not get Keycloak to init successfully (Note this is in web app code after the user is already authenticated by keycloak, the app is only trying to retrieve who logged in with what roles):
var kc = Keycloak({
url: 'https://135.112.123.194:8666/auth',
realm: 'oneRealm',
clientId: 'main'
});
//this does not work as it can't find the keycloak.json file under WEB-INF
//var kc = Keycloak('./keycloak.json');
kc.init().success(function () {
console.log("kc.idToken.preferred_username: " + kc.idToken.preferred_username);
alert(JSON.stringify(kc.tokenParsed));
var authenticatedUser = kc.idTokenParsed.name;
console.log(authenticatedUser);
}).error(function () {
window.location.reload();
});
I assume it would be fairly common that web apps need to retrieve current user info. Anyone knows why the above code didn't work?
Thanks.
<script src="http://localhost:8080/auth/js/keycloak.js" type="text/javascript"></script>
<script type="text/javascript">
const keycloak = Keycloak({
"realm": "yourRealm",
"auth-server-url": "http://localhost:8080/auth",
"ssl-required": "external",
"resource": "yourRealm/keep it default",
"public-client": true,
"confidential-port": 0,
"url": 'http://localhost:8080/auth',
"clientId": 'yourClientId',
"enable-cors": true
});
const loadData = () => {
console.log(keycloak.subject);
if (keycloak.idToken) {
document.location.href = "?user="+keycloak.idTokenParsed.preferred_username;
console.log('IDToken');
console.log(keycloak.idTokenParsed.preferred_username);
console.log(keycloak.idTokenParsed.email);
console.log(keycloak.idTokenParsed.name);
console.log(keycloak.idTokenParsed.given_name);
console.log(keycloak.idTokenParsed.family_name);
} else {
keycloak.loadUserProfile(function() {
console.log('Account Service');
console.log(keycloak.profile.username);
console.log(keycloak.profile.email);
console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
console.log(keycloak.profile.firstName);
console.log(keycloak.profile.lastName);
}, function() {
console.log('Failed to retrieve user details. Please enable claims or account role');
});
}
};
const loadFailure = () => {
console.log('Failed to load data. Check console log');
};
const reloadData = () => {
keycloak.updateToken(10)
.success(loadData)
.error(() => {
console.log('Failed to load data. User is logged out.');
});
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>
simple javascript client authentication no frameworks.
for people who are still looking...
Your code asks the Keycloak client library to initialize, but it doesn't perform a login of the user or a check if the user is already logged in.
Please see the manual for details: http://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
What your probably want to do:
Add check-sso to the init to check if the user is logged in and to retrieve the credentials keycloak.init({ onLoad: 'check-sso' ... }). You might even use login-required.
Make sure that you register a separate client for the front-end. While the Java backend client is of type confidential (or bearer only), the JavaScript client is of type public.
You find a very minimal example here: https://github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app.js
Alternatively you can register a callback for onAuthSuccess to be notified once the user information has been retrieved.
Once you use Keycloak in the front-end, you will soon want to look in bearer tokens when calling REST resources in the backend.
You might have solved the problem by this time. I hope this answer help rest of the people in trouble.
when you use JavaScript Adopter
Below javascript should be added in of html page.
<script src="http://localhost:8080/auth/js/keycloak.js"></script>
<script>
/* If the keycloak.json file is in a different location you can specify it:
Try adding file to application first, if you fail try the another method mentioned below. Both works perfectly.
var keycloak = Keycloak('http://localhost:8080/myapp/keycloak.json'); */
/* Else you can declare constructor manually */
var keycloak = Keycloak({
url: 'http://localhost:8080/auth',
realm: 'Internal_Projects',
clientId: 'payments'
});
keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
alert(authenticated ? 'authenticated' : 'not authenticated');
}).catch(function() {
alert('failed to initialize');
});
function logout() {
//
keycloak.logout('http://auth-server/auth/realms/Internal_Projects/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri')
//alert("Logged Out");
}
</script>
https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter Reference Link.
Note : Read the comments for 2 methods of adding json credentials.
I am using login using facebook in my website,
Here is the button
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
I am using the exact example given here
But after the check login status, i am getting the response with only the userid of facebook and token, but i want to get the username too.. How can i get that ?
Help pls
Here is the script
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxx',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2' // use version 2.2
});
FB.getLoginStatus(function (response) {
console.log(response);
console.log(response.email);
//here status is connected
//statusChangeCallback(response);
});
};
In the resopnse, i am getting the entire json,
In the response.status i am getting as connected
But while i try response.email i am getting undefined
How can i get the email or username ?
EDITED to show what actually fixed it for me:
So it does appear to depend on what version of the API your config is set to allow. BUT, I was able to get the email address on a v2.5 api by using the following:
If you are using the Hello World code, then replace this section:
FB.api('/me', function (response) {
console.log('Success ');
console.log(response);
});
With this:
FB.api('/me', { fields: 'email' }, function (response) {
console.log('Success ');
console.log(response);
});
The difference is adding the { fields: 'email' } object to the call. This appears to have been a new addition in either v2.4 or v2.5 of the API which is why older code you see on SO appears to work for the poster but not for you. Hope this helps.
I'm not sure this qualifies as a solution, but I was able to reproduce this issue (no email returned after a valid request).
I have two apps, each created under a different FB account. The first one was created more than a year ago and the second one was created today. I have code that runs perfectly against the older app (returns email) and fails against the newer app (no email).
At first I thought maybe FB just holds back on certain data for brand new apps but I thought it was odd that it wouldnt be documented anywhere.
So I decided to compare each app configuration side by side. I found that the older one had API VERSION (at the top of the dashboard) set to 2.0 and the newer was 2.5. The Hello World code on the API SDK page requests version 2.2 like so:
window.fbAsyncInit = function () {
FB.init({
appId: [my app id here],
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2'
})
};
According to the documentation, the fact that the newer app has API set to 2.5 in the config means that any requests for an older API (eg 2.2) will be automatically upgraded to 2.5. When I set the javascript above to request 2.5 (eg version: 'v2.5'), I was able to get the older app to fail too. So I suspect the issue is with the newer v2.5 api.
I have not been able to find out how to set my new app to accept older api calls but will update here if I do.
I want to post comments to someone's Facebook profile post or page post or group post using the Facebook Javascript SDK with an access token and Graph API.
I can generate an application access token from a current logged in user with publish_stream permission. How do I use the Javascript SDK call using post id so that a user can comment from outside Facebook, that is from my site where all page/profile/group posts are shown?
I tried the PHP SDK, but is not working on the server site.
Assuming user already logged in and access token has publish_stream permissions, you should call
FB.api('/'+ _POST_ID_HERE_ +'/comments', 'POST', { message:"Your comment text" },
function(response)
{
if (response && !response.error && response.id)
{
alert('New comment id = '+response.id);
}
});
function Comment_Clicked(pid)
{
FB.init({
appId : '472562079456084',
status : true, // check login status
//channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
//oauth:true
});
FB.login(function(response) {
if (response.status=='connected') {
if (response.authResponse.accessToken) {
var token = response.authResponse.accessToken;
FB.api('/'+pid+'/comments?access_token='+token+'', 'POST',{ message:'test' }, function(response) {
if (!response || response.error) {
ms_js("#msfb-error-comlike").text("Errors you may not have permissions ");
} else {
ms_js("#msfb-error-comlike").text("Post success");
}
});
//window.location = "<? echo $absolute_url; ?>&temptoken="+ token +"";
} else {
// user is logged in, but did not grant any permissions
alert('You can create an access token only for your own profiles and pages.');
}
} else {
// user is not logged in
alert('To use fb.wall you have to create an access token.');
}
}, {scope:'read_stream,publish_stream'}); //exclude publish_stream,publish_actions
}
this my complete function which does the comment.here i am generating a access token by app id.is it right? by a app access token a user can comment on another page,profile post instead of his page or profile post?! things go ok so is using. #Const actually publish_stream permission works for another user performing comment to another user profile post which i tested.but for the user for which problem is still problem, dont know why!.generating token giving all permissions using javascript sdk in my local site not working but works when i generate here - developers.facebook.com/tools/explorer....