Heim > Java > javaLernprogramm > Hauptteil

So integrieren Sie Passkeys in Java Spring Boot

王林
Freigeben: 2024-08-30 06:03:32
Original
1182 Leute haben es durchsucht

Einführung in Passkeys in Java Spring Boot

Passkeys bieten eine moderne, sichere Möglichkeit, Benutzer zu authentifizieren, ohne auf herkömmliche Passwörter angewiesen zu sein. In diesem Leitfaden führen wir Sie durch die Integration von Passkeys in eine Java Spring Boot-Anwendung unter Verwendung von Thymeleaf als Template-Engine.

Wir nutzen die Passkey-First-UI-Komponente von Corbado, um eine Verbindung zu einem Backend herzustellen und so den Implementierungsprozess zu vereinfachen. In diesem Tutorial wird davon ausgegangen, dass Sie über grundlegende Kenntnisse von HTML und Java Spring Boot verfügen und das Corbado Java SDK installiert haben.

Sehen Sie sich das vollständige Original-Tutorial an

Voraussetzungen für die Implementierung von Passkeys in Java Spring Boot

Bevor wir beginnen, stellen Sie sicher, dass Ihr Projekt-Setup das Corbado Java SDK enthält. Für dieses Tutorial verwenden wir Version 0.0.1 als Beispiel. Fügen Sie Ihrer pom.xml-Datei die folgende Abhängigkeit hinzu:

<dependency>
  <groupId>com.corbado</groupId>
  <artifactId>corbado-java</artifactId>
  <version>0.0.1</version>
</dependency>
Nach dem Login kopieren

Wenn Sie Gradle verwenden, fügen Sie alternativ Folgendes hinzu:

implementation "com.corbado:corbado-java:0.0.1"
Nach dem Login kopieren

Einrichten Ihres Corbado-Kontos und -Projekts

Melden Sie sich zunächst über das Entwicklerpanel für ein Corbado-Konto an. Während der Einrichtung konfigurieren Sie Ihr Projekt, indem Sie „Corbado Complete“ und „Web-App“ für Ihre Umgebung auswählen. Stellen Sie sicher, dass Sie die Anwendungs-URL und die Relying-Party-ID angeben, die normalerweise auf http://localhost:8080 bzw. localhost eingestellt sind. Diese Einstellungen sind entscheidend für die Bindung von Passkeys an die richtige Domäne.

Generieren Sie als Nächstes ein API-Geheimnis aus dem Corbado-Entwicklerpanel. Dies ist für die Backend-Kommunikation erforderlich, einschließlich des Abrufs von Benutzerdaten.

Erstellen Sie Ihre Java Spring Boot Passkey-Anwendung

Klonen Sie das Spring Boot-Starter-Repository:

git clone https://github.com/spring-guides/gs-spring-boot.git
Nach dem Login kopieren

In diesem Projekt benennen Sie HelloController.java in FrontendController.java um. Dieser Controller stellt HTML-Dateien basierend auf Benutzeranfragen bereit. Speichern Sie in Ihrer application.properties-Datei die Projekt-ID und apiSecret als Umgebungsvariablen (beide können über das Corbado-Entwicklerpanel abgerufen werden).

Erstellen der Passkeys-Anmeldeseite

Erstellen Sie eine index.html-Datei im Verzeichnis /complete/src/main/resources/templates. Diese Datei dient als Anmeldeseite und bettet die Corbado-Passkey-First-UI-Komponente ein. Hier ist die Grundstruktur:

<!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>
Nach dem Login kopieren

Definieren von Controller-Endpunkten für die Passkeys-Integration

Definieren Sie in FrontendController.java Endpunkte, um Anfragen an die Anmelde- und Profilseiten zu verarbeiten. Die index()-Methode sollte die Anmeldeseite rendern, während die Profile()-Methode die Benutzersitzung validiert und das Benutzerprofil anzeigt.

@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";
  }
  ...
Nach dem Login kopieren

Passkey-Profilseite hinzufügen

Nach erfolgreicher Authentifizierung leitet die Corbado-UI-Komponente den Benutzer weiter. Auf dieser Seite werden Informationen über den Benutzer angezeigt und eine Schaltfläche zum Abmelden bereitgestellt. Fügen Sie im Vorlagenordner eine Datei „profile.html“ mit folgendem Inhalt hinzu:

<!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>
Nach dem Login kopieren

Als nächstes erstellen Sie eine Profile()-Methode mit Annotation in FrontendController.java:

@RequestMapping("/profile")
public String profile() {
  return "profile";
}
Nach dem Login kopieren

Überprüfen Sie die Corbado-Sitzung

Bevor wir in der Sitzung eingebettete Informationen verwenden können, müssen wir überprüfen, ob die Sitzung gültig ist. Wir nehmen daher das cbo_short_session-Cookie (die Sitzung) und überprüfen seine Signatur mithilfe des Sitzungsdienstes des Corbado Java SDK. Dies kann erfolgen mit:

final SessionValidationResult validationResp =
          sdk.getSessions().getAndValidateCurrentUser(cboShortSession);
Nach dem Login kopieren

Holen Sie sich Daten aus der Corbado-Sitzung

Es nimmt das cbo_short_session-Cookie, validiert es und gibt die Benutzer-ID und den vollständigen Namen des Benutzers zurück.

Der endgültige Code für die Profilzuordnung sieht wie folgt aus:

  @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";
  }
Nach dem Login kopieren

Starten Ihrer Anwendung

Um Ihre Spring Boot-Anwendung zu starten, navigieren Sie zum Verzeichnis /complete und führen Sie Folgendes aus:

./mvnw spring-boot:run
Nach dem Login kopieren

Besuchen Sie http://localhost:8080 in Ihrem Browser, um die Anmeldeseite in Aktion zu sehen.

How to Integrate Passkeys into Java Spring Boot

Abschluss

Diese Anleitung zeigt, wie man Passkeys mit Corbado in eine Java Spring Boot-Anwendung integriert. Wenn Sie diese Schritte befolgen, können Sie die passwortlose Authentifizierung effizient und sicher implementieren. Eine ausführlichere Dokumentation zum Sitzungsmanagement und zur Integration von Corbado in bestehende Anwendungen finden Sie in der offiziellen Corbado-Dokumentation.

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Passkeys in Java Spring Boot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage