I have a nodeJS application (express), which has a facebook login. I'm using the passport-facebook authentication, described in here passport-facebook. My login was still working couple weeks ago ok, but now something has changed. I'm not sure if Facebook has changed something, or if I have. I haven't touched to any of the login code, so I suspect it is something in the facebook's end.
Here is my authentication code:
router.get('/', passport.authenticate('facebook'), function(req, res){
});
router.get('/auth/facebook/callback', passport.authenticate('facebook', {
failureRedirect: '/' }),
function(req, res) {
res.redirect('/calendar');
});
Basically, I want the app to automatically authenticate the user from the root of the app, and then redirect after the authentication to /calendar.
The symptons are following: If I try to go to the root and I haven't logged in with facebook earlier, then it will take me to the normal facebook login screen, as it should. But then on that screen, there is a warning of:
Given URL is not permitted by the Application configuration
One or more of the given URLs is not permitted 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 checked all questions related to this, and it seems it is because I haven't configured the app domain and site url properly in the facebook app configuration. But they should be all fine: app domain: localhost, site url: http://localhost:3000/
So I don't know why it is complaining about it? I do not have any subdomains. The only routes I do have are: (/, /calendar, /calendar/events). The last /calendar/events routes are ajax routes. Anyways, after I enter my facebook credentials and login, then the page will redirect me to a empty page, with url: (https://www.facebook.com/login.php?login_attempt=1). I opened the developer's tools, and I see one error message in its console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
But, now I am actually logged in. Because if I now go to root or to /calendar, it will take me to correct page and show I'm logged in properly. So apparently the log in works, but there are some issues with redirection and allowed URL's. I just don't seem to know what and why. I'm using mongodDB as database.
It could be because of what site you have registered in your app. If you have registered it to http://localhost:3000/ you should work with domain localhost that for the callback. And if you have registered it as http://127.0.0.1:3000/ then you should work with 127...
I have no idea why this even worked, but I found a solution. Previously, I had configured valid OAuth redirect URI to be http://127.0.0.1:3000/auth/facebook/callback, and it was working all good. Now I changed it to use localhost instead of 127.0.0.1:3000, and that seemed to do the trick. Now everything is working as expected, though I don't know why. If someone is able to clearly tell me why, I will mark that as the correct answer.
Related
I'm having an issue getting Login Kit to work. Similar to the question asked here I have the correct redirect domain listed in tiktok settings and the redirect_uri is basically just "domain/tiktok" but no matter what I do I get the same error message:
Below is my backend code - it's basically exactly the same as what is listed in the tiktok docs. Any help on this would be much appreciated!
const CLIENT_KEY = 'my_key'
const DOMAIN = 'dev.mydomain.com'
const csrfState = Math.random().toString(36).substring(2);
res.cookie('csrfState', csrfState, { maxAge: 60000 });
const redirect = encodeURIComponent(`https://${DOMAIN}/tiktok`)
let url = 'https://www.tiktok.com/auth/authorize/';
url += '?client_key=' + CLIENT_KEY;
url += '&scope=user.info.basic,video.list';
url += '&response_type=code';
url += '&redirect_uri=' + redirect;
url += '&state=' + csrfState;
res.redirect(url);
UPDATE 8/13/2022
I submitted the app for review and was approved so the status is now "Live in production" instead of "staging". The issue is still there - still showing error message no matter what domain / callback URL I use
UPDATE 8/16/2022
OK so I've made some progress on this.
First off - I was able to get the authentication/login screen to finally show up. I realized to do this you need to:
Make sure that the status of your app is "Live in production" and not "Staging". Even though when you create a new app you may see client_key and client_secret show up don't let that fool you - Login Kit WILL NOT WORK unless your app is submitted and approved
The redirect_uri you include in your server flow must match EXACTLY to whatever value you entered in "Registered domains" in the Settings page. So if you entered "dev.mydomain.com" in Settings then redirect_uri can only be "dev.mydomain.com" not "dev.mydomain.com/tiktok".
I think I might know what the issue is. My guess is that before - on the Settings page you had to enter the FULL redirect URL (not just the domain) and whatever redirect uri was included in the authorization query was checked against this value which was saved in TikTok's database (whatever was entered in the Settings page when path/protocol were allowed). At some point recently, the front-end business logic was changed such that you could only enter a domain (e.g., mydomain.com) on the Settings page without any protocols - however TikTok's backend logic was never updated so during the Login flow they are still checking against an EXACT match for whatever was saved in their DB as the redirect uri - this would explain why an app that was previously using the API with a redirect uri that DOES include protocols (e.g., for Later.com their redirect uri is https://app.later.com/users/auth/tiktok/callback) continues to work and why for any app attempting to save redirect WITH protocols are getting the error message screen. My gut feeling is telling me that the error is not on my part and this is actually a bug on TikTok's API - my guess is it can be addressed either by changing the front-end on the Settings page to allow for path/protocols (I think this is the ideal approach) or to change their backend so that any redirect uri is checked such that it must include 1 of the listed redirect domains.
I've been emailing with the TikTok team - their email is tiktokplatform#tiktok.com - and proposed the two solutions I mentioned above. I suggest if you're having the same issue you email them as well and maybe even link this StackOverflow question so that maybe it will get higher priority if enough people message them about it.
If you're looking for a shot-term hack I'd recommend creating a dedicated app on AWS or Heroku with a clean domain (e.g., https://mydomain-tiktok.herokuapp.com) and then redirect to either your dev or production environment by appending a prefix to the "state" query (e.g., "dev_[STATE_ID]"). I'll just reiterate I consider this a very "hacky" approach handling callbacks and would definitely not want to use something like this in production.
In my case, the integration worked after doing following steps:
In TikTok developers page:
Like #eugene-blinn said: make sure your app is in Live in production status (I couldn't find anything in the documentation about why Staging apps don't work);
Add the Login Kit product to your app and set the Redirect domain field with your host domain, for example: mywebsite.com.
In your code:
From my tests, I could add whanever url path I wanted, the only constraint was that the domain should match with step 2. So, yes, you can add https://mywebsite.com/whatever/path/you/want in redirect_url parameter.
That's it. It should work with these 3 steps.
Additionally, I got other issue related to use specific features in the scope property (like upload or read videos, etc), so here the solution as well:
Only add Video Kit product to the TikTok app and set video.upload or video.list in the scope authorize request won't work unless you also add the TikTok API product in your TikTok app as well. Btw, it neeeds to be approved too.
TikTok fixed the bug that resulted in URL mismatch with redirect domain from working. However, they fixed it only for paths (e.g., /auth/tiktok) but PORT additions still result in an error - so www.domain.com:8080/auth/tiktok won't work but www.domain.com/auth/tiktok WILL work
UPDATE 10/3/2022
Got the following response directly from TikTok engineering team:
At this point, we only support production integrations with TikTok for Developers and require that you have a URL without port number. However, we understand from your communication that this makes it harder for you to build, test, and iterate your integration with us. Unfortunately, at this time, we do not have a timeline for when this additional support for development servers will be added. We request that you only redirect to URLs without port numbers. Thank you for the feedback.
The frontend of the developer's dashboard still rejects protocol and path in validation. However, the backend skips the path validation.
To be able to update the "Redirect domain" simply:
Open dev tools in chrome and go to the "Network" tab.
Clic on "Save changes" button on the dashboard.
Right clic on the "publish" request that appeared and copy as cURL.
Modify the "redirect_domains" field in the request before pasting it in the terminal.
I believe the app still needs to be approved and in production to get it to work. I'm still waiting for approval and it has been a couple of weeks.
UPDATE 9/17/2022
Just like #mauricio-ribeiro, my app worked after it was approved to production. Setting up the redirect domain without path and scheme works just fine.
I had the same problem, my solution:
1.- In my TikTok App dashboard, the “redirect_uri” is: mydomain.com, without http/https and without path (/my-redirect-url). Also you can add subdomains using this rule
2.- In my code, I have to add http or https to the redirect_uri, and feel free to use path (/my-redirect-uri)
I hope this help you
I am trying to serve a build react application using expressjs. the react application is built and the index.html is served from my expressjs using:
app.use('/', express.static('reactapp/build'))
The application is simple. it contains a number of cards which when pressing navigates to another page changing the route. Before clicking, it is suppose localhost:3000/lists and after clicking any cards, it routes to localhosts/lists/1, 1 being an id. Now, when i try to refresh the page after pressing the any one of the cards, i get "no handler found for the path"(because it is client side url i suppose and isnot handled by express). the last app.use gets triggered.
app.use((req, res) => {
res.status(404).json({message: `No handler for ${req.url}`, requestHost: req.baseUrl})
})
therefore, what i did was, i sent the index.html inside this middleware part to fix my issue.
app.use((req, res) => {
res.sendFile(path.join(__dirname,"..\\reactapp\\build","index.html"));
})
it solved the problem locally but after deploying i get the "internal server error of status code 403". i am not knowing what the problem is. according to a site: The 403 (Forbidden) status code indicates that the server understood the request but refuses to authorize it...If authentication credentials were provided in the request, the server considers them insufficient to grant access.
Could someone help me out? i am not much familiar with expressjs so i wanted some help on what might be the reason.
res.sendFile(path.join(__dirname,"..\reactapp\build","index.html"));
the way path is setup, doesnot work for linux machines. that might be the reason.
I am trying to link an anonymous mongodb stitch session to a Google account using the following code snippet from the docs:
function linkWithGoogleAccount() {
user
.linkUserWithRedirect(new GoogleRedirectCredential())
.then(_=> alert("getting here"))
.catch(console.error)
}
Further, I added http://localhost:8080 (where I develop the app) to the list of Allowed Request Origins.
With the above code, I expect to handle the OAuth redirect similar to the regular Google authentication (which works fine).
However, when the alert "getting here" is triggered I see a GET 400 error with URI https://eu-west-1.aws.stitch.mongodb.com/api/client/v2.0/app/myapp-abcde/auth/providers/oauth2-google/login?redirect=http://localhost:8080/&state=M2I...In0%3D&link=true&providerRedirectHeader=true. After accepting the alert I get redirected to localhost:8080/null.
I assume I misunderstand some aspects of the whole procedure (it's hard to debug) and would appreciate any help. Thanks!
I'm building an OAuth flow in a Firebase Function.
When a client tries to login through Facebook, I create an UUID for their flow, redirect them to the facebook login dialog in the browser with the above UUID as the value for the state parameter.
I expect the Facebook login dialog to come up, instead I get this error:
Authentication error: StatusCodeError: 400 - "{\"error\":{\"message\":\"Missing redirect_uri parameter.\",\"type\":\"OAuthException\",\"code\":191,\"fbtrace_id\":\"ASKnZNGGkKhI4UI5mBcX_zl\"}}"
I even tried adding quotes to the redirect_uri in my request
...&redirect_uri="<encoded_uri>"
which resulted in a different error:
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 I'm guessing I don't need to enclose the parameter in quotes)
This is the url I'm redirecting to:
https://www.facebook.com/v5.0/dialog/oauth?client_id=[FACEBOOK_CLIENT_ID]&redirect_uri=https%3A%2F%2Fus-central1-bitblock-blast.cloudfunctions.net%2Foauth%2Fsignin%2Ffacebook%2Fcallback%2F&scope=public_profile&state=1da53893-ee5c-488d-be5c-c7913411c758
This is a version with request_uri not percent encoded just so you can see it clearly (I'M NOT USING THIS)
https://www.facebook.com/v5.0/dialog/oauth?client_id=[FACEBOOK_CLIENT_ID]&redirect_uri=https://us-central1-bitblock-blast.cloudfunctions.net/oauth/signin/facebook/callback/&scope=public_profile&state=1da53893-ee5c-488d-be5c-c7913411c758
I've tried opening it directly in the browser, but no luck, same errors.
As you can see, this is my callback endpoint
https://us-central1-bitblock-blast.cloudfunctions.net/oauth/signin/facebook/callback/
These are the domains I added in the app's console on Facebook under Settings > Basic
These are the settings and callback URIs I added under Products > Facebook Login > Settings
(As you can see I've tried every possible variation)
Here you can see my callback being verified as OK
(Notice that the following variations all work: "...callback/", "...callback", "...callback?state=XXX"
So I don't understand what I'm missing or doing wrong.
I am expecting to be redirected to the Facebook login dialog, and instead I keep getting that 'missing redirect_uri parameter' error.
EDIT: Just to make sure, the Facebook application is also Live.
I now that this question was posted couple times but my problem is a little bit different. I try to submit for example event to my Page from Application.
I have private Profile on Facebook, Page and Application. Of course I'm admin of this page.
First thing I did was getting page access_token, so I went to https://developers.facebook.com/tools/explorer/ and in the URL I wrote /me/accounts/. Permission was set to manage_pages. I received access_token for my page.
Having access_token I connected my Application to the Page. So I made POST request to /[PAGE_ID]/tabs/ with app_id as a parameter and setting access_token of the Page. Now it's connected, I've checked it.
Now I try to submit some content by my Application. For example /[PAGE_ID]/events/ and passing parameters: name = Sample event, start_time = 2013-07-14T19:00:00-0700. And of course with the Application's access_token which I got by typing in the browser: https://graph.facebook.com/oauth/access_token?client_id=[APP_ID]&client_secret=[APP_SECRET]&grant_type=client_credentials. I got an error saying:
{
"error": {
"type": "Exception",
"message": "You must be an admin of the specified page to perform the requested action.",
"code": 1373019
}
}
I can post to this Page as a User but can't as an Application. My Application is of two types: Facebook Login and Facebook Tab. I've set permissions to publish_action and manage_pages publish_stream create_event.
What I did wrong?
Ok I solved the problem. Maybe it can be helpful for others. I don't know for what reason are those permissions https://developers.facebook.com/apps/[APP_ID]/permissions but the only thing I had to do was going to https://developers.facebook.com/tools/explorer/ and changing application from Graph API Explorer to my app and generating new access_token for privilages I needed. I don't know why they moved such crucial thing as permissions to the testing tool.