Comment intégrer les clés d'accès dans Svelte

Dans ce didacticiel, nous expliquerons le processus de mise en œuvre de l'authentification par mot de passe dans une application Svelte. Vous apprendrez comment intégrer le composant d'interface utilisateur de clé d'accès de Corbado pour une expérience de connexion transparente et sécurisée. Ce guide suppose une connaissance de base de Svelte, JavaScript, HTML et CSS.

Si vous êtes prêt à suivre le code, l'exemple complet est disponible dans le référentiel GitHub.

Lisez le tutoriel original et complet ici

Conditions préalables

Avant de commencer, assurez-vous que Node.js et NPM sont installés sur votre machine. De plus, des connaissances de base de Svelte, ainsi que de TypeScript, seront utiles pour suivre ce tutoriel.

Aperçu de la structure du projet

La structure du projet pour cet exemple ressemble à ceci :

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

Nous nous concentrerons uniquement sur les fichiers essentiels à la mise en œuvre des mots de passe. N'hésitez pas à vous référer au référentiel GitHub complet pour tout fichier supplémentaire.

Mettre en place un nouveau projet Svelte

Pour commencer, initialisez un nouveau projet Svelte en exécutant les commandes suivantes :

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

Lors de la configuration, sélectionnez les options suivantes :

• Modèle d'application : Projet Skeleton
• Vérification du type : Utilisez TypeScript
• Options supplémentaires : Incluez ESLint et Prettier pour les contrôles de qualité du code Une fois la configuration terminée, installez les dépendances requises :

npm install @corbado/web-js

Si vous utilisez TypeScript, vous pouvez également installer les types Corbado pour un développement amélioré :

npm install -D @corbado/types

Configurer le compte et le projet Corbado

Accédez au panneau des développeurs Corbado et créez un nouveau compte. Dans l'assistant de configuration du projet, commencez par sélectionner un nom approprié pour votre projet. Pour la sélection de produits, optez pour « Corbado Complete ». Ensuite, spécifiez votre pile technologique et sélectionnez « DEV » ainsi que les options « Gestion de session Corbado ». Vous recevrez ensuite des conseils de configuration plus fondamentaux.

Dans les paramètres de l'application, définissez l'URL de votre application et l'ID de partie de confiance comme suit :

• URL de l'application : http://localhost:5173
• Identifiant du groupe Reyling : localhost Enfin, récupérez votre ID de projet depuis le panneau du développeur et stockez-le dans votre fichier d'environnement. Vous pouvez le trouver ici sous Accès API Corbado.

Votre fichier d'environnement devrait ressembler à ceci :

VITE_CORBADO_PROJECT_ID=<your-project-id>

Vous en aurez besoin plus tard pour intégrer le composant Corbado UI dans votre application Svelte.

Intégration du composant d'interface utilisateur Passkey de Corbado

Ensuite, nous intégrerons le composant Corbado UI pour l'authentification par mot de passe dans notre application Svelte. Tout d’abord, désactivez le rendu côté serveur (SSR), car la version actuelle du package Corbado ne le prend pas en charge.

Dans +layout.server.ts, ajoutez ce qui suit :

export const ssr = false;

Dans +layout.server, initialisez Corbado lorsque l'application est montée :

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

Ce code garantit que l'interface utilisateur est chargée uniquement après l'initialisation de Corbado avec votre projet.

Configuration de l'interface utilisateur d'authentification

Ensuite, nous ajoutons la fonctionnalité d'inscription et de connexion dans le fichier +page.svelte. Cette page gérera l'authentification de l'utilisateur et redirigera vers la page de profil après la connexion

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

Ce code initialise le composant de connexion et le lie au div authElement, gérant la redirection une fois que l'utilisateur se connecte.

Page de profil

La page de profil affiche les informations utilisateur de base après une connexion réussie. Il fournit également un bouton de déconnexion pour mettre fin à la session.

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

Cette page vérifie si l'utilisateur est authentifié, affiche ses détails et offre une option pour se déconnecter.

Exécution de l'application

Une fois que tout est configuré, exécutez la commande suivante pour démarrer le serveur de développement :

npm run dev

L'application sera accessible sur http://localhost:5173.

Conclusion

Dans ce didacticiel, nous avons expliqué comment implémenter l'authentification par mot de passe dans une application Svelte à l'aide de Corbado. Cette intégration permet des connexions sécurisées et sans mot de passe, améliorant à la fois l'expérience utilisateur et la sécurité. En utilisant la gestion des sessions de Corbado, nous pouvons facilement récupérer les données utilisateur et gérer les sessions dans votre application.

Pour des implémentations plus avancées, telles que la récupération des données utilisateur côté serveur, reportez-vous à la documentation Corbado.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!