Comment intégrer les clés d'accès dans Java Spring Boot-javaDidacticiel-php.cn

Introduction aux clés d'accès dans Java Spring Boot

Les clés d'accès offrent un moyen moderne et sécurisé d'authentifier les utilisateurs sans recourir aux mots de passe traditionnels. Dans ce guide, nous vous expliquerons comment intégrer des clés d'accès dans une application Java Spring Boot en utilisant Thymeleaf comme moteur de modèle.

Nous utiliserons le composant d'interface utilisateur de Corbado avec clé d'accès pour nous connecter à un backend, simplifiant ainsi le processus de mise en œuvre. Ce didacticiel suppose que vous avez une compréhension de base de HTML et Java Spring Boot et que vous avez installé le SDK Java Corbado.

Voir le tutoriel original complet

Conditions préalables à l'implémentation de clés d'accès dans Java Spring Boot

Avant de commencer, assurez-vous que la configuration de votre projet inclut le SDK Java Corbado. Pour ce tutoriel, nous utiliserons la version 0.0.1 comme exemple. Ajoutez la dépendance suivante à votre fichier pom.xml :

<dependency>
  <groupId>com.corbado</groupId>
  <artifactId>corbado-java</artifactId>
  <version>0.0.1</version>
</dependency>

Copier après la connexion

Alternativement, si vous utilisez Gradle, ajoutez :

implementation "com.corbado:corbado-java:0.0.1"

Copier après la connexion

Configuration de votre compte et de votre projet Corbado

Pour commencer, créez un compte Corbado via le panneau des développeurs. Lors de l'installation, vous configurerez votre projet en sélectionnant « Corbado Complete » et en choisissant « Application Web » pour votre environnement. Assurez-vous de fournir l'URL de l'application et l'ID de la partie de confiance, généralement définis respectivement sur http://localhost:8080 et localhost. Ces paramètres sont cruciaux pour lier les clés d'accès au domaine correct.

Ensuite, générez un secret API à partir du panneau de développement Corbado. Cela sera nécessaire pour les communications back-end, y compris la récupération des données utilisateur.

Création de votre application de clé d'accès Java Spring Boot

Clonez le référentiel de démarrage Spring Boot :

git clone https://github.com/spring-guides/gs-spring-boot.git

Copier après la connexion

Dans ce projet, renommez HelloController.java en FrontendController.java. Ce contrôleur servira les fichiers HTML en fonction des demandes des utilisateurs. Dans votre fichier application.properties, stockez le projectID et apiSecret en tant que variables d'environnement (les deux peuvent être obtenus à partir du panneau de développement Corbado).

Création de la page de connexion des clés d'accès

Créez un fichier index.html dans le répertoire /complete/src/main/resources/templates. Ce fichier servira de page de connexion, intégrant le composant d'interface utilisateur Corbado avec clé d'accès d'abord. Voici la structure de base :

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.css"/>
  <script src="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.js" defer></script>
</head>
<body>
  <div id="corbado-auth"></div>
  <script th:inline="javascript">
    document.addEventListener('DOMContentLoaded', async () => {
      await Corbado.load({
        projectId: '[PROJECT_ID]',
        darkMode: "off",
        setShortSessionCookie: "true"
      });
      Corbado.mountAuthUI(document.getElementById('corbado-auth'), {
        onLoggedIn: () => window.location.href = '/profile',
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Définition des points de terminaison du contrôleur pour l'intégration des clés d'accès

Dans FrontendController.java, définissez les points de terminaison pour gérer les demandes adressées aux pages de connexion et de profil. La méthode index() doit restituer la page de connexion, tandis que la méthode profile() validera la session utilisateur et affichera le profil utilisateur.

@Controller
public class FrontendController {

  @Value("${projectID}")
  private String projectID;

  @Value("${apiSecret}")
  private String apiSecret;

  private final CorbadoSdk sdk;

  @Autowired
  public FrontendController(
      @Value("${projectID}") final String projectID, @Value("${apiSecret}") final String apiSecret)
      throws StandardException {
    final Config config = new Config(projectID, apiSecret);
    this.sdk = new CorbadoSdk(config);
  }

  @RequestMapping("/")
  public String index(final Model model) {
    model.addAttribute("PROJECT_ID", projectID);
    return "index";
  }
  ...

Copier après la connexion

Ajouter une page de profil de clé d'accès

Après une authentification réussie, le composant Corbado UI redirige l'utilisateur. Cette page affiche des informations sur l'utilisateur et fournit un bouton pour se déconnecter. Dans le dossier des modèles, ajoutez un fichier profile.html avec le contenu suivant :

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.css"
      />
      <script src="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.js" defer></script>
    </head>
    <body>

     <!-- Define passkey-list div and logout button -->
    <h2>:/protected</h2>
    <p>User ID: [[${USER_ID}]]</p>
    <p>Name: [[${USER_NAME}]]</p>
    <p>Email: [[${USER_EMAIL}]]</p>
    <div id="passkey-list"></div>
    <button id="logoutButton">Logout</button>


    <!-- Script to load Corbado and mount PasskeyList UI -->
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', async () => {
            await Corbado.load({
                projectId: /*[[${PROJECT_ID}]]*/,
                darkMode: "off",
                setShortSessionCookie: "true" // set short session cookie automatically
            }); 

            // Get and mount PasskeyList UI
            const passkeyListElement = document.getElementById("passkey-list"); // Element where you want to render PasskeyList UI
            Corbado.mountPasskeyListUI(passkeyListElement);

            // Get logout button
            const logoutButton = document.getElementById('logoutButton');
            // Add event listener to logout button
            logoutButton.addEventListener('click', function() {
              Corbado.logout()
                    .then(() => {
                        window.location.replace("/");
                    })
                    .catch(err => {
                        console.error(err);
                    });
            });
        })();
    </script>


</body>
</html>

Copier après la connexion

Ensuite, créez une méthode profile() avec une annotation à l'intérieur de FrontendController.java :

@RequestMapping("/profile")
public String profile() {
  return "profile";
}

Copier après la connexion

Vérifier la session Corbado

Avant de pouvoir utiliser les informations intégrées dans la session, nous devons vérifier que la session est valide. Nous prenons donc le cookie cbo_short_session (la session) et vérifions sa signature à l'aide du service de session du SDK Java Corbado. Cela peut être fait avec :

final SessionValidationResult validationResp =
          sdk.getSessions().getAndValidateCurrentUser(cboShortSession);

Copier après la connexion

Obtenir des données de la session Corbado

Il prend le cookie cbo_short_session, le valide et renvoie l'ID utilisateur et le nom complet de l'utilisateur.

Le code final du mappage de profil se présente comme suit :

  @RequestMapping("/profile")
  public String profile(
      final Model model, @CookieValue("cbo_short_session") final String cboShortSession) {
    try {
      // Validate user from token
      final SessionValidationResult validationResp =
          sdk.getSessions().getAndValidateCurrentUser(cboShortSession);
      // get list of emails from identifier service
      List<Identifier> emails;

      emails = sdk.getIdentifiers().listAllEmailsByUserId(validationResp.getUserID());

      //
      model.addAttribute("PROJECT_ID", projectID);
      model.addAttribute("USER_ID", validationResp.getUserID());
      model.addAttribute("USER_NAME", validationResp.getFullName());
      // select email of your liking or list all emails
      model.addAttribute("USER_EMAIL", emails.get(0).getValue());

    } catch (final Exception e) {
      System.out.println(e.getMessage());
      model.addAttribute("ERROR", e.getMessage());
      return "error";
    }
    return "profile";
  }

Copier après la connexion

Lancement de votre application

Pour démarrer votre application Spring Boot, accédez au répertoire /complete et exécutez :

./mvnw spring-boot:run

Copier après la connexion

Visitez http://localhost:8080 dans votre navigateur pour voir la page de connexion en action.

How to Integrate Passkeys into Java Spring Boot

Conclusion

Ce guide a montré comment intégrer des clés d'accès dans une application Java Spring Boot à l'aide de Corbado. En suivant ces étapes, vous pouvez mettre en œuvre une authentification sans mot de passe de manière efficace et sécurisée. Pour une documentation plus détaillée sur la gestion de session et l'intégration de Corbado dans les applications existantes, reportez-vous à la documentation officielle de Corbado.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!