Bagaimana untuk Mengintegrasikan Kunci Laluan ke dalam SvelteKit

Dalam tutorial ini, kami akan membimbing anda membina contoh aplikasi SvelteKit yang menggabungkan pengesahan kunci laluan. Kami akan menunjukkan kepada anda cara untuk menyepadukan komponen UI kunci laluan Corbado dengan lancar untuk pengesahan selamat tanpa kata laluan. Sepanjang perjalanan, kami juga akan menunjukkan cara untuk mendapatkan semula data pengguna pada pelayan menggunakan SDK Corbado Node.js.

Lihat tutorial asal penuh di sini

Prasyarat

Sebelum kami menyelami, anda harus biasa dengan Svelte, JavaScript, HTML dan CSS. Selain itu, anda memerlukan Node.js dan NPM dipasang pada mesin pembangunan anda.

Struktur Projek untuk SvelteKit dengan Kunci Laluan

Kami akan mulakan dengan menyediakan struktur projek SvelteKit asas. Salin kod

.
├── .env
├── package.json
└── src
    ├── app.html
    └── routes
        ├── +layout.svelte
        ├── +layout.server.ts
        ├── +page.svelte
        └── profile
            ├── +page.server.ts
            └── +page.svelte

Ini adalah reka letak penting yang akan kami usahakan. Kebanyakan fail lain boleh diabaikan untuk tujuan tutorial ini.

Menyediakan Projek SvelteKit

Untuk bermula, mulakan projek Svelte baharu menggunakan arahan berikut:

npm create svelte@latest example-passkeys-svelte
cd example-passkeys-svelte
npm install

Semasa persediaan, anda boleh memilih pilihan berikut:

• Templat apl: Projek rangka
• Semakan jenis: Kami menggunakan TypeScript, tetapi jangan ragu untuk memilih berdasarkan pilihan anda.
• Pilihan tambahan: Kami mengesyorkan ESLint dan Prettier untuk kualiti dan pemformatan kod.

Seterusnya, pasang pakej web-js dan node-sdk Corbado:

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

Jalankan projek secara setempat untuk mengesahkan persediaan:

npm run dev

Apl rangka Svelte lalai harus tersedia di http://localhost:5173.

Menambah Kunci Laluan dengan Corbado

Langkah 1: Sediakan Akaun dan Projek Corbado Anda

Daftar di Panel Pembangun Corbado dan buat projek baharu. Pilih "Corbado Complete" untuk produk dan tentukan "Svelte" sebagai rangka kerja. Tentukan URL Aplikasi anda dan tetapkan ID Pihak Bergantung kepada localhost. Selepas ini, dapatkan ID Projek dan rahsia API anda, yang perlu anda simpan dalam pembolehubah persekitaran anda.

Tambahkannya pada fail .env dalam projek anda:

PUBLIC_CORBADO_PROJECT_ID=your-corbado-project-id
CORBADO_API_SECRET=your-corbado-api-secret

Langkah 2: Benamkan Komponen UI Passkey

Pertama, lumpuhkan pemaparan sisi pelayan (SSR) kerana ia tidak disokong oleh pakej web-js Corbado pada masa ini. Cipta fail layout.server.ts dengan kandungan berikut:

export const ssr = false;

Kemudian, benamkan komponen UI kunci laluan Corbado dalam bahagian hadapan anda dengan memulakannya dalam komponen reka letak luar. Ini memastikan apl yang lain hanya dipaparkan sebaik sahaja Corbado dimulakan.

<script lang="ts">
  import Corbado from "@corbado/web-js";
  import { onMount } from "svelte";
  import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';let isInitialized = false;
  onMount(async () => {
    await Corbado.load({
      projectId: PUBLIC_CORBADO_PROJECT_ID,
      darkMode: 'off',
      setShortSessionCookie: true,
    });
    isInitialized = true;
  });
</script>
<div>
  {#if isInitialized}
    <slot></slot>
  {/if}
</div>

Langkah 3: Ubah suai Halaman Utama

Dalam src/routes/ page.svelte, sepadukan komponen UI pendaftaran dan log masuk. Setelah disahkan, ubah hala pengguna ke halaman /profile.

<script lang="ts">
  import Corbado from '@corbado/web-js';
  import { onMount } from 'svelte';let authElement;
  onMount(() => {
    Corbado.mountAuthUI(authElement, {
      onLoggedIn: () => window.location.href = "/profile",
    });
  });
</script>
<div bind:this={authElement}></div>

Langkah 4: Sediakan Halaman Profil

Buat halaman profil di bawah laluan /profile, tempat anda akan mendapatkan dan memaparkan maklumat pengguna menggunakan SDK Nod Corbado.

Dalam page.server.ts, dapatkan semula kuki sesi dan kembalikan data pengguna:

import { SDK, Config } from '@corbado/node-sdk';
import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';
import { CORBADO_API_SECRET } from '$env/static/private';

const config = new Config(PUBLIC_CORBADO_PROJECT_ID, CORBADO_API_SECRET);
const sdk = new SDK(config);
export async function load({ request }) {
  const cookies = parseCookies(request.headers.get('Cookie') || '');
  const cbo_short_session = cookies.cbo_short_session;
  if (!cbo_short_session) return { user: undefined };
  try {
    const user = await sdk.sessions().getCurrentUser(cbo_short_session);
    if (!user.isAuthenticated()) return { user: undefined };
    return { user: { email: user.getEmail(), userID: user.getID() } };
  } catch {
    return { user: undefined };
  }
}
function parseCookies(cookieHeader) {
  return Object.fromEntries(
    cookieHeader.split(';').map(cookie => {
      const [name, ...rest] = cookie.trim().split('=');
      return [name, rest.join('=')];
    })
  );
}

Halaman yang sepadan akan mengakses data pemuat kami dan menunjukkan nama pengguna serta ID pengguna serta menyediakan butang untuk log keluar. Jika pengguna tidak log masuk, kami akan memaparkan pautan kembali ke halaman utama.

<script lang="ts">
    import type { PageData } from './$types';
    import Corbado from '@corbado/web-js';
    import { goto } from '$app/navigation';

    export let data: PageData

    async function handleLogout() {
        await Corbado.logout()
        await goto("/")
    }
</script>

<div>
    {#if (data.user)}
        <h1>
            Profile Page
        </h1>
        <p>
            User-id: {data.user.userID}
        </p>
        <p>
            Name: {data.user.email}
        </p>
        <button on:click={handleLogout}>
            Logout
        </button>
    {:else}
        <h1>
            You aren't logged in.
        </h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

Menjalankan Aplikasi

Setelah semuanya disediakan, jalankan aplikasi anda:

npm run dev

Apl SvelteKit anda dengan pengesahan kunci laluan kini disiarkan. Setelah log masuk, pengguna akan dialihkan ke halaman profil di mana ID dan e-mel mereka dipaparkan.

Kesimpulan

Dalam panduan ini, kami menunjukkan cara untuk menyepadukan pengesahan kunci laluan Corbado ke dalam apl SvelteKit. Pendekatan ini menyediakan pengalaman yang selamat tanpa kata laluan menggunakan komponen UI Corbado yang mudah dilaksanakan. Anda kini boleh mengembangkan perkara ini dan meneroka ciri yang lebih maju seperti pengurusan sesi atau sokongan berbilang peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mengintegrasikan Kunci Laluan ke dalam SvelteKit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!