如何正确设置WordPress REST API的AJAX现时值?

时间:2019-09-13 作者:Matthew Brown aka Lord Matt

在链接注释之后here 这让我these docs, 我试图为用户身份验证设置一个nonce。

我补充道:

wp_localize_script( \'wp-api\', \'wpApiSettings\', array(
    \'root\' => esc_url_raw( rest_url() ),
    \'nonce\' => wp_create_nonce( \'wp_rest\' )
) );
到if语句,检查用户是否已登录并能够执行REST调用中要求的操作。

我还补充道:

        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( \'X-WP-Nonce\', wpApiSettings.nonce );
        },
我的api调用jQuery类。

告诉我wpApiSettings不存在时出错。我做错了什么?

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

首先

(此信息供其他尚不了解此信息的读者使用。)有两种方法可以验证REST API请求:

使用标准cookie authentication

使用类似的插件Application Passwords

您可以阅读有关REST API官方手册的更多信息here, 这个答案适用于标准cookie身份验证,其中nonce应该是sent either via a GET/POST query parameter named _wpnonce or a (custom HTTP) header named X-WP-Nonce.

发送cookie nonce的选项轻松选项:追加_wpnonce 到REST API端点的URL。这适用于GET, POST, 等请求,包括JSON有效负载。

jQuery.ajax({
    method: \'POST\',

    // _wpnonce as a GET/$_GET query parameter
    url: \'/path/to/endpoint?_wpnonce=<nonce>\',

    data: { foo: \'bar\', baz: 1 },
    dataType: \'json\',
    success: function ( data ) {
        console.log( data );
    },
});
或添加_wpnonce 请求正文。

jQuery.ajax({
    method: \'POST\',
    url: \'/path/to/endpoint\',

    // _wpnonce as a POST/$_POST query parameter
    // but can be GET; see the `method` above which defaults to GET when not specified
    data: { foo: \'bar\', baz: 1, _wpnonce: \'<nonce>\' },

    dataType: \'json\',
    success: function ( data ) {
        console.log( data );
    },
});
this question): 添加X-WP-Nonce 发送到请求头。此选项也适用于GET, POST, 等请求。

jQuery.ajax({
    method: \'POST\',
    url: \'/path/to/endpoint\',
    data: JSON.stringify( { foo: \'bar\', baz: 1 } ), // sending a JSON-encoded string
    contentType: \'application/json; charset=utf-8\', // and a JSON Content-Type header

    // Send the nonce as part of the headers.
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( \'X-WP-Nonce\', \'<nonce>\' );
    },

    dataType: \'json\',
    success: function ( data ) {
        console.log( data );
    },
});

PHP部分:(在主题函数文件或插件文件中)

// Register a dummy REST API endpoint..
add_action( \'rest_api_init\', \'my_register_rest_routes\' );
function my_register_rest_routes() {
    register_rest_route( \'my-plugin/v1\', \'/foo\', [
        \'methods\'  => \'POST\',
        \'callback\' => function ( $request ) {
            return [
                $request->get_params(),
                \'Is user logged-in: \' . ( is_user_logged_in() ? \'Yes\' : \'NO\' ),
                \'Can user publish_posts: \' . ( current_user_can( \'publish_posts\' ) ? \'Yes\' : \'NO\' )
            ];
        },
    ] );
}

add_action( \'wp_enqueue_scripts\', \'my_enqueue_scripts\' );
function my_enqueue_scripts() {
    // Enqueue the script which makes the AJAX call to /wp-json/my-plugin/v1/foo.
    wp_enqueue_script( \'my-script\', \'/path/to/my-script.js\', [ \'jquery\' ] );

    // Register custom variables for the AJAX script.
    wp_localize_script( \'my-script\', \'myScriptVars\', [
        \'root\'  => esc_url_raw( rest_url() ),
        \'nonce\' => wp_create_nonce( \'wp_rest\' ),
    ] );
}

Notes:

<记住wp_enqueue_script() &mdash;my-script 在上述示例中&mdash;与的第一个参数完全相同wp_localize_script(). 该参数是脚本句柄,它是唯一的slug,作为您正在排队或本地化的脚本的标识符。

如果这些参数不匹配,那么脚本将不会本地化,JS对象&mdash;myScriptVars 在上述示例中&mdash;将是一个undefined 这可能会导致问题中提到的错误(“wpApiSettings不存在”):

JS部分:(inmy-script.js 或者不管文件名是什么…)

在这里,我们添加_wpnonce 请求正文。

jQuery.ajax({
    method: \'POST\',
    url: myScriptVars.root + \'my-plugin/v1/foo\',
    data: { foo: \'bar\', baz: 1, _wpnonce: myScriptVars.nonce },
    dataType: \'json\',
    success: function ( data ) {
        console.log( data );
    },
});

Notes:

上述和本答案中的其他JS代码使用jQuery的ajax().