ホームページ >Java >＆＃＆チュートリアル >パスキーを Java Spring Boot に統合する方法

パスキーを Java Spring Boot に統合する方法

王林オリジナル: 2024-08-30 06:03:321228ブラウズ

Java Spring Boot のパスキーの概要

パスキーは、従来のパスワードに依存せずにユーザーを認証する最新の安全な方法を提供します。このガイドでは、Thymeleaf をテンプレートエンジンとして使用して、Java Spring Boot アプリケーションにパスキーを統合するについて説明します。

Corbado のパスキーファースト UI コンポーネントを利用してバックエンドに接続し、実装プロセスを簡素化します。このチュートリアルは、HTML と Java Spring Boot の基本を理解しており、Corbado Java SDK がインストールされていることを前提としています。

完全なオリジナルのチュートリアルを参照してください

Java Spring Boot でのパスキーの実装の前提条件

始める前に、プロジェクトのセットアップに Corbado Java SDK が含まれていることを確認してください。このチュートリアルでは、例としてバージョン 0.0.1 を使用します。次の依存関係を pom.xml ファイルに追加します:

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

Gradle を使用している場合は、次のように追加します。

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

Corbado アカウントとプロジェクトのセットアップ

まず、開発者パネルから Corbado アカウントにサインアップします。セットアップ中に、環境に合わせて「Corvado Complete」を選択し、「Web アプリ」を選択してプロジェクトを構成します。アプリケーション URL と証明書利用者 ID を必ず指定してください。通常は、それぞれ http://localhost:8080 と localhost に設定されます。これらの設定は、パスキーを正しいドメインにバインドするために重要です。

次に、Corvado 開発者パネルから API シークレットを生成します。これは、ユーザーデータの取得を含むバックエンド通信に必要になります。

Java Spring Boot パスキーアプリケーションの構築

Spring Boot スターターリポジトリのクローンを作成します:

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

このプロジェクト内で、HelloController.java の名前を FrontendController.java に変更します。このコントローラーは、ユーザーのリクエストに基づいて HTML ファイルを提供します。 application.properties ファイルに、projectID と apiSecret を環境変数として保存します (どちらも Corbado 開発者パネルから取得できます)。

パスキーログインページの作成

/complete/src/main/resources/templates ディレクトリにindex.html ファイルを作成します。このファイルはログインページとして機能し、Corbado パスキーファースト UI コンポーネントが埋め込まれます。基本的な構造は次のとおりです:

<!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>

パスキー統合用のコントローラーエンドポイントの定義

FrontendController.java で、ログインページとプロファイルページへのリクエストを処理するエンドポイントを定義します。 Index() メソッドはログインページをレンダリングする必要があり、profile() メソッドはユーザーセッションを検証してユーザープロファイルを表示します。

@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";
  }
  ...

パスキープロファイルの追加ページ

認証が成功すると、Corvado UI コンポーネントはユーザーをリダイレクトします。このページにはユーザーに関する情報が表示され、ログアウトするボタンが表示されます。テンプレートフォルダーに、次の内容を含むファイル profile.html を追加します:

<!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>

次に、FrontendController.java 内にアノテーションを含む profile() メソッドを作成します。

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

Corbado セッションを確認する

セッションに埋め込まれた情報を使用する前に、セッションが有効であることを確認する必要があります。したがって、cbo_short_session Cookie (セッション) を取得し、Corbado Java SDK のセッションサービスを使用してその署名を検証します。これは次のコマンドで実行できます:

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

Corbado セッションからデータを取得する

cbo_short_session Cookie を取得して検証し、ユーザー ID とユーザーのフルネームを返します。

プロファイルマッピングの最終コードは次のようになります:

  @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";
  }

アプリケーションの起動

Spring Boot アプリケーションを開始するには、/complete ディレクトリに移動して次のコマンドを実行します。

./mvnw spring-boot:run

ブラウザで http://localhost:8080 にアクセスして、ログインページの動作を確認してください。

How to Integrate Passkeys into Java Spring Boot

結論

このガイドでは、Corbado を使用してパスキーを Java Spring Boot アプリケーションに統合する方法を説明しました。これらの手順に従うことで、パスワードなしの認証を効率的かつ安全に実装できます。セッション管理と既存のアプリケーションへの Corbado の統合に関する詳細なドキュメントについては、公式 Corbado ドキュメントを参照してください。

以上がパスキーを Java Spring Boot に統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Java spring spring boot html define if for while Cookie Session xml Directory using this display web app gradle http ui embedding

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Java の Fork/Join フレームワークとは何ですか?次の記事：Java の Fork/Join フレームワークとは何ですか?

続きを見る