web-dev-qa-db-ja.com

どうやって REST APIクッキー認証作業 WP 4.7？

ログインしましたが、フロントエンドに投稿できません。 WordPressは常に 401 Unauthorized responseを返します。ログインCookieが設定されていることを確認するために$_COOKIEをダンプし、次のようなものを取得しました。

array(1) {
  ["wordpress_logged_in_48f880f2beac6f39fb9ea8d9367e86d6"]=>
  string(125) "admin|1495526369|PwQIf1tAM5khs2f6LKMgf0T7fP1RwHjl9T6OWW90QfD|6d3373f1a05f2fcbfccc429035b0519a012d3224f725b82d6f253a98862b072d"
}

私はREST AP​​Iハンドブック全体とたくさんのtutsを読みました。

ダッシュボードにログインすると、これによってCookieが正しく設定されるので、プラグインとテーマの開発者はログインユーザーを持つだけで済みます。

しかし私はそれを働かせることができません。足りないものがありますか？それとも管理ダッシュボードでのみ機能しますか？

これが私のソースコードです。

// Localized data
/* <![CDATA[ */
var appData = {"routes":{"restUrl":"\/wp-json\/wp\/v2"}};
/* ]]> */

// Post model
App.Model.Post = Backbone.Model.extend({
  urlRoot: appData.routes.restUrl + '/posts'
}

// Init
$(document).ready(function() {
  var post = new App.Model.Post({
    title: 'Posted via REST API',
    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  });
  var xhr = post.save(null, {
    success: function(model, response, options) {
      console.log(response);
    },
    error: function(model, response, options) {
      console.log(response);
    }
  });
});
cookiesrest-apibackbone
4
MinhTri

REST AP​​Iハンドブック/の Authentication の章で説明されているように、 nonce の部分がないようです。

Cookie認証はWordPressに含まれている基本的な認証方法です。ダッシュボードにログインすると、これによってCookieが正しく設定されるので、プラグインとテーマの開発者はログインユーザーを持つだけで済みます。

ただし、REST AP​​Iには、CSRFの問題を回避するためにnonceという技術が含まれています。これにより、他のサイトが明示的に意図せずに強制的にアクションを実行することを防ぐことができます。これはAPIのために少し特別な取り扱いを必要とします。

組み込みのJavaScript APIを使用している開発者にとっては、これは自動的に処理されます。これは、プラグインとテーマにAPIを使用するための推奨方法です。カスタムデータモデルはwp.api.models.Baseを拡張して、これがカスタム要求に対して正しく送信されるようにすることができます。

手動のAjaxリクエストを行う開発者にとっては、nonceはリクエストごとに渡される必要があります。 APIは、アクションをwp_restに設定したnonceを使用します。これらは_wpnonce dataパラメータ（POST dataまたはGETリクエストのクエリ）を介して、あるいはX-WP-Nonceヘッダを介してAPIに渡されます。

Backbone JavaScript Client の章に基づいて、コアのwp-api REST AP​​I Backboneクライアントライブラリを使用できます。

これが現在のテーマディレクトリの/js/test.jsスクリプトファイルの修正されたスニペットです。

wp.api.loadPromise.done( function() {

  // Create a new post
  var post = new wp.api.models.Post(
      {
        title: 'Posted via REST API',
        content: 'Lorem Ipsum ... ',
        status: 'draft',  // 'draft' is default, 'publish' to publish it
    }
  );

  var xhr = post.save( null, {
     success: function(model, response, options) {
       console.log(response);
     },
     error: function(model, response, options) {
       console.log(response);
     }
   });

});

ここで、wp-apiクライアントライブラリとテストスクリプトをエンキューします。

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_script( 'wp-api' );
    wp_enqueue_script( 'test_script', get_theme_file_uri( '/js/test.js' ), [ 'wp-api' ] );

} );

現在のテーマのfunctions.phpファイル内。

このテストスクリプトは、フロントエンドにページがロードされるたびに、新しい投稿を作成する機能を持つログインユーザーのために、新しい投稿ドラフトを作成するだけです。

4
birgire

外部アプリケーションからWordPress REST AP​​Iを使用する前に、WordPress Dashboardにログインするためには必要ありません; もちろん、Cookieに依存したくない場合は無関係です開発しています）。

同じOriginまたは同じサーバーから消費しているのでなければ、クロスオリジンリソース共有（CORS）が既にサーバー側で有効になっている可能性があることに注意することが重要です。

あなたが持っていたHTTPレスポンスヘッダ401はunauthorized requestが処理のために送られてきたことを示しています、そしてあなたのレスポンスはおそらくそうであったでしょう：

{
  "code": "rest_cannot_edit",
  "message": "Sorry, you are not allowed to edit this post.",
  "data": {
    "status": 401
  }
}

言い換えれば、あなたはあなたが要求しているアプリケーションにログインしていないであるか、アクションを実行しているまさしくそのユーザーそのような操作を実行するために必要なパーミッションを持っていませんです）。

これが最初のケース（認証されていないユーザー、通常の状況下では意図したアクションを実行するためのすべての権限を持っているユーザー）であると仮定しましょう。

明白な解決策はあなたが推測したように操作を実行する前にユーザーを認証すると関係があります。

今の質問です：WordPressユーザーを認証する方法 _その内蔵REST AP​​Iを通して？

良いニュースは次のとおりです。あなたの要件や好みに基づいて、あなたが選ぶことができる幅広い選択肢があります。

以下のスニペットは、Backbone.jsを使用するときにどうすればよいかを示しています。

wp.api.loadPromise.done(function() {
  // Create a new post
  var post = new wp.api.models.Post({
    title: 'Posted via REST API',
    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  });
  post.save(null, {
    success: function(model, response, options) {
      console.log(response);
    },
    error: function(model, response, options) {
      console.log(response);
    }
  });
});

以下のようにwp-apiまたはプラグインにfunctions.phpをエンキューすることを忘れないでください。

/**
 * Either of the two can be used to enqueues in-built WP-API;
 * not both as any of them enables you achieve the same result: to enqueue wp-api.
 * The only difference between them is that one does it independently without any condition
 * while the other does so with a condition: to enqueue it as a dependency for your script.
 */
function wp_api() {
    // Use the line below to enqueue directly
    // (should your code directly reside in your functions.php or plugin).
    wp_enqueue_script( 'wp-api' );

    // Use this option instead if you want to enqueue it (wp-api)
    // as a dependency for your script (here, located in a js file) so as
    // to ensure that your script gets loaded only after wp-api does as it depends on it.
    wp_enqueue_script( 'my_script', 'path/to/my/script', array( 'wp-api' ) );
}
add_action( 'init', 'wp_api' );

... WordPressでBackbone JavaScriptクライアントを使用する方法の詳細REST AP​​I here

1
nyedidikeke