I'm using Facebook js sdk, requesting the 'user_birthday' permission.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
_fbLoginCallBack(response);
} else {
var permissions = {
scope : 'email,user_birthday'
};
FB.login(responseCallback, permissions);
}
});
I have made the app and all its live features available to the general public.
The code works If I am logged with the same account I created the app with, but when try using different account, it doesn't display the permissions, and the returned JSON is missing the email and the birthday fields
What's happening ?
1. Login Review
You might need to do a Login review.
Review is not required to ask for the three basic permissions: public_profile, user_friends and email. In order to use Facebook Login in your app and access additional elements of a person's Facebook profile, you will need to submit your app for review. If your app is not approved or you don't submit for review, people will not be able to use Facebook Login in your app.
https://developers.facebook.com/docs/facebook-login/review
2. Make app live
You need to make the app and all its live features available to the general public. This can be done by making the app live by going to https://developers.facebook.com, select Apps --> Your App Name --> 'Status & Review'.
Related
I am having a react application with firebase as authentication. My authentication code is below
await firebase.auth().onAuthStateChanged((user) => {
if (user) {
props.setUser(user); //setting the user if login/register happens
history.push(`/admin/dashboard`);
console.log("user",user)
} else {
props.setUser(null); //blocks the user to get into the app if he/she is not logged in
history.push("/");
}
});
So, when user logs in..he will be navigated to /admin/dashboard. suppose when am in /admin/home and when i refresh the page, it goes again to admin/dashboard which shouldn't happen. so I tried
history.push(${props.location.pathname}); it works correctly after the refresh, it stays on the same page when the application is logged in. but when I restart the server again when I try to log in, it says no redirect url is specified. Got stuck on this for a long time.. Any help is welcome.Thanks
What your code does is check if the user is logged in and only let the user access the data if so.
You should do that in the fireabse rules (= serverside) as this is way more secure.
You didn't provide the kind of FirebaseDB you are using. So assuming you use the Realtime Database here are some according rules:
{
“rules”: {
“.read”: “auth != null”,
“.write”: “auth != null”
}
}
You should maybe check the rules before deploying your app, because now every authenticated user can change/add/delete data, but you get the point. This does exactly what you want so you won't even need to perform a check in your ReactJS App. Firebase will automatically deny unauthenticated users the access to the database.
Btw: You should try to implement security relevant things in the Firebase Rules. Ideally you want your rules to be written in a way that you don't need to perform any validation inside your ReactJS app. Firebase rules can get quite complex. I experienced that myself when writing a chat app with chatrooms and everything. But it is definitly worth the effort if your app is more secure after.
I have a PWA app where one of the options you have to sign-in is Facebook, everything goes well and if you're in the browser the login works really well. The problem happens when you add the website to your mobile and it opens in PWA and you click log-in from Facebook it opens a blank page and it doesn't redirect to the app, if you close the page, go back to the app and click again facebook the user is logged in, but does anyone has any idea how to get rid of the white/blank page?
I have tried 'redirect_uri' and 'display: touch,' but none of this seems to be working anymore.
A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode.
It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank.
The most straightforward way to fix this is first to check if the user has already logged in and authorized your app before calling the .login() function.
Luckily, Facebook provides a function to do it, where they handle (almost) everything for you.
The getLoginStatus() function
The getLoginStatus() functions determines 1) if a user is signed into Facebook and 2) if the user has already authorized your app.
There are three possible states for a user:
The user is logged into Facebook and has authorized your app, in this case, the function will return: connected.
The user is logged into Facebook but has not authenticated your application, in this case, the function will return: not_authorized.
The user is either not logged into Facebook or explicitly logged out of your application, in this case, we don’t know which one is it, that’s why it returns: unknown.
For example:
When we call getLoginStatus() we’ll get an object similar to this:
{
authResponse: {
userID: '12345678912345',
accessToken: 'kgkh3h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
session_Key: true,
expiresIn: '5183738',
sig: '...'
},
status: 'connected'
}
There you can see there’s an authResponse object and a status object. We’ll focus on the status object first, checking for each of the three possible responses.
this.facebookProvider.getLoginStatus(response => {
if (response.status === 'connected') {
// User Authenticated and your App is authorized
} else if (response.status === 'not_authorized') {
// User authenticated but your app isn't authorized yet.
} else {
// the user isn't logged in to Facebook.
}
});
Try this and try to logout first from Facebook before you make call from PWA.
I'm developing an application which I'm writing in Angular 6 framework.
Currently, I would like to add user login by social media like: Facebook, Google, Twitter, Github, LinkedIn.
I have a four buttons for these actions in my SocialLoginComponent's template:
Now I'm trying to implement user login by facebook after clicking on CONNECT WITH FACEBOOK button which has an click angular action:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Implementation of function loginWithFacebook looks like:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Here auth is of course service injected by constructor:
constructor(private auth: AuthService) {
}
Below I show implementation method loginByFacebook method in my AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
where facebookUrl is the AuthService property:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
I'm setting up here of course parameters based on My Facebook App.
I'm trying to invoke that url by get method in order to obtain a facebook login dialog based on description from tutorial: manualyBuildALoginFlow. I wouldn't like to use JavaScript SDK in my solution.
In current state when I'm clicking on the faecebook button, there is response like below:
I would like to obtain modal dialog with confirmation like below:
In my Get request I add parameter response_type = token in order to obtain Social token. On the below diagram I show what flow I'm trying to achieve:
On above diagram my server is laravel framework which currently handle user login and returns JWT token in order to check that user's logged in to application. Next this token I save in local storage by Angular6 framework.
How could I obtain that redirection with modal window in Angular6? What I'm doing wrong is that redirection dosen't work? What first step should I do in order to implement such authorization using facebook?
I would be greateful for advices.
Best Regards
I'm trying to invoke that url by get method
Which means an AJAX request … and that is of course not possible.
You need to redirect the user to the login dialog URL, not try and request it in the background - for the simple reason, that users need to be able to verify via the browser address bar, that they are indeed entering their login credentials to Facebook, and not some phishing site. If you requested it via AJAX and displayed it “within” your page, that would not be possible.
I've implemented method as misorude suggests in my Auth Service:
loginWithFacebook(appId: number, redirectUri: string) {
window.location.href = `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
}
Currently the page redirects to my Facebook app. Next I confirm my login by Facebook in dialog window. Then browser redirect back to my Angular app and in my url I have Social token from Facebook like on the picture below:
Next I'd like to obtain this token from url and then to implement the data flow as below:
How should I correctly get an access token and post to my backend Server as on the schema above?
I would be greateful for help
Best regards
I am using the '/me/albums' for my website app in JavaScript. It returns the correct array when I use the app but not for other users.
Also, I have put the { scope: 'user_photos' } in FB.login(), but it doesn't ask the user for Photos permission when they log in.
For getting access_token, I'm using this:
accessToken = response.authResponse.accessToken;
Most permissions need to get reviewed before the can be used by everyone. Without review, they only work for users with a role in the App.
There should actually be a warning text whenever you try to login as an App Admin or Developer.
Official docs: https://developers.facebook.com/docs/facebook-login/review
This question is not a duplicate of this one.
I don't want to know whether the user has authorized my application, but if the user is logged into facebook (completely independed from my application).
The reason is that I want to pring user comments in my html code so that search engines can index them.
When a user is logged into facebook I want to replace the html code with the facebook comments snippet.
If not an alternative old school comment form should be displayed.
I would pull the comments regularely from the graph api to have them in my database and comments that are done using the classic form should be posted over the api (not necessarily as the user, could be an admin account...) to have all the data synchronized.
I looked at the Javascript SDK Docs, also found the function getloginstatus but the documentations are bad and not conclusive. I know that there are also often features available at facebook codes that are not documented or implemented in higher level apis.
My questions are:
Can I somehow find out if a user is logged into facebook?
Can I somehow have a callback or notification of posted comments, so I can trigger synchronization to my database or do I have to "crawl" the graph api on a regular basis?
There is a non-hack, officially-supported way of doing this for Facebook (I think the last version of the docs was clearer on this point).
Using the Javascript SDK, you can do:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
FB.getLoginStatus(function(o) {
if (!o && o.status) return;
if (o.status == 'connected') {
// USER IS LOGGED IN AND HAS AUTHORIZED APP
} else if (o.status == 'not_authorized') {
// USER IS LOGGED IN TO FACEBOOK (BUT HASN'T AUTHORIZED YOUR APP YET)
} else {
// USER NOT CURRENTLY LOGGED IN TO FACEBOOK
}
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
An aside: if XAuth had caught on, it would be possible to do this in a more universal and supported way for any site supporting that standard.
This article
https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information
identifies security risks in Google and Facebook that will allow you to determine if a user is logged in. While no official API exists to check if a user is logged in without that user giving you express permission to access this information, the above article shows how you can 'guess' if a user is logged in or not.
Note: The article identifies a 'hack' and so is not guaranteed to work in the future, if or when Google & Facebook identify these security risks.
I also ran into similar requirements and solved my problem with following code; Using the Javascript SDK, I used FB object. FB is a facebook object, it has property called _userStatus, this can be used like following.
if(FB._userStatus == "connected")
{
// USER IS LOGGED IN AND HAS AUTHORIZED APP
}
else if(FB._userStatus == "notConnected"){
// USER IS LOGGED IN TO FACEBOOK (BUT HASN'T AUTHORIZED YOUR APP YET)
}
else if(FB._userStatus == "unknown")
{
// USER NOT CURRENTLY LOGGED IN TO FACEBOOK
}
The above code is very useful. It can be used in any part of the page as long FB object is not null.