web-dev-qa-db-ja.com

認証方法WP REST API with JWT Authentication with Fetch API

私の目標は、サーバー側のLambda関数からPOSTリクエストを使用してユーザーコメントをWordPress APIに送信することです。 Gatsby と Netlify を使用しています。

誰かが私のGatsbyフロントエンドのコメントフォームにコメントを残すと、Netlifyは フォーム送信イベント を受け取り、 Netlify Lambda関数 が呼び出されます。 WP-REST API を使用してWordPressサイトにコメントを準備して送信するのは、この関数内です。

問題は、私の機能が静かに失敗しているように見えることです。これは、Netlifyがその機能ログを利用できるようにする方法に一部起因する可能性があります。私の直感は、POST WP APIへのコメントをRESTするためにある形式の認証が必要だったので、先に進んで JWT Authenticationをインストールしましたプラグイン （主に、基本認証よりも安全であると確信しているためですが、よくわかりません）。

JWTプラグインのドキュメントに目を通し、CORSサポートの有効化や新しい秘密鍵の定義など、_.htaccess_ファイルと_wp-config.php_ファイルに必要な変更を加えました。

define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');

Lambda関数で、postリクエストを終了JWTエンドポイントにします。

_fetch('https://example.com/wp-json/jwt-auth/v1/token', {
     // credentials: 'include',
     headers: new Headers({
        'Authenticate': 'Basic {what do I put here?}' // Do I need "Basic"?
     })
  })
  .then(response => {
     console.log("Did we get a response? ", response)
     return response.json()
  })
  .then(myJson => {
     console.log(JSON.stringify(myJson))
  })
  .catch(error => {
     console.log("error: ", error);
     throw new Error('Something bad happened.', error)
  })
_

私の混乱はhow認証呼び出しを適切にセットアップするためにif認証する必要があり、WordPress _username:password_を送信する必要があるかどうか、またはJSON Web Token私が_wp-config.php_で定義したもの。

そして、ユーザー名/パスワードの形式はどうあるべきですか？ URLエンコードされている場合：_username=admin&password=Str0ngPass_または単に「username：password」。

この質問 は効果的なアプローチを提供しているようですが、私はPostmanを使用しておらず、Fetch呼び出しからトークンを取得することもできません。私が見つけたいくつかのより多くの答えはより理論的であり、コード例に関してはあまり提供していません：

私は ノードのJWT Webトークン も発見しました。多分私はそれをそのように実装する必要がありますか？

Fetchを使用して認証することに関するドキュメントは、少し不規則であることがわかりました。どんな助けでも大歓迎です、そしてあなたが必要とするさらなるコード/情報を提供させていただきます。

rest-apiauthentication
2
David Gaskin
_'Authenticate': 'Basic {what do I put here?}' // Do I need "Basic"?
_

いいえ、Basicではありません。 Bearerです。ヘッダーはAuthorizationです。

したがって、最初に_/wp-json/jwt-auth/v1/token_からトークンを取得します。

_fetch( 'http://example.com/wp-json/jwt-auth/v1/token', {
    method: 'POST',
    body: JSON.stringify( {
        // Username of a user on the WordPress website in which the REST API request
        // is being made to.
        username: 'user',
        // And the above user's password.
        password: 'pass'
    } ),
    headers: {
        'Content-Type': 'application/json'
    }
} )
.then( res => res.json() )
.then( res => console.log( res.token ) );
_

この時点で：.then( res => console.log( res.token ) )、たとえばブラウザーのCookie（_document.cookie_）にトークンをキャッシュできます。つまり、エラーがない場合（REST AP​​Iエンドポイントによって返される）、トークンは_res.token_に格納されます。

有効なトークンを取得した後、REST AP​​Iエンドポイント（ "など）にリクエストを送信するときにトークンを使用できますコメントを作成します " — Authorizationヘッダーを設定し、その値を_Bearer <token>_に設定します。上記の例では、_<token>_は_res.token_の値です。

_fetch( 'http://example.com/wp-json/wp/v2/comments', {
    method: 'POST',
    body: JSON.stringify( {
        author_email: '[email protected]',
        author_name: 'Test via REST API',
        content: 'Test comment',
        post: 123
    } ),
    headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer <token>'
    }
} )
.then( res => res.json() )
.then( res => console.log( res ) );
_

Authorizationヘッダーが有効になっていることを確認してください

そのヘッダーはが pluginで必要であるためです。

そして、私の場合、Authorizationヘッダー（PHPでは_$_SERVER['HTTP_AUTHORIZATION']_を介してアクセスできます）が見つからないか無効になっているため、これをApacheの構成ファイルに追加する必要がありました（ _httpd.conf_）：（Apacheサーバーの再起動が必要です）

_SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
_

これを（ルート）_.htaccess_ファイルに追加しようとしましたが、うまくいきませんでした：

_RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
_

あなたや他の誰かがAuthorizationヘッダーで問題を抱えているのに役立つことを願っています。 :)

資源

3
Sally CJ