Dans ce didacticiel, nous vous guiderons dans la création d'un exemple d'application SvelteKit qui intègre l'authentification par mot de passe. Nous vous montrerons comment intégrer de manière transparente le composant d'interface utilisateur de clé d'accès de Corbado pour une authentification sécurisée et sans mot de passe. En cours de route, nous montrerons également comment récupérer les données utilisateur sur le serveur à l'aide du SDK Corbado Node.js.
Voir le tutoriel complet et original ici
Avant de plonger dans le vif du sujet, vous devez être familier avec Svelte, JavaScript, HTML et CSS. De plus, vous devez installer Node.js et NPM sur votre machine de développement.
Nous allons commencer par mettre en place une structure de base du projet SvelteKit. Copier le code
. ├── .env ├── package.json └── src ├── app.html └── routes ├── +layout.svelte ├── +layout.server.ts ├── +page.svelte └── profile ├── +page.server.ts └── +page.svelte
C’est la mise en page essentielle avec laquelle nous allons travailler. La plupart des autres fichiers peuvent être ignorés dans le cadre de ce didacticiel.
Pour commencer, initialisez un nouveau projet Svelte à l'aide de la commande suivante :
npm create svelte@latest example-passkeys-svelte cd example-passkeys-svelte npm install
Lors de la configuration, vous pouvez sélectionner les options suivantes :
Ensuite, installez les packages web-js et node-sdk de Corbado :
npm i @corbado/web-js @corbado/node-sdk npm i -D @corbado/types
Exécutez le projet localement pour vérifier la configuration :
npm run dev
L'application squelette Svelte par défaut devrait être disponible sur http://localhost:5173.
Inscrivez-vous au panel de développeurs Corbado et créez un nouveau projet. Sélectionnez « Corbado Complete » pour le produit et spécifiez « Svelte » comme cadre. Définissez l'URL de votre application et définissez l'ID de partie de confiance sur localhost. Après cela, récupérez votre ID de projet et votre secret API, que vous devrez stocker dans vos variables d'environnement.
Ajoutez-les au fichier .env de votre projet :
PUBLIC_CORBADO_PROJECT_ID=your-corbado-project-id CORBADO_API_SECRET=your-corbado-api-secret
Tout d’abord, désactivez le rendu côté serveur (SSR), car il n’est actuellement pas pris en charge par le package web-js de Corbado. Créez un fichier layout.server.ts avec le contenu suivant :
export const ssr = false;
Ensuite, intégrez le composant d'interface utilisateur de clé d'accès Corbado dans votre interface en l'initialisant dans le composant de mise en page externe. Cela garantit que le reste de l'application ne s'affichera qu'une fois Corbado initialisé.
<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>
Dans src/routes/page.svelte, intégrez le composant d'interface utilisateur d'inscription et de connexion. Une fois authentifié, redirigez l'utilisateur vers la page /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>
Créez une page de profil sous la route /profile, où vous récupérerez et afficherez les informations utilisateur à l'aide du SDK Node de Corbado.
Dans page.server.ts, récupérez le cookie de session et renvoyez les données utilisateur :
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('=')]; }) ); }
La page correspondante accédera aux données de notre chargeur, affichera le nom et l'identifiant de l'utilisateur et fournira un bouton pour se déconnecter. Si l'utilisateur n'est pas connecté, nous afficherons un lien vers la page d'accueil.
<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>
Une fois tout configuré, lancez votre application :
npm run dev
Votre application SvelteKit avec authentification par mot de passe est maintenant en ligne. Une fois connecté, l'utilisateur sera redirigé vers la page de profil où son identifiant et son email sont affichés.
Dans ce guide, nous avons montré comment intégrer l'authentification par mot de passe de Corbado dans une application SvelteKit. Cette approche offre une expérience sécurisée et sans mot de passe grâce aux composants d’interface utilisateur simples à mettre en œuvre de Corbado. Vous pouvez désormais développer cela et explorer des fonctionnalités plus avancées telles que la gestion de session ou la prise en charge de plusieurs appareils.
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!