Fixes in new TikTok integration

server/README.md

@@ -30,8 +30,10 @@ You'll need an API Key to upload content on TikTok.
      in the "Credentials" tab
    - `clientSecret`: same as above, but for the Client Secret
    - `denoUrl`: the URL where the Deno project is deployed. Put it without "/"
-   - `sourceUrl`: the URL where your image-converter webpage is located. Put it
-     without "/"
+   - `sourceUrl`: the URL where your image-converter webpage is located. Put
+     only the origin, without the "/"
+     - `oauthLocation`: the URL where the "oauth.html" file of image-converter
+       is located
 8. Save the values. Copy again the URL of your Deno project, and add it where
    required in the TikTok form.
 
@@ -45,18 +47,35 @@ You'll need an API Key to upload content on TikTok.
 12. Now click on the "Verify" button of the "Content Posting API" card.
 13. Choose "sandbox1" from the "URL properties for" select, and click on "Verify
     new property"
-14. Choose "URL prefix", write again the URL of the Deno Deploy server (this
-    time, add a "/"), and press on "Verify". Download the file.
+14. Choose "URL prefix", write the same URL you've put in `oauthLocation`
 15. Go back to the Deno Deploy project, and add two new environment values:
     - `tiktokVerificationFileName`: the name of the file you've downloaded (with
       also the extension)
     - `tiktokVerificationFileContent`: the content of the file you've downloaded
 16. Save the values. Now verify the URL on the TikTok page.
 17. In the Sandbox settings, login with your TikTok account.
 
-### Compatibility on image-converter
+### Setup on image-converter
 
 You are now ready to use the image-converter integration to TikTok!
 
 18. On image-converter, open the settings.
 19. Write the Deno URL (with the final "/") in the "TikTok integration" card
+
+## Server endpoints
+
+| Endpoint | Search parameters                                                                | Body                 | Method | Description                                                                                          |
+| -------- | -------------------------------------------------------------------------------- | -------------------- | ------ | ---------------------------------------------------------------------------------------------------- |
+| getId    | -                                                                                | -                    | GET    | Obtain a UUID for the next requests                                                                  |
+| upload   | position [the number of the file, from 1 to 36]</br>id [the UUID provided above] | The image to upload  | POST   | Upload an image to the server                                                                        |
+| fetch    | position [the number of the file, from 1 to 36]</br>id [the UUID provided above] | -                    | GET    | Get an image that was previously uploaded to the server                                              |
+| auth     | state [the State parameter for the request]                                      | -                    | GET    | Start the authentication process. The webpage will redirect the user to TikTok's authentication flow |
+| post     | -                                                                                | `PostRequest` object | POST   | Send to the server the request to upload the content TikTok                                          |
+
+### PostRequest Object:
+
+- `id`: the UUID used for photo uploading (String)
+- `code`: the TikTok authentiaction code (String)
+- `description`: the post description/caption (String)
+- `title`: the post title (String)
+- `thumbnail`: the image that needs to be marked as thumbnail (Number)

server/server.ts

@@ -122,7 +122,7 @@ Deno.serve(async (req) => {
         case "auth": { // Start the authentication process using OAuth
             const state = new URLSearchParams(req.url.substring(req.url.indexOf("?") + 1)).get("state");
             if (!state) return autoResponse({ body: "Missing fields", status: 40 })
-            return autoResponse({ body: `<!DOCTYPE html><body><script>window.location.href = "https://www.tiktok.com/v2/auth/authorize?client_key=${Deno.env.get("clientKey")}&redirect_uri=${encodeURIComponent(Deno.env.get("sourceUrl") + "/oauth.html")}&state=${encodeURIComponent(state)}&response_type=code&scope=${encodeURIComponent("video.publish,video.upload,user.info.basic,user.info.basic")}"</script></body>`, type: "text/html" })
+            return autoResponse({ body: `<!DOCTYPE html><body><script>window.location.href = "https://www.tiktok.com/v2/auth/authorize?client_key=${Deno.env.get("clientKey")}&redirect_uri=${encodeURIComponent(Deno.env.get("oauthLocation"))}&state=${encodeURIComponent(state)}&response_type=code&scope=${encodeURIComponent("video.publish,video.upload,user.info.basic,user.info.basic")}"</script></body>`, type: "text/html" })
         }
         case "post": { // Send the request to post the content to TikTok servers
             if (req.method !== "POST") return autoResponse({ body: "Endpoint available only with POST request.", status: 405 });
@@ -133,7 +133,7 @@ Deno.serve(async (req) => {
                         "Content-Type": "application/x-www-form-urlencoded"
                     },
                     method: "POST",
-                    body: `client_key=${Deno.env.get("clientKey")}&client_secret=${Deno.env.get("clientSecret")}&code=${json.code}&grant_type=authorization_code&redirect_uri=${encodeURIComponent(Deno.env.get("sourceUrl") + "/oauth.html")}`
+                    body: `client_key=${Deno.env.get("clientKey")}&client_secret=${Deno.env.get("clientSecret")}&code=${json.code}&grant_type=authorization_code&redirect_uri=${encodeURIComponent(Deno.env.get("oauthLocation"))}`
                 });
                 const tokenJson = await tokenRequest.json();
                 if (tokenRequest.status === 200) {

src/lib/ImageEditing/CanvasRender.svelte

@@ -125,7 +125,6 @@
     onMount(() => {
         updateView();
         window.onmessage = (msg) => {
-            console.log(msg);
             if (
                 msg.origin === window.location.origin &&
                 msg.data.state === userState
@@ -361,7 +360,11 @@
                     })
                 ).status === 200
             )
-                TikTokProgress.set(2); // Successful
+                TikTokProgress.set(2);
+            else
+                alert(
+                    "An error occurred while sending the post request to TikTok. Make sure that Deno Deploy is correctly set up.",
+                );
             conversionProgress.set(undefined);
         }
     });