Chapitre API RESTful avec Quarkus

Intégration de l'authentification JWT avec Quarkus

{{ resumeCollapse ? '-' : '+' }} Résumé

Le but de cet exercice est de mettre en place la sécurité JWT. Nous allons créer une page web qui permet de s'authentifier, afficher les tokens de vérification et de refresh, de lancer un refresh de token et tester l'authentification.

Dernière modification : Dec 08 , 2024

Prérequis

Avant de commencer cet exercice, assurez-vous d'avoir les éléments suivants installés sur votre système :

JDK 11 ou supérieur
Apache Maven
Un éditeur de texte ou une IDE Java (comme Eclipse, IntelliJ IDEA, ou Visual Studio Code)

Dans le projet frontend-monster-adoption-store, nous allons créer une page web appelée login.html qui va permettre à l'utilisateur de s'authentifier.

Si l'authentication réussit, les tokens de vérification et de refresh seront affichés dans la page.

Deux autres boutons seront présents pour lancer un refresh de token et pour tester l'authentification.

Commencez par créer le fichier login.html dans le répertoire src/main/resources/META-INF/resources/.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
  </head>
  <body>
    <h1>Login</h1>
    <form id="login-form" action="/login/form" method="post">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" />
      <label for="password">Password</label>
      <input type="password" id="password" name="password" />
      <button type="submit">Login</button>
    </form>
    <h2>Tokens</h2>
    <div id="tokens">
      <div id="access-token">{access_token}</div>
      <div id="refresh-token">{refresh_token}</div>
    </div>
    <h2>Refresh token</h2>
    <button id="refresh-token-button" onclick="refreshToken()">
      Refresh token
    </button>
    <button id="test-auth-button" onclick="authToken()">
      Test authentication
    </button>
    <script lang="javascript" src="/js/login.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
  </head>
  <body>
    <h1>Login</h1>
    <form id="login-form" action="/login/form" method="post">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" />
      <label for="password">Password</label>
      <input type="password" id="password" name="password" />
      <button type="submit">Login</button>
    </form>
    <h2>Tokens</h2>
    <div id="tokens">
      <div>
        <label for="access-token">Access token</label>
        <textarea cols="120" rows="10" id="access-token">
{access_token}</textarea
        >
      </div>
      <div>
        <label for="refresh-token">Refresh token</label>
        <textarea cols="120" rows="10" id="refresh-token">
{refresh_token}</textarea
        >
      </div>
    </div>
    <h2>Refresh token</h2>
    <button id="refresh-token-button" onclick="refreshToken()">
      Refresh token
    </button>
    <button id="test-auth-button" onclick="authToken()">
      Test authentication
    </button>
    <script lang="javascript" src="/js/login.js"></script>
  </body>
</html>

Nous allons maintenant créer le fichier login.js dans le répertoire src/main/resources/META-INF/resources/js/

const loginForm = document.getElementById("login-form");
const accessToken = document.getElementById("access-token");
const refreshToken = document.getElementById("refresh-token");
const refreshTokenButton = document.getElementById("refresh-token-button");
const testAuthButton = document.getElementById("test-auth-button");

function refreshToken() {
  console.log("Refreshing token");
  fetch("/login/refresh", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + refreshToken.innerText,
    },
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      accessToken.innerText = data.access_token;
      refreshToken.innerText = data.refresh_token;
    });
}

function authToken() {
  console.log("Testing authentication");
  fetch("/login/auth", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + refreshToken.innerText,
    },
  }).then((response) => {
    if (response.status === 200) {
      alert("Authentication successful");
    } else {
      alert("Authentication failed");
    }
  });
}

Ajouter les dépendances

Nous devons désormais ajouter l'extension nécessaire à Quarkus pour supporter les authentifications avec JWT.

Voici trois liens utiles :

Ajouter les extensions smallrye-jwt et smallrye-jwt-build avec la commande suivante :

quarkus extension add smallrye-jwt,smallrye-jwt-build

Création des endpoints

Nous allons maintenant créer la ressource REST qui alimente la page de login et les différentes actions.

Pour ce faire, nous allons créer une nouvelle classe LoginResource dans le package com.byoskill.controllers.

Copiez-coller le code suivant dans la classe LoginResource :

package com.byoskill.auth.controllers;


import io.quarkus.qute.Template;
import io.quarkus.qute.TemplateInstance;
import io.smallrye.jwt.build.Jwt;
import io.smallrye.mutiny.Uni;
import jakarta.annotation.security.PermitAll;
import jakarta.annotation.security.RolesAllowed;
import jakarta.inject.Inject;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.*;
import org.eclipse.microprofile.jwt.Claims;
import org.eclipse.microprofile.jwt.JsonWebToken;

import java.util.Arrays;
import java.util.HashSet;

@Path("/login")
public class LoginResource {
    public static final String ACCESS_TOKEN = "access_token";
    public static final String REFRESH_TOKEN = "refresh_token";
    @Inject
    Template login;

    @Inject
    JsonWebToken jwt;

    public LoginResource() {
    }

    // This endpoint generates a JWT token if the username is test and the password is password.
    @POST
    @Path("/form")
    @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
    @Produces(MediaType.TEXT_HTML)
    public Response authenticate(
            @FormParam("username") final String username,
            @FormParam("password") final String password,
            @Context final HttpHeaders request) {


        return Response.ok(login.instance()
                        .data(ACCESS_TOKEN, "invalid")
                        .data(REFRESH_TOKEN, "invalid"))
                .build();
    }

    @POST
    @Path("/refresh")
    @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
    @Produces(MediaType.TEXT_HTML)
    @RolesAllowed("User")
    public Uni<TemplateInstance> refreshToken(@Context final HttpHeaders request) {


        return get(request);
    }

    @PermitAll
    @GET
    @Produces(MediaType.TEXT_HTML)
    public Uni<TemplateInstance> get(@Context final HttpHeaders request) {
        return Uni.createFrom()
                .item(login.instance()
                        .data(ACCESS_TOKEN, request.getHeaderString("access_token"))
                        .data(REFRESH_TOKEN, request.getHeaderString("refresh_token")));
    }


    @GET
    @Path("/test")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.TEXT_PLAIN)
    @RolesAllowed("User")
    public Response testAuth(@Context final SecurityContext ctx) {

        if (jwt.containsClaim("microservice") && jwt.getClaim("microservice").equals("auth-service")) {
            return Response.ok(getResponseString(ctx)).build();
        } else {
            return Response.status(Response.Status.UNAUTHORIZED).entity("Cannot check the access token").build();
        }
    }

    private String getResponseString(final SecurityContext ctx) {
        final String name;
        if (null == ctx.getUserPrincipal()) {
            name = "anonymous";
        } else if (!ctx.getUserPrincipal().getName().equals(jwt.getName())) {
            throw new InternalServerErrorException("Principal and JsonWebToken names do not match");
        } else {
            name = ctx.getUserPrincipal().getName();
        }
        return String.format("hello + %s,"
                        + " isHttps: %s,"
                        + " authScheme: %s,"
                        + " hasJWT: %s",
                name, ctx.isSecure(), ctx.getAuthenticationScheme(), hasJwt());
    }

    private boolean hasJwt() {
        return null != jwt.getClaimNames();
    }

}

Ajout des propriétés pour la génération du JWT

Nous devons ajouter quelques propriétés dans le fichier application.properties pour générer le JWT.

smallrye.jwt.sign.key.location=privateKey.pem
smallrye.jwt.encrypt.key.location=publicKey.pem

quarkus.native.resources.includes=publicKey.pem,privateKey.pem

Nous définissons l'emplacement de la clé publique pour pointer vers un emplacement de classe publicKey.pem. Nous ajouterons cette clé dans la partie B, Ajout d'une clé publique.
Nous définissons l'émetteur comme étant la chaîne URL https://example.com/issuer.
Nous incluons la clé publique en tant que ressource dans l'exécutable natif.

Nous devons également créer un fichier publicKey.pem dans le répertoire src/main/resources.

Utilisez ce fichier par exemple :

Ou vous pouvez utiliser le site jwt.io pour générer une clé publique

Pour la génération nous aurons également besoin d'une clé privée comme celle-ci dans privateKey.pem

Modification de l'endpoint d'authentification pour la génération du token JWT

Nous allons modifier l'endpoint /login/form pour générer le token JWT. Il générera un token si le username est test et le mode de passe est password.

  @POST
@Path("/form")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Produces(MediaType.TEXT_HTML)
public Response authenticate(
@FormParam("username") final String username,
@FormParam("password") final String password,
@Context final HttpHeaders request) {

        if ("test".equals(username) && "password".equals(password)) {
final String token =
        Jwt.issuer("https://example.com/issuer")
        .upn("jdoe@quarkus.io")
        .groups(new HashSet<>(Arrays.asList("User", "Admin")))
        .claim(Claims.birthdate.name(), "2001-07-13")
        .claim("microservice", "auth-service")
        .sign();

        return Response.ok(login.instance().data("access_token", token)
        .data("refresh_token", token)).build();
        }
        return Response.ok(login.instance()
        .data(ACCESS_TOKEN, "invalid")
        .data(REFRESH_TOKEN, "invalid"))
        .build();
}

Tester l'authentification

Pour vérifier les tokens, il faut déclarer la clé publique et le service responsable de l'émission du token dans le fichier application.properties.

mp.jwt.verify.publickey.location=publicKey.pem
mp.jwt.verify.issuer=https://example.com/issuer

Insérer le username test et le mot de passe password dans le formulaire pour obtenir un token d'authentification.

Vous pouvez ensuite tenter de vous authentifier avec le bouton associé.

N'hésitez pas à jouer avec les claims et les roles pour comprendre le comportement de JWT.

Exercice facultatif : utiliser la propriété mp.jwt.verify.issuer plutot qu'une constante.