Develop Reference

Facebook login: Please make sure your redirect_uri is identical to the one you used in the OAuth dialog

So I'm out of ideas, I don't know what to check or debug anymore, but on the exception I get this:
string(188203) "Facebook\FacebookAuthorizationException Object
(
[statusCode:Facebook\FacebookRequestException:private] => 400
[rawResponse:Facebook\FacebookRequestException:private] => {"error":{"message":"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request","type":"OAuthException","code":100,"fbtrace_id":"DqCCKoiN0r4"}}
[responseData:Facebook\FacebookRequestException:private] => Array
(
[error] => Array
(
[message] => Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
[type] => OAuthException
[code] => 100
[fbtrace_id] => DqCCKoiN0r4
)
)
[message:protected] => Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
[string:Exception:private] =>
[code:protected] => 100

You can set redirect URI in
Go to https://developers.facebook.com/apps
Select your app.
Under Products > Facebook Login > Settings
Enable Embedded Browser OAuth Login
Set Valid OAuth Redirect URIs
You can Validate Redirect URI with Redirect URI Validator.
You can only use https URIs.
Also set App Domain in Settings > Basic > App Domains
Try / at the end of redirect URI
In my case I was using https://localhost everywhere but somehow when getting access token specifying https://localhost/ worked.

As absurd as it sounds, verify you're using the correct app_secret.
Facebook will give you this instead of just saying "invalid secret" in the response

I believed you have used different redirect_uri in your facebook app settings and Oauth API code. thats why you got this error.
For facebook login you must set same redirect_uri into both place.

Make sure to have it exactly as in your FB settings.
For me, I had https://localhost:3000/ in my settings but https://localhost:3000 in my get access token call and this was the source of the error!

I had the same issue and non of the answers helped me, then I tried to make another Facebook app, and it solved my issue!
I mean you have to use one application for Facebook OAuth and make another to use for Instagram oauth. seems Facebook has an issue with using both functionalities in one app.

After engaging in the problem for more than a day, found my mistake to be one '/' (slash) in app url at the end.

incase anyone else is having this issue and can't figure it out, your redirect_uri needs to have a "/" at the end. Facebook adds one automatically when you put your redirect_uri in the app settings. If you don't add the "/" in your code when you're trying to get the token, it will give you this error. That's what was going on with mine.
Ex: redirect_uri = "https://myserver.com:4429"
should be
redirect_uri = "https://myserver.com:4429/"

It means the redirect URI you pass to FB (usually in the query string) does not match what you have set in the app settings.

It can also be because of multiple slashes, for ex:
https://yoursite.com/auth/facebook/callback -> that's the one you added in the app settings
https://yoursite.com//auth/facebook/callback -> that's what you actually send

For me, it worked by replacing
callbackURL: "api/auth/facebook/redirect/",
to
callbackURL: "http://localhost:3000/api/auth/facebook/redirect/",
in the new FacebookStrategy

Was stuck in the same problem for a long time .
You will get this error when the redirect url is mismatching or does not exist or is wrongly formatted in the field (additional spaces or // ) , either the facebook app setting or while you are calling the API .
Solution
What worked for me was when ever you add a redirect URl you can check it in the valid redirect auth field uf it doesnot show valid when pressed check than that url is not the correct one

I finally managed to get this to work, in my case, I was using the Instagram Oauth API but I believe the logic is the same and you can find the complete flow here : https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-access-tokens-and-permissions.
So here is the basic flow :
Generate an authorization which will provide you with a code (the user will get redirected to Instagram in order to accept/deny the requested authorizations)
This code can be used in order to generate a 'short lived access token' and this is where the troubles arise.
For the first point, you need to provide Instagram with a redirect_uri. When you want to complete the second point, you'll need to make a POST request to Instagram, with a redirect_uri as well.
I thought that both redirect_uri's could be different between the 2 steps, but they don't. And this is simply where my error was : I wanted something like that for the first step : https://my.domain/short-lived-token and something like this for the 2nd : https://my.domain/short-lived-token but when I tried both with https://my.domain/generate-access-token, for instance, it worked.
Hope it helps you guys because I couldn't find anything on the internet.

LATEST FIX:
After sending 3 hours, I found a solution to this error.
This happened due to 2 reasons.
As we can see in response. Just Make sure you set the same URL in the developer portal and code
IMP: FACEBOOK needs to change the API response. 2nd reason is that you make sure that using Instagram App Secret and app ID. I was getting the same error bcoz I was using the wrong app secret.
Must Follow: Official FB Docs

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.

Can't login to Instagram using Client-Side (Implicit) Authentication

I'm trying to build a client-side application that allows people to login with their Instagram accounts. Problem is, I'm not sure if that's still possible.
I've coded a sample JavaScript after reading "Client-Side (Implicit) Authentication" section of their related docs.
I'm getting the following error:
{
"code": 400,
"error_type": "OAuthException",
"error_message": "JS login temporarily disabled"
}
From the error message I'm guessing it's not about my code but it's something on Instagram's side. Is there a way for me to do client-side login? Also, if I can't, what are my options?
Thanks.

I had similar issue and this is how I fixed it.
You have to uncheck the "Disable implicit OAuth:" by going to :
-> Manage Clients
-> Click edit on the app/webapp.
-> Uncheck - Disable implicit OAuth:
-> Update the settings and try to run it again by going to the link :
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
In the link, replace the values that were provided to you and in the response_type, give value as token to get the access token and if you want to get the request code, just replace token with the code in the URL.
Hope this helps for you and for future viewers.. Good luck.. :)

Just unset the "Disable implicit OAuth:" in app settings.

So, it seems it's impossible to do JS login at the moment with Instagram.
But they still allow implicit redirects so the solution is to have a server to make a redirect to your client side application. You only need two endpoints. I've written a small Node.JS app for this which you can find here.

I had tried for the same,I think there are not still providing any api to login with Instagram credentials username and password,You can just authenticate your account via
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

Google OAuth WildCard Domains

I am using the google auth but keep getting an origin mismatch. The project I am working has sub domains that are generated by the user. So for example there can be:
john.example.com
henry.example.com
larry.example.com
In my app settings I have one of my origins being http://*.example.com but I get an origin mismatch. Is there a way to solve this? Btw my code looks like this:
gapi.auth.authorize({
client_id : 'xxxxx.apps.googleusercontent.com',
scope : ['https://www.googleapis.com/auth/plus.me',
state: 'http://henry.example.com',
'https://www.googleapis.com/auth/userinfo.email', 'https://www.googleapis.com/auth/userinfo.profile'],
immediate : false
}, function(result) {
if (result != null) {
gapi.client.load('oath2', 'v2', function() {
console.log(gapi.client);
gapi.client.oauth2.userinfo.get().execute(function(resp) {
console.log(resp);
});
});
}
});

Hooray for useful yet unnecessary workarounds (thanks for complicating yourself into a corner Google)....
I was using Google Drive using the javascript api to open up the file picker, retrieve the file info/url and then download it using curl to my server. Once I finally realized that all my wildcard domains would have to be registered, I about had a stroke.
What I do now is the following (this is my use case, cater it to yours as you need to)
On the page that you are on, create an onclick event to open up a new window in a specific domain (https://googledrive.example.com/oauth/index.php?unique_token={some unique token}).
On the new popup I did all my google drive authentication, had a button to click which opened the file picker, then retrieved at least the metadata that I needed from the file. Then I stored the token (primary key), access_token, downloadurl and filename in my database (MySQL).
Back on step one's page, I created a setTimeout() loop that would run an ajax call every second with that same unique_token to check when it had been entered in the database. Once it finds it, I kill the loop and then retrieve the contents and do with them as I will (in this case I uploaded them through a separate upload script that uses curl to fetch the file).
This is obviously not the best method for handling this, but it's better than entering each and every subdomain into googles cloud console. I bet you can probably do this with googles server side oauth libraries they use, but my use case was a little complicated and I was cranky cause I was frustrated at the past 4 days I've spent on a silly little integration with google.

Wildcard origins are not supported, same for redirect URIs.
The fact that you can register a wildcard origin is a bug.
You can use the state parameter, but be very careful with that, make sure you don't create an open redirector (an endpoint that can redirect to any arbitrary URL).

Google API Authorisation with JavaScript

Hi I hope someone can help with this because it's driving me crazy right now.
I am trying to replicate this Google API authorisation example https://code.google.com/p/google-api-javascript-client/source/browse/samples/authSample.html on my own web server http://james-gilmore.co.uk/test.html
I have duplicated the code but replaced the clientID and API key with the keys set up in the google api console and I have turned the Google+ api service on in the 'Services' section.
I have the following set up under 'Client ID for web applications'
Redirect URIs: http://james-gilmore.co.uk/oauth2callback
JavaScript origins: http://james-gilmore.co.uk
And I also have the following set up under 'Simple API Access'
Referers: .james-gilmore.co.uk/.
When I run the http://james-gilmore.co.uk/test.html script I can authorise my access but I can see a JS error generated in the console:
'Uncaught TypeError: Cannot read property 'url' of undefined'
Does anyone know what I could be doing incorrectly? I think it may have something to do with the setup of my client ID's and allowed Referers because when I run the following example https://code.google.com/apis/console/?api=plus it works fine

The OAuth authentication appears to be working, but I see an error Access Not Configured being returned from an AJAX call.
Set up your referers as james-gilmore.co.uk/* (with the trailing wildcard, so that it will allow anything starting with your domain name).