チュートリアル: パスキーを Nuxt.js に統合する方法

導入

このチュートリアルでは、パスキー認証を Nuxt.js アプリケーションに統合するプロセスを説明します。 Nuxt.js プロジェクトのセットアップから、シームレスなパスキー ログイン エクスペリエンスを実現する Corbado UI コンポーネントの実装まで、すべてを取り上げます。

コードに直接取り組みたい場合は、GitHub リポジトリで完全な例を見つけることができます。

ブログ投稿全文はこちらからお読みください

前提条件

実装に入る前に、Nuxt.js、HTML、CSS、JavaScript の基本を理解していることを確認してください。さらに、開発マシンに Node.js と NPM をインストールする必要があります。

プロジェクトの構造

Nuxt.js プロジェクトの構造の概要を次に示します。

.
├── .env
├── package.json
├── nuxt.config.ts
├── pages
|   ├── index.vue 
|   └── profile.vue
└── layouts 
    └── default.vue

この構造は、パスキー認証を実装するための基盤として機能します。

Nuxt.js プロジェクトのセットアップ

まず、新しい Nuxt.js プロジェクトを初期化しましょう

npx nuxi@latest init passkeys-demo-nuxtjs
cd passkeys-demo-nuxtjs
npm install
npm run dev

これにより、http://localhost:3000 でアプリケーションが起動します。

Corbado のパスキー認証の実装

Corbado アカウントのセットアップ

まず、開発者パネルから Corbado アカウントにサインアップします。セットアップ中に、製品として「Corvado Complete」を選択し、フレームワークとして「Nuxt.js」を指定します。ローカル開発環境に応じて、アプリケーション URL と証明書利用者 ID を構成します。
プロジェクト ID を使用して .env ファイルを更新します。プロジェクト ID は Corbado 開発者パネルから取得できます。

VITE_CORBADO_PROJECT_ID=<your-project-id>

Corbado UI コンポーネントの埋め込み

Corvado Web-js ライブラリをインストールします:

npm i @corbado/web-js
npm i -D @corbado/types

次に、/layouts/default.vue でレイアウトを設定して Corbado プロジェクトを初期化します。

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const isInitialized = useState('isInitialized', () => false);
  const projectId = import.meta.env.VITE_CORBADO_PROJECT_ID;
  onMounted(async () => {
    await Corbado.load({
      projectId: projectId,
      darkMode: "off"
    });
    isInitialized.value = true;
  });
</script>
<template>
  <div v-if="isInitialized">
    <slot/>
  </div>
</template>

この設定により、コンポーネントをレンダリングする前に Corbado プロジェクトが初期化されます。

ログインページの作成

次に、/pages/index.vue にログイン ページを作成しましょう:

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const authElement = useState<HTMLDivElement | undefined>('authElement', () => undefined);
  onMounted(() => {
    if (authElement.value) {
      Corbado.mountAuthUI(authElement.value, {
        onLoggedIn: () => {
          navigateTo("/profile");
        },
      });
    }
  });
</script>
<template>
  <div ref="authElement"></div>
</template>

このコード スニペットは認証 UI を設定し、ログイン成功後のリダイレクトを処理します。

プロフィールページの設定

ログイン後、ユーザーはプロファイル ページにリダイレクトされます。このページは /pages/profile.vue:
に作成します。

<script setup lang="ts">
  import Corbado from "@corbado/web-js"const user = Corbado.user;
  async function handleLogout() {
    await Corbado.logout();
    await navigateTo("/");
  }
</script>
<template>
  <div>
    <div v-if="user">
      <h1>Profile Page</h1>
      <p>
        User-ID: {{ user.sub }}
        <br />
        Email: {{ user.email }}
      </p>
      <button @click="handleLogout">Logout</button>
    </div>
    <div v-else>
      <p>You're not logged in.</p>
      <p>
        Please go back to <NuxtLink href="/">home</NuxtLink> to log in.
      </p>
    </div>
  </div>
</template>

このページには、認証が成功した後のユーザー情報が表示され、ログアウト ボタンが含まれています。
次のコマンドを使用してアプリケーションを実行します:

npm run dev

結論

このガイドでは、Corbado の UI コンポーネントを使用して、Nuxt.js アプリケーションにパスキーベースの認証を実装する方法を説明しました。この設定を使用すると、Web アプリケーションで安全でユーザー フレンドリーなログイン エクスペリエンスを提供できます。セッション管理やその他の機能の詳細については、Corbado のドキュメントまたはブログ投稿全体を参照してください。
これらの手順に従うことで、最新のパスワードレス認証を使用して Nuxt.js アプリケーションのセキュリティを強化できます。

以上がチュートリアル: パスキーを Nuxt.js に統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。