Authentification d’utilisateurs WordPress dans une appli mobile React Native

Maintenant que les écrans de notre application et ses formulaires sont prêts, commençons à la rendre vivante en l’intégrant à un back-end WordPress pour l’identification utilisateur.

Dans ce tutoriel, nous allons voir comment gérer la requête AJAX permettant l’authentification d’un utilisateur WordPress dans une application mobile React Native et comment identifier toutes ses futures actions via des tokens JWT.

Fonctionnement général

Un JWT est un mécanisme permettant de vérifier l’identité du propriétaire de données JSON. Il s’agit d’une chaîne de caractères codée et sécurisée pour les URL qui peut contenir une quantité illimitée de données (contrairement à un cookie) et qui est signée de manière cryptographique.

Lorsqu’un serveur reçoit un JWT, il peut garantir que les données qu’il contient sont fiables car elles sont signées par la source. Aucun intermédiaire ne peut modifier un JWT une fois qu’il est envoyé.

L’utilisation concrète d’un JWT dans le contexte de notre application ressemble à ça :

1. l’utilisateur remplit le formulaire de login dans l’app et une requête AJAX est envoyée à une route d’API du back-end WordPress,
2. cette route vérifie la validité de la demande d’authentification et si elle est valide, génère et renvoie un token JWT en réponse,
3. ce token est ensuite stocké côté client par l’application React Native,
4. il est alors utilisé dans un header pour toutes les futures requêtes AJAX communicant avec le serveur et qui nécessitent de vérifier l’identité de l’utilisateur authentifié. C’est ce header/token qui permet, via une extension côté WordPress, de dire que telle action provient bien de tel utilisateur WordPress (comme un cookie le fait dans un contexte d’identification dans un navigateur web).

Côté back-end : une extension WordPress pour la gestion des JWT

Du côté de notre back-end WordPress, il va falloir installer une extension pour gérer l’authentification de nos utilisateurs d’app via des JSON Web Tokens (ou JWT).

Après activation et installation de cette extension WordPress, l’application mobile disposera alors de plusieurs routes d’API REST pour :

1. authentifier un utilisateur et demander un token JWT sur /wp-json/jwt-auth/v1/token,
2. éventuellement vérifier la validité d’un token JWT sur /wp-json/jwt-auth/v1/token/validate. S’il est invalide, on pourra déconnecter l’utilisateur dans l’application pour qu’il s’identifie à nouveau.

Côté front-end : créer les bonnes requêtes AJAX pour identifier les utilisateurs de l’app

Vérifier l’authentification et récupérer un token JWT

Après remplissage du formulaire, l’identifiant et le mot de passe entrés par l’utilisateur doivent être envoyés au serveur en AJAX pour vérification. On va donc avoir besoin d’une nouvelle action Redux spécifique pour réaliser cela, la voici :

/**
 * Try to login: launch the AJAX request and analyse the response.
 * @param {string} email or username
 * @param {string} password
 */
export const login = (email, password) => {
	return (dispatch, getState) => {
		dispatch(startLoading());

		axios.post(
				"https://beerkip.mosaika.fr/wp-json/jwt-auth/v1/token",
				{
					username: email,
					password: password,
				},
				{
					timeout: 10000,
				}
			)
			.then(response => {
				dispatch(stopLoading());

				if (response.status === 200) {
					dispatch(
						loginSuccess({
							token: response.data.token,
							email: response.data.user_email,
							name: response.data.user_display_name,
						})
					);
				} else {
					dispatch(loginError("Something went wrong."));
				}
			})
			.catch(error => {
				dispatch(stopLoading());

				if (
					error.response &&
					error.response.status &&
					error.response.status == 403
				) {
					dispatch(loginError("This e-mail/password combination is incorrect."));
				} else {
					dispatch(loginError("Something went wrong."));
				}
			});
	};
};

Expliquons les différentes étapes de cette fonction :

1. d’abord, on dispatche une action startLoading() qui modifie un état de l’UI stocké dans notre reducer d’app pour indiquer à l’application qu’une action est en cours et qu’un indicateur visuel de chargement doit être affiché,
2. ensuite, on utilise la librairie axios pour exécuter une requête POST vers la route d’API /jwt-auth/v1/token du plugin installé précédemment, en envoyant l’e-mail et le mot de passe entrés dans le formulaire,
3. puis, à la réception de la réponse de cette requête, on va l’analyser. Si son statut est 200, youpi ! L’utilisateur a bien été identifié et on va déclencher une nouvelle action Redux loginSuccess() pour stocker le fameux token JWT localement.
   Sinon, on appelle une autre action loginError() pour enregistrer un message d’erreur adéquat à afficher sur l’écran du formulaire de login.

Signer tous appels d’API nécessitant l’identité de l’utilisateur

Après stockage du JWT localement dans notre reducer app, il va falloir l’utiliser ! Tous les futurs appels AJAX faits aux routes de l’API REST de notre back-end devront contenir ce token : il sera envoyé par l’intermédiaire d’un header Authorization dont la valeur doit être Bearer <token>.

Ainsi, une telle requête exécutée par axios ressemble à ça :

axios.post(
	"https://beerkip.mosaika.fr/wp-json/beerkip/v1/push",
	{ data },
	{ headers: { Authorization: `Bearer ${token}` }, }
)

Côté serveur, l’extension JWT Auth s’occupera d’intercepter très tôt ces requêtes d’API et d’analyser ce header.

S’il est valide, l’utilisateur sera magiquement injecté dans le cycle de vie de traitement de la requête ; des fonctions comme wp_get_current_user() retourneront bien l’utilisateur WordPress correspondant, initiateur de la demande. Le code PHP pourra donc exécuter des actions spécifiques sur ce compte utilisateur précis.

Par contre, si le token n’est pas valide ou a expiré, une erreur avec statut 403 sera renvoyé à l’application React Native. Il faudra dans ce cas déconnecter l’utilisateur et le rediriger vers l’écran de login.

Et voila, nous avons réussi à créer un système permettant à notre appli mobile React Native d’authentifier des comptes utilisateurs créés dans une installation WordPress. N’est-ce pas magnifique 😉 ?