Signature generation for UploadWidget

MyGinkgo

I have currently implemented the upload feature in our web app (Angular) using the official upload widget. I have created an uploadPreset that includes the signature and configured my code to generate a backend signature.

Below is the frontend code implementation:

javascript

this.myWidget = cloudinary.createUploadWidget(
  {
    cloudName: environment.cloudinaryName,
    apiKey: environment.cloudinaryApiKey,
    uploadPreset: environment.cloudinaryPreset,
    uploadSignatureTimestamp: serverConfig.data.timestamp,
    uploadSignature: serverConfig.data.signature,
    multiple: this.multiple,
    folder: this.folder,
    tags: this.tags,
    clientAllowedFormats: this.allowedFormats,
    cropping: this.cropping,
  },
  (error, result) => {
    if (!error && result && result.event === 'success') {
      console.log('Done! Here is the image info: ', result);
      this.cloudinaryInfo.emit(result.info);
    } else if (!!error) {
      console.error('Error during upload to media server', error);
    }
  },
);

And here is the backend implementation:

javascript

    return cloudinary.utils.api_sign_request({
        folder: my-ginkgo/${folder},
        source: 'uw',
        timestamp: timestamp,
        upload_preset: 'ml_default',
    }, config.cloudinary.secret);

The backend successfully generates the signature, and I can see in the console that it is being sent in the call made to the UploadWidget. However, I always receive a 401 Unauthorized error.

Backend API Response:

API RESPONSE

data: {
  signature: "2ca84baf14ecd807e739bf995d131594fc5a5452",
  timestamp: "1687454352"
}

message: "Cloudinary Signature updated"

UploadWidget Request:

PAYLOAD

folder: my-ginkgo/stefano.denti
upload_preset: ml_default
timestamp: 1687454352
source: uw
signature: 2ca84baf14ecd807e739bf995d131594fc5a5452
api_key: 621828836918614
file: (binario)

RESPONSE

{
    "error": {
        "message": "Invalid Signature 2ca84baf14ecd807e739bf995d131594fc5a5452. String to sign - 'folder=my-ginkgo/stefano.denti&source=uw&timestamp=1687454352&upload_preset=ml_default'."
    }
}

I hope for your help, thank you very much!

CloudinarySam

Hey @MyGinkgo! 👋

Based on the provided code and error message, it appears that there might be an issue with how the signature is generated or passed to the Cloudinary API. The error message suggests that the signature is invalid.

Here are a few things you can check to troubleshoot the issue:

1. Make sure the timestamp used for generating the signature on the backend matches the timestamp sent to the frontend. Ensure that the timestamps are in sync and represent the same value.
2. Verify that the signature is being generated correctly on the backend. Double-check the implementation of the cloudinary.utils.api_sign_request function and ensure that it is producing the expected signature. You can also try logging the string that is being signed to verify that it matches the one shown in the error message.
3. Check if the config.cloudinary.secret value is correct and corresponds to the Cloudinary API secret key associated with your account. Ensure there are no typos or missing characters in the secret key.
4. Ensure that the upload_preset value used in the backend signature generation matches the one specified in the frontend code (environment.cloudinaryPreset). Verify that the preset exists in your Cloudinary account and is configured correctly.
5. Confirm that the source value (uw) is supported and valid for your Cloudinary configuration. You can refer to the Cloudinary documentation or contact their support for more information on valid source values.

If you have verified these aspects and are still encountering issues, it may be helpful to provide additional information such as the versions of the Cloudinary SDKs you are using (both frontend and backend), any relevant error logs or messages, and any other relevant code that might be involved in the process.

MyGinkgo

Sam. thanks for the quick response

1. Make sure the timestamp used for generating the signature on the backend matches the timestamp sent to the frontend. Ensure that the timestamps are in sync and represent the same value.

Yes the timestamp is correct.

1. Verify that the signature is being generated correctly on the backend. Double-check the implementation of the cloudinary.utils.api_sign_request function and ensure that it is producing the expected signature. You can also try logging the string that is being signed to verify that it matches the one shown in the error message.

Yes the signature generated match the signature logged in the error.

1. Check if the config.cloudinary.secret value is correct and corresponds to the Cloudinary API secret key associated with your account. Ensure there are no typos or missing characters in the secret key.

Yes is correct

1. Ensure that the upload_preset value used in the backend signature generation matches the one specified in the frontend code (environment.cloudinaryPreset). Verify that the preset exists in your Cloudinary account and is configured correctly.

Yes the preset exist, configuration :

1. Confirm that the source value (uw) is supported and valid for your Cloudinary configuration. You can refer to the Cloudinary documentation or contact their support for more information on valid source values.

From what I see in the payload the video upload widget sends "uw" source

epasos

Hi,

Thanks for contacting us.

Just to indicate that the parameters being signed and the data used in the Upload Widget should be consistent (i.e., the variables that where the issue could potentially be coming from are either from the items below):

return cloudinary.utils.api_sign_request({
...
folder: my-ginkgo/${folder},    // ${folder} may not be the same as what is post through the upload widget
timestamp: timestamp,           // ${folder} may not be the same as what is post through the upload widget
...
}, config.cloudinary.secret);

Please take a look and see if that helps to resolve the issue.