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'
                        }

    }

Lorilee

This particular line is cause for concern: var privateKey = "KEY HERE"; you should not be exposing this in frontend code, so consider generating this value on your server, probably makes sense to pass the form field values to the server and on to the secure api from there? – Bitters

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.

Thimbu