Bagaimana Untuk Mengintegrasikan Kunci Laluan ke dalam Svelte

Dalam tutorial ini, kami akan melalui proses melaksanakan pengesahan berasaskan kunci laluan dalam apl Svelte. Anda akan belajar cara mengintegrasikan komponen UI kunci laluan Corbado untuk pengalaman log masuk yang lancar dan selamat. Panduan ini menganggap kebiasaan asas dengan Svelte, JavaScript, HTML dan CSS.

Jika anda sudah bersedia untuk mengikuti kod tersebut, contoh lengkap tersedia dalam repositori GitHub.

Baca tutorial penuh asal di sini

Prasyarat

Sebelum bermula, pastikan anda memasang Node.js dan NPM pada mesin anda. Selain itu, pengetahuan asas tentang Svelte, bersama-sama TypeScript, akan bermanfaat untuk mengikuti tutorial ini.

Gambaran Keseluruhan Struktur Projek

Struktur projek untuk contoh ini kelihatan seperti ini:

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

Kami hanya akan menumpukan pada fail penting untuk melaksanakan kunci laluan. Sila rujuk repositori penuh GitHub untuk sebarang fail tambahan.

Menyediakan Projek Svelte Baharu

Untuk memulakan, mulakan projek Svelte baharu dengan menjalankan arahan berikut:

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

Semasa persediaan, pilih pilihan berikut:

• Templat apl: Projek rangka
• Semakan jenis: Gunakan TypeScript
• Pilihan tambahan: Sertakan ESLint dan Prettier untuk semakan kualiti kod Setelah persediaan selesai, pasang kebergantungan yang diperlukan:

npm install @corbado/web-js

Jika anda menggunakan TypeScript, anda juga boleh memasang jenis Corbado untuk pembangunan yang dipertingkatkan:

npm install -D @corbado/types

Sediakan Akaun dan Projek Corbado

Akses panel pembangun Corbado dan buat akaun baharu. Dalam wizard persediaan projek, mulakan dengan memilih nama yang sesuai untuk projek anda. Untuk pemilihan produk, pilih "Corbado Complete". Selepas itu, nyatakan tindanan teknologi anda dan pilih "DEV" bersama-sama dengan pilihan "Pengurusan sesi Corbado". Selepas itu, anda akan mendapat lebih banyak panduan persediaan asas.

Dalam tetapan aplikasi, tentukan URL Aplikasi anda dan ID Pihak Bergantung seperti berikut:

• URL Permohonan: http://localhost:5173
• ID Parti Reyling: localhost Akhir sekali, dapatkan ID projek anda daripada panel pembangun dan simpannya dalam fail persekitaran anda. Anda boleh menemuinya di sini di bawah akses Corbado API.

Fail persekitaran anda sepatutnya kelihatan seperti ini:

VITE_CORBADO_PROJECT_ID=<your-project-id>

Anda akan memerlukannya kemudian untuk membenamkan komponen UI Corbado dalam apl Svelte anda.

Membenamkan Komponen UI Passkey Corbado

Seterusnya, kami akan menyepadukan komponen UI Corbado untuk pengesahan kunci laluan ke dalam apl Svelte kami. Pertama, lumpuhkan pemaparan sisi pelayan (SSR), kerana versi pakej semasa Corbado tidak menyokongnya.

Dalam +layout.server.ts, tambahkan yang berikut:

export const ssr = false;

Dalam +layout.server, mulakan Corbado apabila apl dipasang:

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";

    const PROJECT_ID = import.meta.env.VITE_CORBADO_PROJECT_ID;
    let isInitialized = false;onMount(async () => {
        await Corbado.load({
            projectId: PROJECT_ID,
            darkMode: 'off'
        });
        isInitialized = true;
    });
</script>
<div>
    {#if isInitialized}
        <slot></slot>
    {/if}
</div>

Kod ini memastikan bahawa UI dimuatkan hanya selepas Corbado dimulakan dengan projek anda.

Menyediakan UI Pengesahan

Seterusnya, kami menambah fungsi pendaftaran dan log masuk dalam fail +page.svelte. Halaman ini akan mengendalikan pengesahan pengguna dan mengubah hala ke halaman profil selepas log masuk

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

Kod ini memulakan komponen log masuk dan mengikatnya pada div authElement, mengendalikan ubah hala sebaik sahaja pengguna log masuk.

Halaman Profil

Halaman profil memaparkan maklumat pengguna asas selepas log masuk berjaya. Ia juga menyediakan butang log keluar untuk menamatkan sesi.

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";let user = undefined;
    onMount(() => {
        user = Corbado.user;
    });
    async function handleLogout() {
        await Corbado.logout();
        window.location.href = "/";
    }
</script>
<div>
    {#if user}
        <h1>Profile Page</h1>
        <p>User-id: {user.sub}</p>
        <p>Name: {user.name}</p>
        <button on:click={handleLogout}>Logout</button>
    {:else}
        <h1>You aren't logged in.</h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

Halaman ini menyemak sama ada pengguna disahkan, memaparkan butiran mereka dan menyediakan pilihan untuk log keluar.

Menjalankan Aplikasi

Setelah semuanya disediakan, jalankan arahan berikut untuk memulakan pelayan pembangunan:

npm run dev

Apl ini boleh diakses di http://localhost:5173.

Kesimpulan

Dalam tutorial ini, kami membincangkan cara melaksanakan pengesahan kunci laluan dalam aplikasi Svelte menggunakan Corbado. Penyepaduan ini membolehkan log masuk selamat tanpa kata laluan, meningkatkan pengalaman dan keselamatan pengguna. Dengan menggunakan pengurusan sesi Corbado, kami boleh mendapatkan semula data pengguna dan mengurus sesi merentas aplikasi anda dengan mudah.

Untuk pelaksanaan yang lebih maju, seperti mendapatkan semula bahagian pelayan data pengguna, rujuk dokumentasi Corbado.

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