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.
Related
With iOS12.2+ Apple wants a user gesture to activate devicemotion or deviceorientation. I have found samples in the Internet, f.e. here. I show a popup window in which the user will be informed and can accept or deny the access. This is all working fine with Javascript.
I'm aware Safari is caching the permissionState (granted or denied), so after giving or denying permission (by user) the page can be reloaded and the permissionState is still known. Here comes the problem: (how) can I check if the permission is already granted or denied? In case it's already set I don't want to display the popup (asking for permission) again after page reload.
okay, I think I found a solution, it's not pretty but it works.
First I have a function that checks if iOS 13+
if that's the case, I then request permissions, turns out if the user has already granted access DeviceMotionEvent.requestPermission returns granted if they haven't granted access it fails, and then I trigger the modal. To then ask for permissions again.
DeviceMotionEvent.requestPermission()
.then(response => {
if (response) {
console.log(response)
}
})
.catch(function(error) {
console.log("error");
// Trigger modal to ask for permissions
$('#askForPermission').modal('toggle')
});
hope it helps
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.
I need to change where my Facebook app is hosted. The URL will be the same but IP address will be changed, so I wont need to change the Canvas URL. After some tests it seems this breaks the Facebook app. I now get no callback function from FB requests such as FB.getLoginStatus
Has anyone changed this before?
The code below shows my FB.getloginstatus() call which was executing the callback on the old server but now on new one, the callback has stopped working.
FB.init({
appId : 'XXXXXXXXXX',
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
alert("login callback");
})
Yes you can.
Users access your application from you app namespace - https://apps.facebook.com/app_namespace
Where you store/host your application is up to you and you can change it whenever you want. The users will still reach your application via that url.
If you are experiencing problems, make sure that your new hosting service supports SSL because Facebook applications are required to be hosted from a secure location.
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 using javascript for the facebook login, and for posting action.
The problem is, if I login on facebook on the page A, I cannot post on a page B because I lost all the facebook information and I have to re-init and to re-log on facebook for posting on a other...
and I would like have a login page, and after the user could navigate on the website and post from any page.
Is there a way to fix that by using the cookie? or anything else? I looked for getting back but cookie but I still not find out how...
Thanks
You'll want to persist the Facebook authentication token somewhere, such as a database. Then, using the javascript API to check if the user is logged in:
window.fbAsyncInit = ->
FB.init(appId: '<%= ENV["FACEBOOK_APP_ID"] %>', cookie: true)
$('#sign_in').click (e) ->
e.preventDefault()
FB.login (response) ->
window.location = '/auth/facebook/callback' if response.authResponse
There are several moving parts to a Facebook web app, including client and server authentication. You should check out this Railscast which very thoroughly describes the process:
http://railscasts.com/episodes/360-facebook-authentication
and you can even pull source code: http://media.railscasts.com/assets/episodes/sources/360-facebook-authentication.zip