I am facing problems trying to authenticate on WooCommerce Rest API, to do basic stuff like fetch products... I would like to do it in plain javascript, to use on a Cordova generated app. But I keep getting 401 Unauthorized error when trying to fetch the content. Here is my code:

    import axios from 'axios'
    import OAuth  from 'oauth-1.0a'
    import crypto from 'crypto'

    const ck = '[MY_CLIENT_KEY]'
    const cs = '[MY_SECRET_KEY]'
    const url = '[MY_URL]/wp-json/wc/v2/products'

    const oauth = OAuth({
        consumer: {
            key: ck,
            secret: cs
        },
        signature_method: 'HMAC-SHA1',
        hash_function: function(base_string, key) {
            return crypto.createHmac('sha1', key).update(base_string).digest('base64')
        }
    })

    const token = {
        key: ck,
        secret: cs
    }

    var request_data = {
        method: 'GET',
        url: url
    }

    var params = oauth.authorize(request_data, token)
    console.log(params)

    axios.get(url + '/?oauth_signature=' + params.oauth_signature + 
                    '&oauth_consumer_key=' + ck + 
                    '&oauth_nonce=' + params.oauth_nonce + 
                    '&oauth_signature_method=HMAC-SHA1&oauth_timestamp=' + params.oauth_timestamp + 
                    '&oauth_token=' + params.oauth_token + 
                    '&oauth_version=1.0')
    .then(function(data){
        console.log(data)
    }, function(error){
        console.log(error)
    })

Any ideas on how to get this done? Where am I failing?

I am facing problems trying to authenticate on WooCommerce Rest API, to do basic stuff like fetch products... I would like to do it in plain javascript, to use on a Cordova generated app. But I keep getting 401 Unauthorized error when trying to fetch the content. Here is my code:

    import axios from 'axios'
    import OAuth  from 'oauth-1.0a'
    import crypto from 'crypto'

    const ck = '[MY_CLIENT_KEY]'
    const cs = '[MY_SECRET_KEY]'
    const url = '[MY_URL]/wp-json/wc/v2/products'

    const oauth = OAuth({
        consumer: {
            key: ck,
            secret: cs
        },
        signature_method: 'HMAC-SHA1',
        hash_function: function(base_string, key) {
            return crypto.createHmac('sha1', key).update(base_string).digest('base64')
        }
    })

    const token = {
        key: ck,
        secret: cs
    }

    var request_data = {
        method: 'GET',
        url: url
    }

    var params = oauth.authorize(request_data, token)
    console.log(params)

    axios.get(url + '/?oauth_signature=' + params.oauth_signature + 
                    '&oauth_consumer_key=' + ck + 
                    '&oauth_nonce=' + params.oauth_nonce + 
                    '&oauth_signature_method=HMAC-SHA1&oauth_timestamp=' + params.oauth_timestamp + 
                    '&oauth_token=' + params.oauth_token + 
                    '&oauth_version=1.0')
    .then(function(data){
        console.log(data)
    }, function(error){
        console.log(error)
    })

Any ideas on how to get this done? Where am I failing?

• javascript
• woomerce
• woomerce-rest-api

2 Answers 2

Got it, inspired by this answer here.

    import axios from 'axios'
    import OAuth  from 'oauth-1.0a'
    import CryptoJS from 'crypto-js'
    import jQuery from 'jquery'

    const that = this

    const ck = '[MY_CLIENT_KEY]'
    const cs = '[MY_SECRET_KEY]'
    const url = '[MY_URL]/wp-json/wc/v2/products'

    const oauth = OAuth({
        consumer: {
            key: ck,
            secret: cs
        },
        signature_method: 'HMAC-SHA1',
        hash_function: function(base_string, key) {
            return CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(base_string, key));
        }
    });

    const requestData = {
        url: url,
        method: 'GET'
    };

    axios.get(
        requestData.url + '?' + jQuery.param(oauth.authorize(requestData))
    ).then(function(response){
        console.log(response.data)
    }, function(error){
        console.log(error)
    })

I don't think you need jquery to add the params in Axios I think you can just do

axios.get(requestData.url, { params: oauth.authorize(requestData) }).then(
  function(response) {
    console.log(response.data);
  },
  function(error) {
    console.log(error);
  }
);