I am trying to customize the Facebook button for my ReactJs website, but it seems to be not working. I want my Facebook button look like the following design:
Google login is working as I expected, but facebook is kept appearing like following:
Any help would be appreciated!
codesandbox link
I found the answer to my own question, I just stupidly did not see the correct way of importing the FacebookLogin
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'
This is how the import should be done. After that I was able to make my own custom style through render prop:
appId="1088597931155576"
autoLoad
callback={responseFacebook}
render={renderProps => (
<button onClick={renderProps.onClick}>This is my custom FB button</button>
)}
/>```
You can achieve this thing very easily. What you have to do is you have to design your custom button and then use the onclick property.
Here how you do it:
Include this thing where you want to show the Facebook login button and don't forget to style this button according to your needs.
<div id="fb-root"></div>
<button onclick="fb_login();">Login using facebook</button>
Now here is the code you have to include in your page that has the fb_login function defined. You have to put your app id to see the results.
window.fbAsyncInit = function () {
FB.init({
appId: 'your_app_id_here',
oauth: true,
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
function fb_login() {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function (response) {
user_email = response.email; //get user email
// you can store this data into your database
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'public_profile,email'
});
}
(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);
}()
Related
Here's how I do it, after getting the signin's client file :
// HTML
<script type='text/javascript' src="https://apis.google.com/js/api:client.js" async defer></script>
I called gapi.load() function into a HTML button
// load the startApp function after the page loads
jQuery(function () {
$(window).load(function () {
startApp()
})
})
var startApp = function () {
gapi.load('auth2', function () {
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'xxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
ux_mode: 'redirect', // I don't want it to display a pop-up
scope: 'profile email' // I just need to get user's name, profile picture and email address
});
// attach this function into a button element with id = "customBtn"
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
auth2.attachClickHandler(element, {},
function (googleUser) {
// it never calls this block of code.
// this never runs
console.log(googleUser.getBasicProfile().getName())
var gProfile = googleUser.getBasicProfile();
var name = gProfile.getName();
var email = gProfile.getEmail();
var imgUrl = gProfile.getImageUrl();
}, function (error) {
return alert("Google Sign in error!")
});
}
It load the necessary functions into a button. If user click on that button, user will be redirected into Google's signin page. After user manages to sign in then Google will redirect the URL back into my website.
It should also send the user's profile info into my attachClickHandler() function within the attachSignin(). But it never happens since it reloads the page before the handler function gets called.
It only works if I change the ux_mode: 'redirect' into default' popup
The best I can do right now is just to get the email address from the token_id parameter that Google give in URL after signin. The id_token field from the URL is a jwt that can be decoded
http://localhost:3006/login#scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&id_token=xxxxxxxxx&client_id=xxxxxxxxxxxx-xxxxxx.apps.googleusercontent.com
So How to get the user's profile information with ux_mode set to redirect ?
I modified your code so it works:
var startApp = function () {
gapi.load('auth2', function () {
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'xxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
ux_mode: 'redirect', // I don't want it to display a pop-up
scope: 'profile email' // I just need to get user's name, profile picture and email address
});
// attach this function into a button element with id = "customBtn"
attachSignin(document.getElementById('customBtn'));
// START NEW CODE
auth2.currentUser.listen(function(googleUser) {
if (googleUser && (gProfile = googleUser.getBasicProfile())) {
var name = gProfile.getName();
var email = gProfile.getEmail();
var imgUrl = gProfile.getImageUrl();
console.log({name, email, imgUrl});
}
});
// END NEW CODE
});
};
// Can remove callbacks if not using pop-up
function attachSignin(element) {
auth2.attachClickHandler(element, {});
}
Explanation:
When using redirect instead of pop-up, listen on currentUser instead of the attachClickHandler() callbacks. The Google API will detect and consume the redirect parameters, firing the currentUser.listen handler.
Sources:
https://github.com/google/google-api-javascript-client/issues/477#issuecomment-430299619
https://developers.google.com/identity/sign-in/web/listeners
I am trying to use FB.ui share or feed on my test web site and want to get post_id on response message. App has permissions from my test user (user_posts, public_profile) and also i am checking if login status is "connected".
this is javascript code that i am trying to check login and let user to share link. shareOnFacebook() is triggered by a simple html button;
<script async defer src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '****************',
cookie: true,
xfbml: true,
version: 'v5.0'
});
};
function shareOnFacebook() {
FB.getLoginStatus(function (response1) {
console.log(response1)
if (response1.status === 'connected') {
FB.ui({
method: 'feed',
link: 'http://www.linktoshare.com',
picture: 'http://www.linktoshare.com/images/imagethumbnail.png'
}, function (responseEnd) {
if (responseEnd) {
console.log(responseEnd);
alert('Success');
} else {
alert('Fail');
}
});
}
else {
FB.login(function (response2) {
console.log(response2)
FB.ui({
method: 'feed',
link: 'http://www.linktoshare.com',
picture: 'http://www.linktoshare.com/images/imagethumbnail.png'
}, function (responseEnd) {
if (responseEnd) {
console.log(responseEnd);
alert('Success');
} else {
alert('Fail');
}
})
});
}
});
}
</script>
As you can see from below image, if i close pop-up, i can get response image like that;
But when i share, reponse returns as an empty array like that;
I know the error about "Https" is not important because my app is on development status.
What should i do to get post_id on response here?
Thank you very much.
What should i do to get post_id on response here?
You can’t get the post ID any more, Facebook has removed that completely.
It was getting abused by shady developers and website owners to try and force users to share stuff, to get some kind of reward - which is absolutely not allowed. To stop that kind of spam, Facebook has removed this a while ago already.
I've been trying to login with javascript SDK. And I am trying to login with this code:
DZ.init({
appId : 'MY_APP_ID',
channelUrl : 'http://127.0.0.1/channel.html',
player: {
onload: function() {console.log('I am loaded')}
}
});
const login = () => {
DZ.login(function(response) {
console.log(response.authResponse);
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
DZ.api('/user/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {perms: 'basic_access,email'});
};
I am invoking login function with a login button. When login is invoked, new windows opens and asks to authorise the application, which is an expected behavior. But after this, it gets stuck as shown in the picture below:
And when I close the window, DZ does not get the access token although the access token is in the url as in the picture.
Is this a bug? Is there a way to initialize DZ with access token manually?
Also, my another qualm is that why js SDK does not need secret to initialize and login.
I can get the id and username from facebook connect, but I cannot retrieve the email !
Here is the JS script:
function connectionFacebook()
{ console.log('connectionFacebook called');
FB.api('/me?fields=email,name', { fields: 'name, email' }, function(response)
{
console.log(response);
response gives me:
Object {name: "John Doe ", id: "11112222333344445555"}
But no email !
PS. I guess it uses some old FB connect js since I work on an quite old site.
I have no idea what version of FB it uses, but I guess an old one !
ex: of code found in site;
FB.Event.subscribe('auth.login', function(response)
{
connectionFacebook();
;
});
FB.getLoginStatus(function(response)
{
if (response.authResponse)
{
connectionFacebook();
}
else
{
// no user session available, someone you dont know
//alert("getLoginStatus:deconnecté");
}
});
$.fn.connexionFacebook = function( ) {
return this.each(function () {
FB.init({
appId : xxxxxxxxx,
status : true,
cookie : true,
xfbml : true
});
});
}
})( jQuery );
<script src="http://connect.facebook.net/fr_FR/all.js"></script>
<fb:login-button show-faces="false" width="450" perms="email,user_birthday,user_location" size="medium">FaceBook connect</fb:login-button>
I'd guess that you don't have a permission to access the user's email. Facebook requires you to set the scope that determines which information you need to access.
In you case you need to specify the scope as public_profile,email to access the email. you can do that when your user logs in. Either with the API call:
FB.login(callback, { 'scope': 'public_profile,email' });
or with the button:
<fb:login-button scope="public_profile,email"></fb:login-button>
Specifying the email in the scope will ask the user to share her email address with your application when she logs in:
I'm using the Graph API via JavaScript SDK like this (this is basic example straight from documentation):
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#login').click(function() {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
})
})
</script>
</head>
<body>
Hellow!
Login
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '249274258430595',
cookie: true,
status: true,
xfbml: true,
oauth: true
});
};
</script>
</body>
</html>
It's also possible to test it live here:
http://bitcells.com
This cookie I need for backend access to API (fbs_249274258430595) is not being set.
Only something called fbsr_249274258430595 is present and this is not what I need. I tested this with FireCookie extension for Firebug.
I really don't understand how this basic example is not working right - meaning that I want to use API from the backend code (PHP, Ruby etc.).
Any ideas?
Thank you!
David
I, on the other hand ended up setting my own cookie which server side can read:
I have one checkbox which asks user if he wants to share on fb, here is the code:
function setFbCookies(response) {
Cookie.set('fb_access_token', response.authResponse.accessToken, {path: '/'})
Cookie.set('fb_user_id', response.authResponse.userID, {path: '/'})
}
when('#share_on_fb', function(checkbox) {
checkbox.observe('change', function(ev) {
if(checkbox.getValue()) {
FB.getLoginStatus(function(response) {
if (response.authResponse) {
setFbCookies(response)
} else {
FB.login(function(response) {
if (response.authResponse) {
setFbCookies(response)
} else {
checkbox.checked = false
}
}, {scope: 'publish_stream'});
}
})
}
})
})
And here is the reason why fbs_xxxxx cookie doesn't get set:
https://developers.facebook.com/blog/post/525/
It looks like if you use oath=false, then it does get set, but this is only valid until 1st of october. There is still no documentation on how to get encrypted access token from the new fbsr_xxxxxx cookie.