VueJS + Gravity Forms API

Question

I'm looking at integrating a VueJS project with Gravity Forms, however I don't know how to trigger the GF encryption require by their API from the VueJS project?

As outlined below, the signature needs to be calculated first, before values are attached and sent to the GF API.

function CalculateSig(stringToSign, privateKey){
//calculate the signature needed for authentication
var hash = CryptoJS.HmacSHA1(stringToSign, privateKey);
var base64 = hash.toString(CryptoJS.enc.Base64);
return encodeURIComponent(base64);
}

//set variables
var d = new Date;
var expiration = 3600; // 1 hour,
var unixtime = parseInt(d.getTime() / 1000);
var future_unixtime = unixtime + expiration;
var publicKey = "KEY HERE";
var privateKey = "KEY HERE";
var method = "POST";
var route = "forms/2/submissions";

stringToSign = publicKey + ":" + method + ":" + route + ":" +    future_unixtime;
sig = CalculateSig(stringToSign, privateKey);
var url = 'http://stephenkempin.co.uk/vuejs/gravityformsapi/' + route + '?api_key=' + publicKey + '&signature=' + sig + '&expires=' + future_unixtime;

var values = {input_values : {
                          input_1 : 'Name',
                          input_2 : 'This is surname',
                          input_5 : '[email protected]',
                          input_4 : 'Message testing'
                        }

    }

Answer 1

You should have a server that will make the API request for you. Do not put this in exposed FE code as it's easily viewed by the public.

The safe way to do it would be:

FrontEnd VueJS project -> make API request to your server (backend) -> makes API request to Gravity Forms using the private key.