Gewusst wie: Stellen Sie JWT-authentifizierte Anforderungen an die Wordpress-API

17

Dies ist eigentlich keine Frage, sondern eine Anleitung, wie authentifizierte Anforderungen mit JWT an die Wordpress-API gesendet werden. Ich schreibe dies als Erinnerung an mich selbst und für diejenigen, die Hilfe zum selben Thema benötigen.

grazianodev
quelle
3
Sie sollten dies als Frage formatieren und die Lösung dann als tatsächliche Antwort veröffentlichen. Ansonsten sieht es nach einer unbeantworteten Frage aus.
Jacob Peattie
2
Es gibt auch diese feine Anleitung firxworx.com/blog/wordpress/…
Armando

Antworten:

18

Warum JWT-Authentifizierung?

Ich erstelle eine Site, die Wordpress als Back-End und eine React + Redux-App als Front-End verwendet. Daher rufe ich den gesamten Inhalt im Front-End ab, indem ich Anforderungen an die Wordpress-API stelle. Einige Anfragen (hauptsächlich POST-Anfragen) müssen authentifiziert werden, als ich auf JWT gestoßen bin.

Was wir brauchen

Um die JWT-Authentifizierung mit Wordpress zu verwenden, müssen Sie zuerst das JWT-Authentifizierungs- Plugin für WP REST-API installieren . Wie in den Anweisungen des Plugins erklärt, müssen wir auch einige wichtige Wordpress-Dateien ändern. Im Speziellen:

In der im Stammordner der Wordpress-Installation enthaltenen .htaccess-Datei müssen die folgenden Zeilen hinzugefügt werden:

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

In der Datei wp-config.php, die auch im Stammverzeichnis der Wordpress-Installation enthalten ist, müssen folgende Zeilen hinzugefügt werden:

define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key'); // Replace 'your-top-secret-key' with an actual secret key.
define('JWT_AUTH_CORS_ENABLE', true);

Testen, ob JWT verfügbar ist

Um zu überprüfen, ob wir JWT jetzt verwenden können, starten Sie Postman und stellen Sie eine Anforderung an den Standardindex der Wordpress-API:

http://example.com/wp-json/

Einige neue Endpunkte mögen /jwt-auth/v1und /jwt-auth/v1/tokensollten der API hinzugefügt werden. Wenn Sie sie in der Antwort auf die obige Anfrage finden, bedeutet dies, dass JWT jetzt verfügbar ist.

JWT-Token abrufen

Bleiben wir für den Moment bei Postman und fordern ein Token für die Wordpress-API an:

http://example.com/wp-json/jwt-auth/v1/token

Die Antwort enthält das JWT-Token, einen verschlüsselten Schlüssel, der ungefähr so ​​aussieht:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODg4OFwvZm90b3Jvb20tbmV4dCIsImlhdCI6MTUyMjU5NzQ1MiwibmJmIjoxNTIyNTk3NDUyLCJleHAiOjE1MjMyMDIyNTIsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.hxaaT9iowAX1Xf8RUM42OwbP7QgRNxux8eTtKhWvEUM

Eine authentifizierte Anfrage stellen

Versuchen wir, den Titel eines Posts mit der ID 300 als Beispiel für eine authentifizierte Anforderung mit JWT zu ändern.

Wählen Sie im Postman die Methode POST und geben Sie den folgenden Endpunkt ein:

http://example.com/wp-json/wp/v2/posts/300

Wählen Sie auf der Registerkarte Authorization die Option No Auth, und fügen Sie auf der Registerkarte Headers Folgendes hinzu:

'Content-type': 'application/json', 
'Authorization': 'Bearer jwtToken' // Replace jwtToken with the actual token (the encrypted key above)

Wählen Sie schließlich auf der Registerkarte Body die Optionen raw und JSON (application / json) aus, und geben Sie im Editor direkt unter den Optionen Folgendes ein:

{ "title": "YES! Authenticated requests with JWT work" }

Jetzt können Sie SENDEN drücken. Schauen Sie auf dem Antwort-Tab mit allen Daten zu dem von uns angeforderten Beitrag nach: Der Wert für den Titelschlüssel sollte jetzt seinYES! Authenticated requests with JWT work

grazianodev
quelle
2
Wie würden Sie zwischen Anrufen, die authentifiziert werden müssen, und solchen unterscheiden, die im Back-End nicht authentifiziert werden müssen?
Uruk
Ich erstelle auch eine React-App, mit der die Beitragsdaten aus der WordPress-Datenbank mithilfe der WordPress-REST-API abgerufen werden. Ich möchte jedoch nicht, dass die REST-API-Endpunkte öffentlich verfügbar sind. Gibt es eine Möglichkeit, den Zugriff auf die REST-API mit Ausnahme meiner React-App einzuschränken?
Chris
@chris Wenn Sie möchten, dass Ihre Endpunkte vor nicht autorisierten Anforderungen verborgen bleiben, fügen Sie sie unter dem Namespace jwt_auth hinzu register_rest_route( 'jwt-auth/v1', 'your_custom_endpoint ... . Alles unter / jwt-auth / muss autorisiert werden
Athoxx
3

In Ergänzung zu @ grazianodevs Antwort erhalten Sie Ihr Autorisierungstoken mithilfe von cURL wie folgt:

/**
*   Generate a JWT token for future API calls to WordPress
*/
private function getToken() {
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL,'https://site.localhost/wp-json/jwt-auth/v1/token');
    curl_setopt($ch, CURLOPT_POST, 1);

    # Admin credentials here
    curl_setopt($ch, CURLOPT_POSTFIELDS, "username=admin&password=Str0ngPass"); 

    // receive server response ...
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $server_output = curl_exec ($ch);
    if ($server_output === false) {
        die('Error getting JWT token on WordPress for API integration.');
    }
    $server_output = json_decode($server_output);

    if ($server_output === null && json_last_error() !== JSON_ERROR_NONE) {
        die('Invalid response getting JWT token on WordPress for API integration.');
    }

    if (!empty($server_output->token)) {
        $this->token = $server_output->token; # Token is here
        curl_close ($ch);
        return true;
    } else {
        die('Invalid response getting JWT token on WordPress for API integration.');
    }
    return false;
}

Danach senden Sie Ihre Anfragen mit der Überschrift: "Authorization: Bearer $ token"

Wobei $ token das von der obigen Funktion getToken () zurückgegebene Token ist.

Ich persönlich benutze das Plugin " REST-API deaktivieren und JWT / OAuth-Authentifizierung erfordern ", um den API-Zugriff nur mit dem obigen Token einzuschränken.

Lucas Bustamante
quelle