WooCommerce REST API AJAX身份验证-401响应

时间：2020-02-20 作者：sialfa

我需要实现vuejs来加载我的商店的类别。我已经读到woocoomerce rest api需要身份验证请求才能工作，所以我尝试在启用https的localhost上使用oauth获取类别：

// This is in my functions file to pass the parameters
// wp_localize_script( \'main\', \'woo\', 
    //   array(
    //     \'ajaxurl\' => \'wp-ajax.php\',
    //     \'timestamp\' => time(),
    //     \'hash\' => hash_hmac(),
    //     \'nonce\'
    //   )
    // );

阿贾克斯

// This is the JS part
//$.ajax({
        //method: \'GET\',
        //url: \'wp-json/wc/v3/products/categories&oauth_consumer_key="+woo.consumer_key+"&oauth_signature_method="HMAC-SHA1&oauth_timestamp="+woo.timestamp+"&oauth_nonce="+woo.nonce+"&oauth_signature=+woo.hash\',
        // beforeSend: function (xhr) {
        //   xhr.setRequestHeader ("Authorization", "OAuth " + btoa(username + ":" + password));
        // },

我总是得到401响应代码，我无法使用ajax进行身份验证。我想使用wp\\u localize\\u脚本来传递所需的时间戳和身份验证，但我无法找到正确的方法。任何示例都将不胜感激。

更新时间：

我使用sally建议重写了che代码，但仍然得到了401错误响应代码。以下是更新的代码

PHP

wp_register_script(\'main\', get_template_directory_uri().\'/assets/js/main.js\', array(\'jquery\'), null );
    $localize = array(
       \'ajaxurl\' => admin_url(\'admin-ajax.php\'),
       // Securing your WordPress plugin AJAX calls using nonces
       \'auth\' => base64_encode(\'ck_32a46b36d90680e574e9de6456746a11cf07945:cs_0a6bd199a45c0b96e848a1401a14b18444fa46d8\'),
    );
    wp_localize_script(\'main\', \'wp\', $localize);
    wp_enqueue_script(\'main\');

JS公司

    const app = new Vue({
      el: \'#app\',
      data: {},
      created: function(){
        $.ajax({
          method: \'GET\',
          url: \'wp-json/wc/v3/products/categories\',
          headers: {
             \'Authorization\': "Basic "+ wp.auth
          },
          success: function(response){
            console.log(response);
          }
        });
      },
      destroyed: {},
      mounted: {},
    });

我在本地主机上，有一个自我签名的证书，可以使用https，也许这就是问题所在？

2 个回复

最合适的回答,由SO网友:Sally CJ 整理而成

首先，可以使用WooCommerce REST API文档here 你应该去看看。

其次，下面的示例使用/wc/v3/products/categories （“List all product categories）端点。

这里有一种使用OAuth对您的请求进行身份验证的正确方法—它在通过HTTPS进行身份验证时始终有效，并且是通过HTTP进行身份验证的唯一可接受的选项：

如何在JavaScript中通过wp_localize_script(). 或者用JavaScript实现下面的PHP代码。

您可以通过WoodPress管理界面生成WooCommerce REST API密钥；WooCommerce&rarr；设置（&R）；“高级”选项卡（&R）；REST API。

// Define the request method.
$method = \'GET\';
// Just set the second parameter to the proper endpoint, without /wp-json.
$url = get_rest_url( null, \'/wc/v3/products/categories\' );
// Define your keys.
$ck = \'<put key here>\'; // consumer key
$cs = \'<put key here>\'; // consumer secret

$params = [
    // Required parameters:
    \'oauth_consumer_key\'     => $ck,
    \'oauth_timestamp\'        => time(),
    \'oauth_nonce\'            => wp_create_nonce( time() ),
    \'oauth_signature_method\' => \'HMAC-SHA1\',

    // Parameters specific to the endpoint:
    \'per_page\' => 2,
];

// Sort the parameters and encode them into a single string.
uksort( $params, \'strcmp\' );
$params2 = \'\';
foreach ( $params as $key => $value ) {
    $params2 .= ( $params2 ? \'%26\' : \'\' ) .
        rawurlencode( $key ) . \'%3D\' . rawurlencode( $value );
}

// Create the signature base string.
$sig_base = $method . \'&\' . rawurlencode( $url ) . \'&\' . $params2;
// And generate the signature base.
$sig = base64_encode( hash_hmac( \'sha1\', $sig_base, $cs . \'&\', true ) );

// Add the required oauth_signature parameter.
$params[\'oauth_signature\'] = $sig;
// And build the query string.
$query = http_build_query( $params );

// Then make request to this URL:
//$req_url = $url . \'?\' . $query;

以下是您可以使用的其他选项，但仅当通过HTTPS进行身份验证时，您应该知道这些选项将公开您的消费者secret 按键：

使用HTTP Basic Auth &mdash；设置HTTPAuthorization 收割台；i、 e。Authorization: Basic <base64 encoding of <consumer key>:<consumer secret>>:

jQuery.ajax( {
    url: \'/wp-json/wc/v3/products/categories\',
    headers: {
        \'Authorization\': \'Basic <base64-encoded value here>\'
    },
    ...
} );

在PHP中，您可以base64_encode( \'<consumer key>:<consumer secret>\' ); 获取base64编码值。

并确保Authorization 已在服务器上启用标头

或提供使用者密钥/密码作为查询字符串参数&mdash；e、 g。https://example.com/wp-json/wc/v3/products/categories?consumer_key=<KEY>&consumer_secret=<KEY>:

jQuery.ajax( {
    url: \'/wp-json/wc/v3/products/categories?consumer_key=<key>&consumer_secret=<key>\',
    ...
} );

通过HTTPS进行身份验证时的另一个选项是使用标准cookie身份验证，如所述here:

// This example provides the nonce as a query string parameter.
jQuery.ajax( {
    url: \'/wp-json/wc/v3/products/categories?_wpnonce=<nonce>\',
    ...
} );

您也可以使用authentication plugins, 但你需要自己测试它们。

SO网友:Nitin Patil

我试过下面的snippest，效果很好

function get_wc_all_products() {
    var authCode = btoa(\'ck**_---**-:cs_**-----**e\');
    $.ajax({
        method: \'GET\',
        url: \'https://**YourSite**/wp-json/wc/v3/products\',
        headers: {
            \'Authorization\': "Basic " + authCode
        },
        success: function(response) {
            console.log(response);
        }
    });
}

小码农CODE

WooCommerce REST API AJAX身份验证-401响应

相关推荐

在WordPress前端使用AJAX加载php文件