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 see plenty of others have had issues with facebook appending this to the callback uri and saw some good solutions for handling this client side with js embedded in the page. I have a nodejs api that handles the actual authorization with passportjs and passes it to our frontend (nuxtjs based on vue 2). The client stalls when trying to access/redirect any routes after being sent to the uri with the appended
I was hoping I could fix it with
//dashboard.vue
mount(){
if (window.location.hash == "#_=_"){
window.location.hash = ''
}
}
but this doesn't seem to fix anything with the router. I also tried adding a redirect to the vue router
//.nuxt/router.js
{ path: "/dashboard#_=_", redirect: "/dashboard" }
but the vue router dynamically generates on runtime so anything I hard-code there gets undone.
From what I undestand this is strictly a client side problem, but maybe I'm missing some parameter in the Facebook API call that could prevent this?
//backend api calling fb api
app.get('/facebook', passport.authenticate('facebook')) //not specifying scope since still in dev and haven't applied for approval
I have a site on Vue with vue-router navigation which needs to work with google drive. I've set up the app, tokens uri in the google developer's console and it works fine on its own:
https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=668711006022-7igan4in4ob7ngtsmqjh8ld7j8hs5t16.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Ftwine.teivaz.com/auth&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive
But when it came to integrating to vue-router navigation I faced a problem. After making a request to the google ouath2 server it redirects me to a specified address with the token in url params like this:
http://twine.teivaz.com/auth#access_token=ya29.Ci8o1gdfpkN51F3yjAbW-v9r-JN9YD3ze5B2123rvv62KuFc5b1OgzF-9XQ&token_type=Bearer&expires_in=3600
I've came up with several solutions:
Set authorized redirect URIs to match the vue-router's format to simply read as parameter, like this:
http://twine.teivaz.com/#!/login/
But the google console does not allow me to do that giving a message
Invalid Redirect: http://twine.teivaz.com/#!/login/ cannot contain a fragment.
It seems that I won't be able to paste in google console my vue-readable URI from the first approach. Is it supposed to be like this or it's a bug in the console?
Capture token from url from default page. But in the vue-router I have a default redirect which drops all parameters:
TwineRouter.redirect({
'*': '/stories'
});
It should be there for all url without parameters.
Is there any way to parse the parameter before redirect occurs and maintain behaviour for all cases when there is no token in parameters?
Create another page that will simply save the token to cookies and redirect to the index. And set it up in the google console:
http://twine.teivaz.com/login.html
It seems that this option is a poor design but it might actually work.
Is it the best option among given? Is there anything I missed?
a bit too late I think, but you can use
mode: 'history'
in vue-router, this eliminates # thing from the URL.
http://router.vuejs.org/en/essentials/history-mode.html
To get a motionjpeg stream from a ip camerIn a native App I would add a RequestHeader to the GET-Request containing the credentials. In an ajax-call I also can append headers to get a single image.
But to show continuous images the only way seem to be using
<img src="url_to_mpjeg">
The webui of the camera is successfully doing the GET-call like this:
1. you enter the ui with a request to index.html, which needs credentials
2. any further request (like the GET request) automatically have the basic authentication injected by the browser
So I also tried calling another URL of the camera with authentication-header in advanced but this doesn't work in cordova. Every single request needs a manual authentication in the header, nothing is magically added to the headerfields.
I think the reason why it automatically works in the camera webui is because the cameras index.html and further requests are all from the same origin, but in my cordovaapp, the UI is coming from file://local somewhere.
Is there a way in javascript to call a jpeg stream with basic authentication?
As stated by the chromium team, images credentials does not work anymore
If you want to load some stream as mjpg or img with basic auth protected url use iframe instead.
<iframe src="you_stream_link"></iframe>
I try to build a multi-tenant SPA using Aurelia where the tenant is given as:
http://myapp.example.org/tenant1
http://myapp.example.org/tenant2
http://myapp.example.org/tenant3
How can I return the same index.html for all of these urls (while being able to extract the tenant in the SPA code for Oauth2 login)?
I have made similar AngularJs solutions but then I used a "trick" by implementing a Asp.net web api that accepted a {tenant} route. Is there a simple "all Javascript" Aurelia way of doing this?
The only way to "redirect" all those pages to index without changing the URL is by doing it in the server, with a URL rewrite. The thing you did in ASP.NET MVC was exactly that.
If you want to do that only with javascript, you'll need to redirect all those pages to index and pass the tenant as a parameter. For example:
location.href = location.host + "/?tenant=" + location.search;
The problem here is: by doing that, you'll really need all those tenant pages phisically, what I suppose it's not what you want.
There is another try: you can also make a default 404 page and then make that redirect from there, but you'll throw an 404 error to the client, what I don't think it's good at all.
So, if you're using IIS or any other server, you should just do a rewrite and everything is gonna be ok.
If you're using NodeJS or .NET you can see how to do it directly from the Aurelia's documentation.
http://aurelia.io/docs.html#configuring-push-state