Skip to main content

Invalid Signature - String to sign - Upload Widget

Zachary Hurst

Hi,

I can't find what I need in the documentation or in any other posts. You might even recognize some of the code from other examples and places.

Server Side:

router.post('/cloudinary-info', ensureAuthenticated, (req, res) => {
    var data = req.body;

    dotenv.config();
   
    var apiSecret = process.env.CLOUDINARY_API_SECRET;
    var apiKey = process.env.CLOUDINARY_API_KEY;
    var cloudName = process.env.CLOUD_NAME;
    var preset = process.env.CLOUDINARY_API_PRESET;
    data.upload_preset = preset;
   
    if (data.resource_type) {
        delete data.resource_type;
    }
 
    if (!data.timestamp) {
        data.timestamp = new Date().getTime();
    }

    var signature = cloudinary.utils.api_sign_request(data, apiSecret),
        timestamp = data.timestamp;

    var response = { signature, apiKey, cloudName, preset, timestamp };
   
    res.json(response);
});
 
Client Side:
        $.post('/images/cloudinary-info', {})
            .then(cInfo => {
                widget = cloudinary.createUploadWidget({
                    apiKey: cInfo.apiKey,
                    cloudName: cInfo.cloudName,
                    folder: 'avatars',
                    multiple: false,
                    overwrite: true,
                    public_id: theLoggedInUsersID,
                    uploadPreset: cInfo.preset,
                    uploadSignature: cInfo.signature
                }, (error, result) => {
                    if (result.event == 'success') {
                        /*
                            Do the things!!!!!!!!!!!!!!!!
                        */
                        widget.close();
                    }
                });
            });
 
Additionally, I have tried passing the uploadSignature property: the ajax call to
/images/cloudinary-info because I can see that it is a function or a string. At this point I am very lost, please help me!
 
0

Comments

3 comments

Date Votes
  • Wissam Khalili
    Edited

    Hi Zachary,

    You would need to pass the params_to_sign from the widget to your server-side/backend, and use these exact params to generate the signature (e.g use the exact timestamp that is passed in params_to_signand not create your own timestamp). You could read more about it in the following guide:
    https://support.cloudinary.com/hc/en-us/articles/203817991-How-to-generate-a-Cloudinary-signature-on-my-own-


    If you would like to provide your cloud name, I can further investigate the logs and see the exact error you are receiving, to do so please raise a support ticket with us directly by filling out the form at this link.

    Thanks,

    Wissam

    0
  • Zachary Hurst
    Edited

    Hey Wissam,

    Sorry to be wasting your time on this however, I'm still stuck, could you provide a code example? I admit I'm not the best when it comes to talking about code, I do best when I have something to poke at. I changed where and how I generate the timestamp and tried using the uploadSignatureTimestamp param as well.  I think that's probably where I'm not understanding. I'm ready to facepalm over the thing I'm missing.

    Updated Server Side:

    router.post('/cloudinary-info', ensureAuthenticated, (req, res) => {
        var data = req.body;

        dotenv.config();
       
        var apiSecret = process.env.CLOUDINARY_API_SECRET;
        var apiKey = process.env.CLOUDINARY_API_KEY;
        var cloudName = process.env.CLOUD_NAME;
        var preset = process.env.CLOUDINARY_API_PRESET;

        data.upload_preset = preset;
       
        if (data.resource_type) {
            delete data.resource_type;
        }

        var timestamp = data.timestamp;

        var signature = cloudinary.utils.api_sign_request(data, apiSecret);

        var response = { signature, apiKey, cloudName, preset, timestamp };
       
        res.json(response);
    });
     
    Client Side:
    var timestamp = Math.round((new Date).getTime()/1000);
           
    $.post('/images/cloudinary-info', { timestamp })
        .then(cInfo => {
            console.log(timestamp == cInfo.timestamp);

            widget = cloudinary.createUploadWidget({
                apiKey: cInfo.apiKey,
                cloudName: cInfo.cloudName,
                folder: 'avatars',
                multiple: false,
                overwrite: true,
                public_id: theLoggedInUsersID,
                uploadPreset: cInfo.preset,
                uploadSignature: cInfo.signature,
                uploadSignatureTimestamp: cInfo.timestamp
            }, (error, result) => {
                console.log(result)
                if (result.event == 'success') {
                    /*
                        Do the success things
                    */
                    widget.close();
                }
            });
        });
     
    Cloud Name: propoint
    0
  • Wissam Khalili

    Hi Zachary,

    I have checked the errors that you are getting:

    Invalid Signature 67c2345ce72940454e91e0cf6436de385157efe6. 
    String to sign - 
    'folder=avatars&overwrite=true&public_id=60d3524b11bd2e61c477621c&source=uw&timestamp=1635964386&upload_preset=izjxtwpe'.

    I see that the client-side is sending only the timestamp to the server-side and the server-side adds the upload_preset in order to create the signature. This is not enough, you will need to send the following parameters as well { folder, overwrite,public_id,source }.

    Once you make your call, in case of a failure you could catch the error and you could exactly what should be added in order to create the signature.

    You could see in the documentation that all parameters added to the method call should be included except: file, cloud_name, resource_type and your api_key.

    https://cloudinary.com/documentation/upload_images#generating_authentication_signatures

    Hope this is helpful!

    Thanks,

    Wissam

     

    0

Post is closed for comments.

Didn't find what you were looking for?

New post