Merge pull request #77 from prasoon0909/fix/rm-authentication-url-logic

Fix/rm authentication url logic

Author: imagekitio

README.md

@@ -14,6 +14,12 @@ Javascript SDK for [ImageKit](https://imagekit.io/) provides URL generation for
 
 ImageKit is complete media storage, optimization, and transformation solution that comes with an [image and video CDN](https://imagekit.io/features/imagekit-infrastructure). It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
 
+## Changelog - SDK Version 2.0.0
+### Breaking changes
+**1. Authentication Process Update:**
+* Previously, when using client side file upload, the SDK required the `publicKey` and `authenticationEndpoint` parameters during SDK initialization to fetch security parameters (`signature`, `token`, and `expire`).
+* In version 2.0.0, we've updated the authentication process for the SDK. As a user of the SDK, you are now responsible for generating the security parameters (`signature`, `token`, and `expire`) yourself. This means you no longer need to provide the `authenticationEndpoint`. When using the SDK's upload method, make sure to pass these security parameters explicitly along with other [upload options](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload). For guidance on generating these security parameters, please refer to the documentation available [here](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload).
+
 ## Installation
 
 ### Using npm
@@ -59,12 +65,11 @@ var imagekit = new ImageKit({
 });    
 ```
 
-`publicKey` and `authenticationEndpoint` parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers
+`publicKey` parameter is required if you want to use the SDK for client-side file upload. You can get this parameter from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers
 ```
 var imagekit = new ImageKit({
     publicKey: "your_public_api_key",
     urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
-    authenticationEndpoint: "http://www.yourserver.com/auth",
 });    
 ```
 
@@ -261,9 +266,7 @@ The SDK provides a simple interface using the `.upload()` method to upload files
 
 The `upload()` method requires mandatory `file` and the `fileName` parameter. In addition, it accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload).
 
-Also, ensure that you have specified `authenticationEndpoint` during SDK initialization. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields, i.e. `signature`, `token`, and `expire`. In addition, the SDK adds a query parameter `t` with a random value to ensure that the request URL is unique and the response is not cached in [Safari iOS](https://github.com/imagekit-developer/imagekit-javascript/issues/59). Your backend can ignore this query parameter.
-
-[Learn how to implement authenticationEndpoint](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint) on your server.
+Also before making an upload request, please ensure you have generated mandatory security parameters: `signature`, `token`, and `expire`. To generate these security parameters, refer to the [documentation here](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload). Obtain the parameters using a secure method and pass them, along with the mandatory `file` and `fileName` parameters, to the `upload()` method.
 
 You can pass other parameters supported by the ImageKit upload API using the same parameter name as specified in the upload API documentation. For example, to specify tags for a file at the time of upload, use the `tags` parameter as specified in the [documentation here](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload).
 
@@ -277,13 +280,12 @@ You can pass other parameters supported by the ImageKit upload API using the sam
 <script type="text/javascript" src="../dist/imagekit.js"></script>
 
 <script>
-    /* SDK initilization
-     authenticationEndpoint should be implemented on your server. Learn more here - https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint
+    /*  
+    SDK initilization
     */
     var imagekit = new ImageKit({
         publicKey: "your_public_api_key",
         urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
-        authenticationEndpoint: "http://www.yourserver.com/auth"
     });
     
     // Upload function internally uses the ImageKit.io javascript SDK
@@ -295,6 +297,9 @@ You can pass other parameters supported by the ImageKit upload API using the sam
             file: file.files[0],
             fileName: "abc1.jpg",
             tags: ["tag1"],
+            token: 'generated_token',
+            signature: 'generated_signature',
+            expire: 'generated_expire',
             extensions: [
                 {
                     name: "aws-auto-tagging",
@@ -311,6 +316,9 @@ You can pass other parameters supported by the ImageKit upload API using the sam
             file: file.files[0],
             fileName: "abc1.jpg",
             tags: ["tag1"],
+            token: 'generated_token',
+            signature: 'generated_signature',
+            expire: 'generated_expire',
             extensions: [
                 {
                     name: "aws-auto-tagging",
@@ -352,6 +360,9 @@ imagekit.upload({
     file: file.files[0],
     fileName: "abc1.jpg",
     tags: ["tag1"],
+    token: 'generated_token',
+    signature: 'generated_signature',
+    expire: 'generated_expire',
     extensions: [
         {
             name: "aws-auto-tagging",
@@ -375,6 +386,9 @@ var response = await imagekit.upload({
     file: file.files[0],
     fileName: "abc1.jpg",
     tags: ["tag1"],
+    token: 'generated_token',
+    signature: 'generated_signature',
+    expire: 'generated_expire',
     extensions: [
         {
             name: "aws-auto-tagging",
@@ -394,6 +408,9 @@ try {
         file: file.files[0],
         fileName: "abc1.jpg",
         tags: ["tag1"],
+        token: 'generated_token',
+        signature: 'generated_signature',
+        expire: 'generated_expire',
         extensions: [
             {
                 name: "aws-auto-tagging",
@@ -407,4 +424,5 @@ try {
 
     // {'content-type': 'application/json', 'x-request-id': 'ee560df4-d44f-455e-a48e-29dfda49aec5'}
     console.log(response.$ResponseMetadata.headers);
-}
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "imagekit-javascript",
-    "version": "1.5.5",
+    "version": "2.0.0",
     "description": "Javascript SDK for using ImageKit.io in the browser",
     "main": "dist/imagekit.cjs.js",
     "module": "dist/imagekit.esm.js",

samples/sample-app/server/server.js

@@ -3,7 +3,6 @@ const router = express.Router();
 const cors = require('cors');
 const ImageKit = require('imagekit');
 const uuid = require('uuid');
-const fs = require('fs');
 const path = require('path');
 
 const pugTemplatePath = path.join(__dirname, "../views/index.pug");
@@ -21,7 +20,6 @@ const startServer = (port = 3000, PUBLIC_KEY, PRIVATE_KEY, URL_ENDPOINT) => {
                 urlEndpoint: URL_ENDPOINT
             });
 
-    
             router.get("/auth", (req, res) => {
                 try {
                     const token = req.query.token || uuid.v4();

samples/sample-app/views/index.pug

@@ -24,7 +24,6 @@ html
                 var imagekit = new ImageKit({
                     publicKey: "!{publicKey}",
                     urlEndpoint: "!{urlEndpoint}",
-                    authenticationEndpoint: "!{authenticationEndpoint}"
                 });
 
                 window.imagekit = imagekit;
@@ -34,6 +33,7 @@ html
                     e.preventDefault();
                     var file = document.getElementById("file1");
                     var fileSize = file.files[0].size;
+                    var AUTH_INVALID_RESPONSE = "Invalid response from authenticationEndpoint. The SDK expects a JSON response with three fields i.e. signature, token and expire."
                     var statusEl = document.getElementById("status");
                     statusEl.innerHTML = "Uploading...";
 
@@ -50,41 +50,72 @@ html
                         }
                     });
 
-                    imagekit.upload({
-                        xhr: customXHR, // Use this if you want to track upload progress
-                        file : file.files[0],
-                        fileName : file.files[0].name || "test_image.jpg",
-                        tags : ["test_tag_1"],
-                        //- extensions: [
-                        //-     {
-                        //-         name: "aws-auto-tagging",
-                        //-         minConfidence: 80,
-                        //-         maxTags: 10
-                        //-     }
-                        //- ],
-                    }, function(err, result) {
-                        if (err) {
-                            statusEl.innerHTML = "Error uploading image. "+ err.message; 
-                            console.log(err) 
-                        } else {
-                            statusEl.innerHTML = "File Uploaded";
-                            var sampleTransformations = [{ HEIGHT: 300, WIDTH: 400}];
-                            srcUrl = result.url;
-                            transformedURL = imagekit.url({
-                                src: srcUrl,
-                                transformation : sampleTransformations
-                            });
+                    // Generating security parameters using authenticationEndpoint
+                    const securityParametersRequest = new XMLHttpRequest();
+                    securityParametersRequest.timeout = 60000;
+                    var urlObj = new URL("!{authenticationEndpoint}");
+                    securityParametersRequest.open('GET', urlObj.toString());
+                    securityParametersRequest.ontimeout = function (e) {
+                        console.log(e.message);
+                        return statusEl.innerHTML = "Timeout generating security parameters. "+ e.message
+                    };
+                    securityParametersRequest.onerror = function (e) {
+                        console.log(e.message)
+                        return statusEl.innerHTML = "Request to authenticationEndpoint failed due to network error."+ e.message
+                    }
+                    securityParametersRequest.onload = () => {
+                        if(securityParametersRequest.status === 200) {
+                            var securityParametersObj = JSON.parse(securityParametersRequest.response)
+
+                            if(!securityParametersObj || !securityParametersObj.token || !securityParametersObj.signature || !securityParametersObj.expire) {
+                                return statusEl.innerHTML = AUTH_INVALID_RESPONSE;
+                            }
+                            
+                            // Uploading image
+                            imagekit.upload({
+                                xhr: customXHR, // Use this if you want to track upload progress
+                                file : file.files[0],
+                                fileName : file.files[0].name || "test_image.jpg",
+                                tags : ["test_tag_1"],
+                                token: securityParametersObj.token,
+                                signature: securityParametersObj.signature,
+                                expire: securityParametersObj.expire,
+                                //- extensions: [
+                                //-     {
+                                //-         name: "aws-auto-tagging",
+                                //-         minConfidence: 80,
+                                //-         maxTags: 10
+                                //-     }
+                                //- ],
+                            }, function(err, result) {
+                                if (err) {
+                                    statusEl.innerHTML = "Error uploading image. "+ err.message; 
+                                    console.log(err) 
+                                } else {
+                                    statusEl.innerHTML = "File Uploaded";
+                                    var sampleTransformations = [{ HEIGHT: 300, WIDTH: 400}];
+                                    srcUrl = result.url;
+                                    transformedURL = imagekit.url({
+                                        src: srcUrl,
+                                        transformation : sampleTransformations
+                                    });
 
-                            var orig_img = document.querySelector("#orig_image > p > img");
-                            var trans_img = document.querySelector("#trans_image > p > img");
+                                    var orig_img = document.querySelector("#orig_image > p > img");
+                                    var trans_img = document.querySelector("#trans_image > p > img");
 
-                            orig_img.setAttribute("src", srcUrl);
-                            trans_img.setAttribute("src", transformedURL);
+                                    orig_img.setAttribute("src", srcUrl);
+                                    trans_img.setAttribute("src", transformedURL);
 
-                            var el  = document.getElementById('images')
-                            el.setAttribute("style", "");
+                                    var el  = document.getElementById('images')
+                                    el.setAttribute("style", "");
+                                }
+                            });
+                        }  else {
+                            return statusEl.innerHTML = AUTH_INVALID_RESPONSE;
                         }
-                    });
+                    }
+
+                    securityParametersRequest.send();
                 }
             } catch(ex) {
                 console.log(ex);

src/constants/errorMessages.ts

@@ -15,4 +15,7 @@ export default {
     help: "",
   },
   INVALID_UPLOAD_OPTIONS: { message: "Invalid uploadOptions parameter", help: "" },
+  MISSING_SIGNATURE: { message: "Missing signature for upload. The SDK expects token, sginature and expire for authentication.", help: ""},
+  MISSING_TOKEN: { message: "Missing token for upload. The SDK expects token, sginature and expire for authentication.", help: ""},
+  MISSING_EXPIRE: { message: "Missing expire for upload. The SDK expects token, sginature and expire for authentication.", help: ""},
 };

src/interfaces/ImageKitOptions.ts

@@ -4,6 +4,5 @@ export interface ImageKitOptions {
   urlEndpoint: string;
   sdkVersion?: string;
   publicKey?: string;
-  authenticationEndpoint?: string;
   transformationPosition?: TransformationPosition;
-}
+}

src/interfaces/UploadOptions.ts

@@ -13,6 +13,20 @@ export interface UploadOptions {
    *      Pass the full URL, for example - https://www.example.com/rest-of-the-image-path.jpg.
    */
   file: string | Blob | File;
+  /**
+   * HMAC-SHA1 digest of the token+expire using your ImageKit.io private API key as a key. This should be in lowercase.
+   * Warning: Signature must be calculated on the server-side. This field is required for authentication when uploading a file from the client-side.
+   */
+  signature: string;
+  /**
+   * A unique value generated by the client, which will be used by the ImageKit.io server to recognize and prevent subsequent retries for the same request. We suggest using V4 UUIDs, or another random string with enough entropy to avoid collisions.
+   * Note: Sending a value that has been used in the past will result in a validation error. Even if your previous request resulted in an error, you should always send a new value for this field.
+   */
+  token: string;
+  /**
+   * The time until your signature is valid. It must be a Unix time in less than 1 hour into the future. It should be in seconds.
+   */
+  expire: number;
   /**
    * The name with which the file has to be uploaded.
    * The file name can contain:

src/upload/index.ts

@@ -19,24 +19,40 @@ export const upload = (
     return;
   }
 
-  if (!options.authenticationEndpoint) {
-    respond(true, errorMessages.MISSING_AUTHENTICATION_ENDPOINT, callback);
-    return;
-  }
-
   if (!options.publicKey) {
     respond(true, errorMessages.MISSING_PUBLIC_KEY, callback);
     return;
   }
 
+  if(!uploadOptions.token) {
+    respond(true, errorMessages.MISSING_TOKEN, callback)
+    return
+  }
+
+  if(!uploadOptions.signature) {
+    respond(true, errorMessages.MISSING_SIGNATURE, callback)
+    return
+  }
+
+  if(!uploadOptions.expire) {
+    respond(true, errorMessages.MISSING_EXPIRE, callback)
+    return
+  }
+
   var formData = new FormData();
   let key: keyof typeof uploadOptions;
   for (key in uploadOptions) {
     if (key) {
       if (key === "file" && typeof uploadOptions.file != "string") {
         formData.append('file', uploadOptions.file, String(uploadOptions.fileName));
       } else if (key === "tags" && Array.isArray(uploadOptions.tags)) {
-        formData.append('tags', uploadOptions.tags.join(","));
+        formData.append('tags', uploadOptions.tags.join(",")); 
+      } else if (key === 'signature') {
+        formData.append("signature", uploadOptions.signature);
+      } else if (key === 'expire') {
+        formData.append("expire", String(uploadOptions.expire));
+      } else if (key === 'token') {
+        formData.append("token", uploadOptions.token);
       } else if (key === "responseFields" && Array.isArray(uploadOptions.responseFields)) {
         formData.append('responseFields', uploadOptions.responseFields.join(","));
       } else if (key === "extensions" && Array.isArray(uploadOptions.extensions)) {
@@ -52,5 +68,5 @@ export const upload = (
 
   formData.append("publicKey", options.publicKey);
 
-  request(xhr, formData, { ...options, authenticationEndpoint: options.authenticationEndpoint }, callback);
+  request(xhr, formData, callback);
 };