API issue: crypto.createHmac is not a function

[ryanmendoza]

I'm trying to do the load orders example from the GitHub documentation, but I'm running into 'crypto.createHmac is not a function' from Client.js. I'm trying to do this in an Angular environment if this is affecting anything. I am not sure why I am getting this error.

https://github.com/mivaecommerce/api...ers_example.js

[ghassani]

Hi Ryan

The api library relies on the native node crypto library to perform the hmac signature for the api request. This is not available in the browser or part of angular as far as I can tell. You could try to turn off api request signing as a requirement for your api token and configure the client to not sign requests by adjusting its options and see if it can skip that code path, however this is not recommended.

If you are trying to get this to work from a frontend environment then you may need to find a suitable polyfill for the node crypto library or write up your own, hooking into existing front end crypto libraries.

I am going to try to set up angular locally and see if I can get it working and will let you know.

[ghassani]

Try this using a new project.

Here is my environment for reference:

Angular CLI: 8.3.19
Node: 12.12.0
OS: darwin x64
Angular: 8.2.14

npm install -g @angular/cli
ng new merchantapi-test
cd merchantapi-test

npm install merchantapi
npm install @types/node

Add the following to the end of `src/polyfills.ts`:

(window as any).global = window;
(window as any).process = require( 'process' );
(window as any).Buffer = require( 'buffer' ).Buffer;

Edit `tsconfig.app.json` and in the types array in compilerOptions, add node:

{
  "compilerOptions": {
    "types": [ "node" ]
  }
}

Replace the content of src/main.ts with this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import * as merchantapi from 'merchantapi';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

var client = new merchantapi.Client('https://localhost/mm5/json.mvc', 'MY_TOKEN', 'MY_SIGNING_KEY')

console.log( 'AUTH HEADER', client.generateAuthHeader('data'));

var request = new merchantapi.requests.OrderListLoadQuery(client);

request.send(function(error, response) {
  if (error) {
    // handle error
    console.log(error);
    return;
  }

  if (!response.isSuccess()) {
    console.log('Error Loading Order List', response.getErrorCode(), response.getErrorMessage());
  } else {
    response.getOrders().forEach(function(order) {
      console.log(order.getId());
       } );
  }
});

ng serve --open

Should load the default. Inspect the console and see if there are any errors.

It should be noted that this exposes your API credentials if the application is public.