I'm using following script for login using Facebook JavaScript API.
var permissions = [
'email',
'user_friends'
].join(',');
FB.login(function (response) {
// if login was successful, execute the following code
if (response.authResponse) {
//Perform next set of methods
}
}, {scope: permissions});
This is working in all browsers and in Android (this script is rendering inside an iframe).
But when a user open the login page in Facebook In-app browser for iOS, then the login is not working. Popup is not showing.
After spending some time to fix this, the issue is happening only when I include the login page in an iframe.
Anyone experienced the same issue?
I experienced this issue. You need to use FB.getLoginStatus then if the user is not logged in, use FB.login. Just make sure to call FB.login after user click or else you will get a popup blocked.
Related
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 have written a meteor application with user login. After a user logs out, the application redirects to the user login page. However, when they are multiple tabs in the browser (or multiple browser windows) where the application is active (and the user is logged in), only the active tab or browser window goes back to the user login page. In the other window it seems the user is still logged in. However, when the user does some further work in the other window, nothing is synced with the db on the server anymore. I thought Meteor.logout() is reactive, so how is it possible that the other browser tabs or windows don't refresh?
I have the folowwing in my router?js file:
var filters = {
isLoggedIn : function(pause) {
if(!Meteor.user()){
this.render('login');
} else {
this.next();
}
}
....
}
Router.onBeforeAction(filters.isLoggedIn);
After pushing the logout button the following js code is executed
Meteor.logout();
Thanks for the help.
Try this:
Meteor.logoutOtherClients
Meteor.logoutOtherClients should log out all sessions. It is designed for situations where the user is logged in on multiple devices and wants to log out on all of them simultaneously.
In my app I didn't want to use a global redirect on logout, but on some templates to redirect to another template if logout happens.
Following Autumn Leonard's comment, I made this work by having the particular template reactive by creating a template.mytemplate.onCreated function and inside there put an autorun function checking Meteor.user() and doing the redirect.
I hope this approach helps others :)
I am using below code for Facebook login.
function login(){
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert(JSON.stringify(response))
});
} else {
console.log('User did not authorize.');
}
});
}
I am calling login method on click of button.FB.login() call is giving a popup window where user is supposed to enter username and password.
My requirement is to do a silent login i.e. logging in without popup window.My username and pswd are hardcoded for time being.How do i pass the credentials to login API without user intervention.I know hardcoding is not good practice but later i will obtain credentials from user controls.
How do i achieve this.Any help is greatly appreciated.
You can't. The frame that hosts the login is an iFrame displaying a form page hosted on Facebook. Facebook doesn't want computers logging people into their site for various anti-spam, security reasons.
This is not possible for several reasons
It is against Facebook's Policy to give credentials to third parties
Users should always be able to verify the identity of the page they are giving their credentials to.
I'm sure you don't want to require your users to break the policy do you?
I'm trying to make a simple facebook app, but for the authorization, it seems that it's always blocked by a popup-blocker. My code is thus:
FB.init({
appId : THEAPPPIDDDD,
status : true,
cookie : true,
xfbml : true,
});
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User did not authorize.');
}
});
Any help would be greatly appreciated... thanks
I aware that this question is a possible duplicate of another question: Stop the facebook popup blocker I am reposting this to help Dave Zhang. I have adapted this code for one of my site. In the following code, replace the YOUR_APP_ID and your website url, then the Facebook login will be popup-less.
//Javascript
var uri = encodeURI('http://example.com');
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location.href=uri;
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri="+uri+"&response_type=token");
}
});
This will just redirect directly instead of opening a pop-up.
You should initiate your login code on click of some button. As a good practice while dealing with FB, the login process should always be initiated by user.
Call your code on click of a button and it should FIX your problem.
to avoid doing the login via a popup, you should kick off the authentication at the server side
Small update for this old question which I found very useful, I was keep getting error which the domain is not allowed and it was allowed:
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
so, after small research I discovered you have to change your facebook app setting to allow such navigation:
enforce HTTPS
Use Strict Mode for redirect URIs
Embedded Browser OAuth Login (In case you use app webview)
The popup blocker will always initiate if the Popup action did not originate in an event caused by a user. For example, if you try and do a popup on a load event, the browser will most likely use the popup blocker. On the other hand, if you trigger the popup on a click event or keydown event, it is less likely that the popup blocker will be triggered.
You could also employ a method that has your application detect whether or not the popup was blocked. You can read more about that here.
As mentioned in other answers, if you'd rather do the authentication process without popups at all, you would need to handle this at the server side using OAuth.
I've implemented a Facebook login on a website, using the Javascript API and FBML.
When the user clicks Login, enters their credentials into the popup window, goes to the next stage and clicks 'Don't Allow' when prompted for permissions, the window simply closes and nothing else happens.
I want to change it so that when the window closes, the browser then redirects to a URL of my choice.
Is this possible with my current setup, using the Javascript API?
I'm assuming you mean XFBML, since you can't use anything except FBJS in FBML. This code is from the FB.login documentation:
FB.login(function(response) {
if (response.session) {
// user successfully logged in
} else {
// user cancelled login
}
});
Whatever goes in that else block is what happens if you don't get an authorization. top.location.href would work there.