How do I connect with Axios to the Woocommerce or Wordpress API?

Question

How do I connect with Axios to the Woocommerce or Wordpress API?

Navigation

#1 by (0 votes)

1

I'm with vuejs and axios trying to connect to the woocommerce api, but I can not find a way to send my credentials correctly (the keys), or I do not know if I have to specify the connection method ... I do not know how to indicate it in axios.

This is the part where I try to connect:

getPosts: function() {
  var app = this
  axios.get('http://192.168.0.163/development/wp-json/wc/v2/products/', {
          headers: {
              "consumerKey": "ck_xxxxxx",
              "consumerSecret": "cs_xxxxxxx"
            }
        })
    .then(function (response) {
      app.posts = response.data
    })
    .catch(function (error) {
      console.log(error)
    })
  }

I get a 401, I do not have permits. So, in postman I tried to connect, specifying the 0Auth 1.0 connection method and if it works, that the problem is in the axes js code.

javascript api wordpress woocommerce

asked by javialm 24.06.2017 в 12:07

source

1 answer

Delay in returning the data to my select with Ajax - jQuery I can not create a record from a view in laravel

score 0 · Answer 1

You are using the incorrect headers. The OAuth specification says that you need a concatenation of the following data in the header Authorization :

oauth_consumer_key : identifies the client that makes the request.

oauth_nonce : unique token that is generated for each request.

oauth_signature : hash generated from the rest of the headers using a specific algorithm.

oauth_signature_method : hash type, for example HMAC-SHA1 .

oauth_timestamp : timestamp of the date immediately after the request is created.

oauth_token : application token.

oauth_version : version of the protocol.

All these data must be separated by spaces as a single string for the header Authorization as already mentioned. The most reasonable thing you can do is use a library that does the most processing and only focus on sending your request; for example, the library OAuth 1.0a abstracts you from these processes. It works on both sides.

Generating the header

First you need the following dependencies:

Google CryptoJS . You will need to import the files of the algorithms that you will need and also the base64 encoder. For example:
```
<script src="/libs/cryptojs/hmac-sha1.js"></script>
<script src="/libs/cryptijs/hmac-sha256"></script>
```

OAuth 1.0a obviously.

<script src="/libs/oauth-1.0.js"></script>

Then you build the header:

const oauth = OAuth({
    consumer: {
        key: '<clave>',
        secret: '<secreto>'
    },
    signature_method: 'HMAC-SHA1', // algoritmo
    hash_function: function(base_string, key) {
        return crypto.createHmac('sha1', key).update(base_string).digest('base64');
    }
});

This library allows you to convert this instance to the header already formatted or as data for request. You are interested as a header, so you must use the toHeader(<datos_petición>, <token>) method:

// datos de la petición
const requestSettings = {
  url: '<url>',
  method: 'GET',
};

// token de acceso
const token = {
  key: '<api key>',
  secret: '<secreto'>,
};

axios
  .get(requestSettings.url, {
    headers: oauth.toHeader(oauth.authorize(requestSettings, token))
  })
  .then((response) => {
     // manejar respuesta
  });

I recommend that you migrate to OAuth 2.0, whose authentication mechanism is tremendously easier than its predecessor.

Links of interest

References