Creating facebook app with callback url - javascript

I am creating a facebook app. And I want to let users to login to my website using it(Using passportjs).
But to do that, I need to give callback url(my website url). But I couldn't find that field in the facebook app creating page.
Am I missing something? I have searched for it for a quite long time.

Writing as of Feb 2, 2014 I found these instructions to be current;
Go to your app
On the left-hand sidebar, click Settings
Under the main section, click Add Platform
Click 'Website'
Specify your callback in the Site URL field (e.g. http://localhost:3000/auth/facebook/callback).

Go to your app.
On the left-hand sidebar, click Settings.
Under the main section, click Add Platform.
Click 'Website'.
Specify your callback in the Site URL field (e.g. http://localhost:3000/auth/facebook/callback).

Call back URL must be provided in the Clint O auth settings in order the facebook to send the user credentials and access Token after user logged into facebook through your app. Facebook's developer website UI was changed again. Now the client OAuth settings block was moved into Facebook Login. To provide the callback URL Now the path is
Your App Dashboard > On the Left-hand sidebar > facebook login > Clint Oauth Settings > Valid OAuth redirect URIs

The "Callback URL" is the URL that will be contacted once the user has accepted or rejected the OAuth request.
This is set as a parameter of your OAuth request. So you set the URL in your own program, not somewhere in Facebook.
In Java/Spring social you would do:
OAuth2Parameters params = new OAuth2Parameters();
params.setRedirectUri("http://yoursite/callback");
Once you set this, it must also match a "Valid OAuth Redirect URL" as sivanagaraju's answer mentions, otherwise Facebook will reject it. In the "Facebook Login" tab under your app, enter all valid callback URL's, such as http://localhost/callback, http://productionUrl/callback, etc.
If you don't see "Facebook Login" tab under your app, click "Add Product-> Facebook Login->Get Started" Enter the Valid Callback Urls -> Save changes.

Go to the Facebook developer page.
In the left hand side bar, under 'Products' you'll either see or need to add the Facebook Login product.
Once you've added it, you can go to Facebook Login settings and add your URL to 'Valid OAuth redirect URIs'

Related

javascript - oAuth: How to redirect user back to application?

I am new to javascript. I'm creating a login webpage with auth0, if the user enters the correct id/password the auth0 login API will redirect them back to the application, they are calling from based on their redirect URL.
I want to add a feature where if they don't accept terms and conditions, they would be redirected back to the application they are calling from via redirect URL.
Is it possible? I tried to search online but could not find any proper documentation. can anyone please advise?
shouldn't there be any param in the URL when they get directed to your application? i think there should be a param in the URL that you can use to redirect them back.
I found the solution, I had to user callback URLs with the error message.
Solution for this in Vue.js
<a v-on:click="f1()">..</a>
f1: function() {
window.location.href = "myapp://callback?error=MyCustoomrErrorMessage";
},

Authenticate with custom page Auth0

I am new to auth0. I would like to host my own signup and login page. I managed to generate a signup page and successfully call dbconnections/signup, but I have no luck with the login. Currently I am trying oauth/token but I am getting "Authorization server not configured with default connection.”. Is there another API call that I can use for login (username + password)?
Go to settings in Auth0 for your account. The dropdown at the top of your menu.
At settings scroll down to Default Directory and put the name of your database there. Eg: Username-Password-Authentication
Ive posted a detailed ansewr for how to move past this exact issue here
https://stackoverflow.com/a/52157069/3256123

Facebook javascript api - One or more of the given URLs is not allowed by the App's settings

I have a simple application that I'm hosting on bluemix.
I have set up a Single Sign On service for my application and paired it with facebook. I can successfully log in using the SSO service from bluemix and then I want to check that status of my login (I am logged in or not).
function CheckStatus(){
console.log("I'm trying to check the status");
FB.getLoginStatus(function(response) {
console.log("Here is the status response:");
console.log(response.status);
});
}
I trigger this piece of code with a simple button defined before. Whenever I click the code I get the following error:
Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App's settings. It
must match the Website URL or Canvas URL, or the domain must be a
subdomain of one of the App's domains.
I had a look at a number of posts on stackoverflow about this and none of them seem to work. My understanding is that there is something wrong with the configuration of my application but I can't figure out what.
Below is my configuration:
And this is the url my application is trying to reach when I try to get my login status:
https://www.facebook.com/connect/ping?client_id=913147408730179&domain=fncsecuritydemo.mybluemix.net&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FrFG58m7xAig.js%3Fversion%3D41%23cb%3Df29b5c6b3%26domain%3Dfncsecuritydemo.mybluemix.net%26origin%3Dhttp%253A%252F%252Ffncsecuritydemo.mybluemix.net%252Ff21657f8dc%26relation%3Dparent&response_type=token%2Csigned_request%2Ccode&sdk=joey
I am out of ideas about what I should be trying next. Any help is very much apreaciated. Let me know if you need more info.
The answer for this error lies in the Valid OAuth redirect URIs that fall under the Advanced tab from settings.
While setting up the application profile on facebook I have set the Valid OAuth redirect URIs to an URL generated by bluemix.
In order to received response on my application I had to add my app url in there as well. Rookie mistake.

Meteor.user is null after (apparently) successful login

I have a simple Meteor js app that allows you to create a user account and log in, or to log in with your existing Google account via oauth (thanks to the accounts-google package).
When using the app, I enter my username and password, everything works fine. However, when I click "Sign in with Google", the google oauth pop-up asks me to select which google account I want to use for this login. I select the account, the pop up waits a second, closes, and then nothing happens. No pop-ups being blocked, no "failed login" messages. It's as if nothing happened at all.
I'm certain that the user is never being defined when I use oauth login because Meteor.user() gives me null in the JS console.
What could be going on here? Or how would I debug this? Suggestions appreciated.
p.s. If any additional information is needed, I can ammend.
You probably messed up oauth configuration either on the Meteor side or Google Developers Console side, so here is a quick recap.
Google Developers Console :
Under APIs & auth > Credentials, create a new Client ID in the OAuth section.
Choose Web Application and specify both correct redirect URIs and JavaScript origins :
REDIRECT URIS
http://localhost:3000/_oauth/google?close
http://your-production-domain.com/_oauth/google?close
JAVASCRIPT ORIGINS
http://localhost:3000
http://your-production-domain.com
Meteor configuration :
Be sure to add these packages :
meteor add accounts-google
meteor add service-configuration
In server/config.js, add these lines from http://docs.meteor.com/#meteor_loginwithexternalservice
ServiceConfiguration.configurations.remove({
service: "google"
});
ServiceConfiguration.configurations.insert({
service: "google",
clientId: "????????????????.apps.googleusercontent.com",
secret: "????????????????"
});
The clientId and secret fields should be set to those in the Google Developers Console.
Then call Meteor.loginWithGoogle() in the click handler of your login form and it should work as expected.

How get Facebook token using Oauth2 with chrome.identity

I'm using chrome.identity in a packaged app to get a user token using Facebook. I call chrome.identity.launchWebAuthFlow, and I need to take the access token, send it to the server, and then access token is used to verify the user.
Works great with Google+. But for some reason, it doesn't work for Facebook. For some reason, Facebook's OAuth appears to be special. I've added the extensionid.chromiumapp.org to the list of redirect URLs in the API. Added
"https://extensionid.chromiumapp.org/*",
"https://facebook.com/*",
"https://www.facebook.com/dialog/",
"https://graph.facebook.com/*"
to manifest.json. But nothing changed.
In calling chrome.identity.launchWebAuthFlow I use URL like this
"https://www.facebook.com/dialog/oauth/access_token?" +
"client_id=myclientid&client_secret=myclientsecret&" +
"response_type=token&grant_type=client_credentials"
When I try to invoke it, I get the following error message:
«launchWebAuthFlow completed Object {message: "Authorization page could not be loaded."} »
And when I use URL like
«"https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user"»
I get the next error:
«launchWebAuthFlow completed Object {message: "User interaction required."} undefined »
I try to get facebook token in 4 days. I am tired. What I do wrong?
Why chrome.identity.getAuthToken work great for Google+ and chrome.identity.launchWebAuthFlow dont with Facebook?
I hope someone have done the same things and can help me.
I have solved the problem. Here is an example https://github.com/blackgirl/Facebook_Oauth2_sample_for_extensions
The "User interaction required." message means that the user needs to sign in to Facebook, and/or approve the requested OAuth scopes. The setting the { interactive: true } flag would allow identity.launchWebAuthFlow to display a window where the user would perform these steps. Since you are passing the { interactive: false } flag, identity.lauchWebAuthFlow fails.
https://www.facebook.com/dialog/oauth is most likely the URL you want to use to start your flow. The client_credentials grants are normally for cases where you are accessing resources owned by your app, rather than resources owned by a specific user.
However if you did want to debug that "Authorization page could not be loaded" case, the way to do it would be to open up chrome://net-internals and look for error responses coming back from Facebook.
chrome.identity.launchWebAuthFlow(
{'url': 'https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user, 'interactive': true},
function(redirect_url) {
/* Extract token from redirect_url */
console.log(redirect_url);
});
//'interactive': true
what will this flag do, will show a dialog box asking username and password
upon successful login it will ask for grant access just press that and
you will receive redirect url in above function body.

Categories

Resources