Comment: effectuer des demandes authentifiées JWT auprès de l'API Wordpress

17

Ce n'est pas vraiment une question mais un guide sur la façon de faire des demandes authentifiées à l'API Wordpress à l'aide de JWT. J'écris ceci comme un rappel pour moi et pour ceux qui peuvent avoir besoin d'aide avec le même sujet.

grazianodev
la source
3
Vous devez formater cela comme une question, puis publier la solution comme une réponse réelle. Sinon, cela ressemble à une question sans réponse.
Jacob Peattie
2
Il y a aussi ce bon guide firxworx.com/blog/wordpress/…
Armando

Réponses:

19

Pourquoi l'authentification JWT

Je crée un site qui utilise Wordpress comme back-end et une application React + Redux comme front-end, donc je tire tout le contenu du front-end en faisant des demandes à l'API Wordpress. Certaines requêtes (principalement les requêtes POST) doivent être authentifiées, c'est à ce moment que j'ai rencontré JWT.

Ce dont nous avons besoin

Pour utiliser l'authentification JWT avec Wordpress, nous devons d'abord installer le plug-in d' API JWT Authentication for WP REST . Comme expliqué dans les instructions du plugin, nous devons également modifier certains fichiers Wordpress de base. En particulier:

Dans le fichier .htaccess inclus dans le dossier racine de l'installation de Wordpress, nous devons ajouter les lignes suivantes:

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

Dans le fichier wp-config.php, également inclus dans le dossier racine de l'installation de Wordpress, nous devons ajouter ces lignes:

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);

Test pour voir si JWT est disponible

Pour vérifier que nous pouvons maintenant utiliser JWT, lancez Postman et faites une demande à l'index par défaut de l'API Wordpress:

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

Quelques nouveaux points de terminaison, comme /jwt-auth/v1et /jwt-auth/v1/tokenauraient dû être ajoutés à l'API. Si vous pouvez les trouver dans la réponse à la demande ci-dessus, cela signifie que JWT est maintenant disponible.

Obtenir le jeton JWT

Restons dans Postman pour le moment, et demandons un jeton à l'API Wordpress:

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

La réponse contiendra le jeton JWT, qui est une clé chiffrée qui ressemble à ceci:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODg4OFwvZm90b3Jvb20tbmV4dCIsImlhdCI6MTUyMjU5NzQ1MiwibmJmIjoxNTIyNTk3NDUyLCJleHAiOjE1MjMyMDIyNTIsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.hxaaT9iowAX1Xf8RUM42OwbP7QgRNxux8eTtKhWvEUM

Faire une demande authentifiée

Essayons de changer le titre d'un article avec un ID de 300 comme exemple d'une demande authentifiée avec JWT.

Dans Postman, choisissez POST comme méthode et saisissez le point de terminaison suivant:

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

Choisissez Pas d'authentification dans l'onglet Autorisation et ajoutez ce qui suit dans l'onglet En-têtes:

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

Enfin, dans l'onglet Corps, sélectionnez les options raw et JSON (application / json), puis dans l'éditeur juste en dessous des options, tapez ce qui suit:

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

Vous pouvez maintenant appuyer sur ENVOYER. Regardez dans l'onglet réponse avec toutes les données sur le post que nous avons demandé: la valeur de la clé de titre devrait maintenant êtreYES! Authenticated requests with JWT work

grazianodev
la source
2
Comment feriez-vous la distinction entre les appels qui doivent être authentifiés et ceux qui ne doivent pas être authentifiés dans le back-end?
uruk
Je construis également une application React qui extrait les données des publications de la base de données WordPress à l'aide de l'API REST WordPress, cependant, je ne veux pas que les points de terminaison de l'API REST soient accessibles au public. Existe-t-il un moyen de restreindre l'accès à l'API REST à l'exception de mon application React?
Chris
Si vous voulez @ Chris vos points d' extrémité à être cachés loin des demandes non autorisées, les ajouter dans l'espace de noms jwt_auth, par exemple comme ceci: register_rest_route( 'jwt-auth/v1', 'your_custom_endpoint ... . Tout ce qui est sous / jwt-auth / aura besoin d'une autorisation
Athoxx
4

En complément de la réponse de @ grazianodev, voici comment vous obtenez votre jeton d'autorisation en utilisant cURL:

/**
*   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;
}

Après cela, envoyez vos demandes avec l'en-tête: "Autorisation: porteur $ token"

Où $ token est le jeton renvoyé par la fonction getToken () ci-dessus.

J'utilise personnellement le plugin " Désactiver l'API REST et exiger l'authentification JWT / OAuth " pour restreindre l'accès à l'API uniquement avec le jeton ci-dessus.

Lucas Bustamante
la source