Child Item

Missing parameter: client_id for lwc

Im working on a lwc where id like to embed a signing process in iframe, I was able to successfully retrieve sign URL, but when I try to use it on iframe I got following error, at which step do I need to set my client id?
So far I used this with client id in request body

String apiUrl = 'https://api.hellosign.com/v3/signature_request/create_embedded_with_template';
and

request.setEndpoint('https://api.hellosign.com/v3/embedded/sign_url/' + signatureId);

with just signature id in request body

Also I have a problem setting body for my request, I used this class to generate json string, but when I use this approach I get error({"error":{"error_msg":"No template_id or template_ids specified","error_path":"template_id","error_name":"bad_request"}})

HelloSignJSON.Signing_options so = new HelloSignJSON.Signing_options();

so.default_type = 'draw';

so.draw = true;

so.phone = true;

so.type = true;

so.upload = true;

HelloSignJSON.Signers signer = new HelloSignJSON.Signers();

signer.role = 'Lead.Customer';

signer.name = 'Rostyslav';

signer.email_address = 'popov.rst@gmail.com';

List<HelloSignJSON.Signers> signers = new List<HelloSignJSON.Signers>{signer};

HelloSignJSON hsj = new HelloSignJSON();

hsj.template_ids = new List<String>{'90c43afee504f24a2dcd67ab7991f8f3f5900ef3'};

hsj.client_id = 'CLIENT_ID';

hsj.subject = 'Embedded Subject';

hsj.message = 'Embedded message';

hsj.signing_options = so;

hsj.test_mode = true;

hsj.signers = signers;

String requestBody = JSON.serialize(hsj);

Find more posts tagged with

Comments

DB-Des

Hi @rostyslavpopov

It appears as though the JSON serialization process in your code is producing an unexpected result — the List<String> is somehow being serialized into a JSON object rather than a JSON array, which is what the API expects.

We would recommend reviewing your code to ensure the template IDs are being sent in an array and not a JSON object.

rostyslavpopov

and what about the first problem with missing client id? I figured out that I can put client id into URL and it will work, but this is not secure, right? So I need to know how to make it secure

DB-Des

Hi @rostyslavpopov

If the Client ID is a required parameter for the endpoint(s) you are using, it must be included to ensure proper functionality.

Including the Client ID in your requests is both standard practice and safe. The Dropbox Sign API is designed with robust security measures in place to protect data and ensure the integrity of all interactions. Rest assured, we wouldn’t request this information if it posed a security risk.

eappsiadvancenow123

@DB-DesI'm passing the following request but still I'm getting the same error:

{"client_id":"MY_CLIENT_ID","template_ids":["xyz"],"signers":"[{"role":"Lead","name":"Test Template","email_address":"test@mycompany.com"}]"}

the above request has template_ids in JSON array format only but still the API response is {"error":{"error_msg":"No template_id or template_ids specified","error_path":"template_id","error_name":"bad_request"}}

eappsiadvancenow123

@rostyslavpopovHow did you escape from this issue?

rostyslavpopov

Yes, using apex approach i needed to modify URL by placing client id as first or last URL argument. But I switched to JS SKD approach and its easier in there and provides better user experience

DB-Des

Hi @eappsiadvancenow123,

It would appear as though the payload request you are sending to the API is not being formed properly. Could you please share a full code snippet of the code being used to generate the payload request? As well as the language, SDK, or library being used to generate and send the request.

rostyslavpopov

ur not passing the email template
if your endpoint is:

String apiUrl = 'https://api.hellosign.com/v3/signature_request/create_embedded_with_template';

Then you should paste your template id which you can get on hellosign.
I wasn't able to use an apex class that I can later serialize and use as request body, It would throw same error as you shown for me, not sure why because template id was in there, here's what i used:

String requestBody = 'client_id=' + EncodingUtil.urlEncode(clientId, 'UTF-8') + '&template_ids[]=' + EncodingUtil.urlEncode(templateId, 'UTF-8') + '&subject=' + EncodingUtil.urlEncode('Purchase Order', 'UTF-8') + '&message=' + EncodingUtil.urlEncode('Glad we could come to an agreement.', 'UTF-8') + '&signers[0][role]=' + EncodingUtil.urlEncode('Lead.Customer', 'UTF-8') + '&signers[0][name]=' + EncodingUtil.urlEncode(Lead.Name, 'UTF-8') + '&signers[0][email_address]=' + EncodingUtil.urlEncode(email, 'UTF-8');

This is annoying to add new fields into, as it would be in form of:

if (!String.isEmpty(lead.Email)) { requestBody += '&custom_fields[0][name]=Lead.Email&custom_fields[0][value]=' + EncodingUtil.urlEncode(lead.Email, 'UTF-8'); } if (!String.isEmpty(lead.Company)) { requestBody += '&custom_fields[1][name]=Lead.Company&custom_fields[1][value]=' + EncodingUtil.urlEncode(lead.Company, 'UTF-8'); }

etc, but i believe you can try to use another class for your custom fields and then add its serialized part to the body from previous sample, i think it would be a more convenient approach although i didn't try it.
Are you implementing this for apex lwc? If so you can reach out to me through email and ill be able to provide answers with more details!

eappsiadvancenow123

@rostyslavpopovThank you so much for your help here! I was able to get the sign url successfully.

Probably one last question, how are you opening embedded window on your site? When I'm trying to open it in incognito window by appending client_id in url, it gives me this error(attached screenshot).

I have provided "my.salesforce-sites.com" under Domain in my App.

Your help in this is very much appreciated!

rostyslavpopov

can you provide more details on what are you trying to achieve please?

eappsiadvancenow123

I have created a site in salesforce and i want to open embedded signature window on my site. I tried to import JS file available on github in my LWC component but that doesn't work so I'm trying to use iframe and under the iframe, my URL is (sign URL + client_id + skip_domain_verification=1) but its not working.

It gives me invalid URL when i open in iframe but same URL works in incognito window or any other window.

Your help is very much appreciated!

rostyslavpopov

okay so for this you need to do the js lib part.
Go to https://www.jsdelivr.com/package/npm/hellosign-embedded , there will be an URL in source, go to that URL, copy its content and create a JS file. Upload this file(one file only, no folders) as public Static resource with a name DropboxSign. Then import and load it in your JS file:

import dropboxSign from '@salesforce/resourceUrl/DropboxSign'; loadScript(this, dropboxSign) .then(() => { // console.log('dropbox sign loaded'); }) .catch(error => { console.error('Error loading dropbox sign:' , error) })

Loading can be put into connected callback. Then when its time for a sign you need to do a following:

const client = new HelloSign({ clientId: this.clientId, }); client.open(result, { skipDomainVerification: true })

eappsiadvancenow123

Thank you very much for your swift responses!

I'm not sure what I'm doing wrong in the above mentioned steps but the embedded window is not opening. Here is the steps i followed:

I went to this site(attached screenshot) and copied the content and saved it as JS file.
Uploaded this file as Public static resource(the only file)
Imported this file into LWC by
import HelloSign from '@salesforce/resourceUrl/DropBoxSign';
Loaded this static resource in connected callback
Promise.all([
loadScript(this, HelloSign)
]).then(() => {
console.log('JS and Style Resources loaded successfully');

}).catch((error)=>{
console.log('Error occurred while loading JS resources'+ error);
I have a button "E-sign" on the site, when clicking on that button, I'm calling a function and this is function body:
createEmbeddedSignatureRequest is apex method which will return sign url.
createEmbeddedSignatureRequest({leadId: this.leadId}).then(result=>{
this.signUrl = result;
console.log('Success createEmbeddedSignatureRequest:'+ this.signUrl);
}).catch(error=>{
console.log('Error occurred in createEmbeddedSignature'+ JSON.stringify(error));
})
setTimeout(()=>{
try{
const client = new HelloSign({ clientId: 'myClientId' });
client.open(this.signUrl, { skipDomainVerification: true });
}
catch(e){
console.log('Error occurred while opening embedded:'+ JSON.stringify(e));
}
},5000);

@rostyslavpopovDo you see any missing item here? Thank you soooooooo much for helping me in this.

rostyslavpopov

    submitApplication() {
        const client = new HelloSign({
            clientId: this.clientId,
          });
        // Logic for submitting the application
        // console.log('submit');

        if(this.hasError == false){
            generateEmbeddedSignUrl({recordId: this.recordId, leadJson: this.getLeadData()})
        .then(result => {
            // console.log('result: ' + result);
            this.iframeUrl = result;
            
            client.open(result, {
                skipDomainVerification: true
            })
        })
        .catch(error => {
            console.log('error: ' + JSON.stringify(error));
        })

        client.on('sign', (data) =>{
            // console.log('signed!');
            this.signed = true;

            this.sendDataToEverflow('4')
        })
        client.on('close', () => {
            // console.log('closed');
            if(this.signed == true){
                let event = new CustomEvent('leadsigned', {detail: this.recordId})
                this.dispatchEvent(event);
                updateSigned({recordId: this.recordId})
            }
        })
            
            
        }
    }

i see that in this example you used 'this.signUrl' for client.open() but in new HelloSign() you used a text, and not a variable with clientId value, if its just a sample code and in actual code that is replaced with client id value then Im not sure whats wrong, I can share my piece that's called when a button is pressed:
if this doesn't help id advise you opening an another thread and ask a dropbox developer to help with their library usage!

eappsiadvancenow123

I think in my code, the line of code which is creating the problem is this:

const client = new HelloSign({ clientId: this.clientId, });

When I'm checking in the console, it gives me an error: d.default is not a constructor.

I think its not understanding when I'm creating the instance of HelloSign class.

@rostyslavpopovIn your code, you are also assigning iframeURL, are you trying with iframe as well? If yes, does that work for you?

eappsiadvancenow123

@rostyslavpopovI'm able to figure out why it was not opening the embedded signature. because in my Import alias, i have given "HelloSign" name and there is same class being called so it might be creating confusion for the system.

I wrote:

import HelloSign from '@salesforce/resourceUrl/DropBoxSign';

and then i was initiating like:

const client = new HelloSign({ clientId: this.clientId, });

Once again, thank you very much for your help in this. You're truly generous. I can't thank enough for helping me out in this.

rostyslavpopov

iframe didnt work for me, because when you open this in frame, you cant check for events like sign, close etc and you cant close a modal or smth when user signs, it n seeds to be a separate button but native close button is still present and this confuses user