web-dev-qa-db-ja.com

AJAXを使用してフォームにナンスを適切に適用する

したがって、WordPressについてはまだ学習中であり、nonceをAJAX作成したフォームに適切にフックする方法を理解できないようです。

ここでは、jsファイルをフックしてローカライズし、update_profile_validation nonceを定義しています[[〜＃〜] works [〜＃〜]]：

function enqueue_scripts()
{
    if (!is_admin()) {
        wp_register_script('profile_edit_submit', content_url() . '/mu-plugins/fleishmanhillard/scripts/frontend-profile-edit.js', ['jquery'], '', true);
        wp_localize_script( 'profile_edit_submit', 'profile_edit', [
            // This will generate the admin URL that we can use on the front-end of our website
            'ajax_url' => admin_url('admin-ajax.php'),
            // Pass in a custom nonce name for JS
            'nonce' => wp_create_nonce('update_profile_validation'),
        ]);
        wp_enqueue_script('profile_edit_submit');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

このメソッドは、ユーザーコンテンツの更新に使用されます[[〜＃〜] works [〜＃〜]]：

function ajax_update_profile_post($args)
{
    check_ajax_referer('update_profile_validation', 'my_nonce');
    update_profile_post($args);
    wp_die();
}
add_action( 'wp_ajax_update_profile_post', 'ajax_update_profile_post' );

function update_profile_post($args  = [])
{
    if (!$args) {
        return;
    }

    // If the server request is POST, proceed to update post
    if (strtolower($_SERVER['REQUEST_METHOD']) === "post") {
        wp_update_post($args);
    }
}

これが私のAJAXフォーム送信[[〜＃〜] works [〜＃〜]]です：

(function ($) {
    $(function($) {
        $('#profile_update').on('submit', function(e) {
            $.ajax({
                type: 'POST',
                url : profile_edit.ajaxurl,
                data: $('#profile_update').serialize() +
                    '&my_nonce=' + profile_edit.nonce +
                    '&action=update_profile_post'
            });
            return false;
        });
    });
})(jQuery);

これが私のフォームの最後の部分です：

<?php if ($profile->get_edit_post_link()):

    // Set the post field content field
    $post_content = $_POST['content'];

    ajax_update_profile_post([
        'ID' => $profile->get_id(),
        'post_content' => $post_content,
    ]);

    ?>
    <form action="" id="profile_update" method="POST">
        <input type="text" name="content" id="post_content">
        <button type="submit"><?= 'Update Post' ?></button>
        <?php wp_nonce_field('update_profile_validation', 'my_nonce'); ?>
    </form>
<?php endif;

したがって、フォームは機能し、フィールドは送信されますが、フォームに適切なナンスを適用する方法を理解するのに苦労しています。すべての支援に感謝します！

functionsjavascriptnonce
1
Sem

AJAXデータと一緒にナンスを送信する必要があるだけです。

_$.ajax({
    type: 'POST',
    url : profile_edit.ajaxurl,
    data: $('#profile_update').serialize() +
        '&my_nonce=' + profile_edit.nonce +
        '&action=update_profile_post', // don't forget the action name!
});
_

または、jQueryのserialize()関数を使用しているため、次の形式でノンスを直接追加することもできます。

_<?php wp_nonce_field( 'update_profile_validation', 'my_nonce' ); ?>
_

次に、AJAXを実行しているため、check_ajax_referer()を使用して、送信されたナンスを確認します。

_function update_profile_post() {
    check_ajax_referer( 'update_profile_validation', 'my_nonce' );
    // ... the rest of your code.
    wp_die();
}
_

詳細については、WordPress開発者向けサイト こちら を確認してください。

さらに、フォームとAJAXコールバックから同じupdate_profile_post()を呼び出す代わりに、2つの関数を使用します。このような何かがします：

_function ajax_update_profile_post() {
    check_ajax_referer( 'update_profile_validation', 'my_nonce' );

    // call update_profile_post() with submitted parameters
    // or call wp_update_post() directly

    wp_die();
}
add_action( 'wp_ajax_update_profile_post', 'ajax_update_profile_post' );

function update_profile_post( $args ) {
    // call wp_update_post( $args ) here
    // or just call wp_update_post() directly in your form
}
_

また、REST AP​​Iは、サイトを操作するためのより構造化された予測可能な方法を提供するため、APIを使用してAJAXアクションを処理することを検討する必要があります。実際、 投稿を更新するための既存のエンドポイントがあります 。 :)

更新

  1. まだの場合は、WordPressのAJAXガイドをご覧ください ' プラグインハンドブック 。私がこの回答に含めなかったより多くの情報がそこで得られます。 :)

  2. その_// don't forget the action name!_については、AJAXデータとともに アクションname を送信する必要があることを意味しますそのWordPressは、どの関数を呼び出す必要があるかを認識しています。これは、上記のajax_update_profile_post()またはupdate_profile_post()です。アクション名を送信しなかった場合、出力_400 Bad Request_で有名な_0_エラーが発生する可能性があります（これがREST AP​​Iの方が優れている理由です）正確なエラーを通知できます）。

    また、アクション名では、_<action>_のように_wp_ajax_<action>_の部分を参照しています。これは、質問では_update_profile_post_です。

  3. "_wp_ajax_no_priv_アクションがありませんか？" —はい、認証されていないユーザー（またはログインしていないユーザー）がフォームを使用できるようにする場合。

1
Sally CJ