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

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

Conditions préalables

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.

Structure du projet pour SvelteKit avec clés d'accès

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.

Configuration du projet SvelteKit

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 :

• Modèle d'application : Projet Skeleton
• Vérification du type : Nous utilisons TypeScript, mais n'hésitez pas à choisir en fonction de vos préférences.
• Options supplémentaires : Nous recommandons ESLint et Prettier pour la qualité et le formatage du code.

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.

Ajout de clés d'accès avec Corbado

Étape 1 : Configurez votre compte et votre projet Corbado

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

Étape 2 : Intégrer le composant Passkey UI

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>

Étape 3 : Modifier la page d'accueil

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>

Étape 4 : configurer la page de profil

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>

Exécution de l'application

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.

Conclusion

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!