Tutoriel : Comment intégrer des clés d'accès dans Nuxt.js

Introduction

Dans ce tutoriel, nous vous guiderons tout au long du processus d'intégration de l'authentification par mot de passe dans une application Nuxt.js. Nous couvrirons tout, de la configuration du projet Nuxt.js à la mise en œuvre du composant Corbado UI pour une expérience de connexion par mot de passe transparente.

Si vous souhaitez accéder directement au code, vous pouvez trouver l'exemple complet dans notre référentiel GitHub.

Lisez l'article de blog complet ici

Conditions préalables

Avant de vous lancer dans l'implémentation, assurez-vous d'avoir une compréhension de base de Nuxt.js, HTML, CSS et JavaScript. De plus, vous devrez installer Node.js et NPM sur votre machine de développement.

Structure du projet

Voici un bref aperçu de la structure de notre projet Nuxt.js :

.
├── .env
├── package.json
├── nuxt.config.ts
├── pages
|   ├── index.vue 
|   └── profile.vue
└── layouts 
    └── default.vue

Cette structure servira de base à la mise en œuvre de l'authentification par mot de passe.

Configuration du projet Nuxt.js

Pour commencer, initialisons un nouveau projet Nuxt.js

npx nuxi@latest init passkeys-demo-nuxtjs
cd passkeys-demo-nuxtjs
npm install
npm run dev

Cela démarrera votre application sur http://localhost:3000.

Implémentation de l'authentification par mot de passe de Corbado

Configuration de votre compte Corbado

Tout d'abord, inscrivez-vous pour un compte Corbado via leur panel de développeurs. Lors de la configuration, sélectionnez « Corbado Complete » comme produit et spécifiez « Nuxt.js » comme framework. Configurez l'URL de votre application et l'ID de partie de confiance en fonction de votre environnement de développement local.
Mettez à jour votre fichier .env avec l'ID de votre projet, que vous pouvez récupérer à partir du panneau de développement Corbado :

VITE_CORBADO_PROJECT_ID=<your-project-id>

Intégration du composant d'interface utilisateur Corbado

Installez la bibliothèque web-js Corbado :

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

Ensuite, configurez la mise en page dans /layouts/default.vue pour initialiser votre projet Corbado :

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const isInitialized = useState('isInitialized', () => false);
  const projectId = import.meta.env.VITE_CORBADO_PROJECT_ID;
  onMounted(async () => {
    await Corbado.load({
      projectId: projectId,
      darkMode: "off"
    });
    isInitialized.value = true;
  });
</script>
<template>
  <div v-if="isInitialized">
    <slot/>
  </div>
</template>

Cette configuration garantit que le projet Corbado est initialisé avant le rendu des composants.

Création de la page de connexion

Maintenant, créons la page de connexion dans /pages/index.vue :

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const authElement = useState<HTMLDivElement | undefined>('authElement', () => undefined);
  onMounted(() => {
    if (authElement.value) {
      Corbado.mountAuthUI(authElement.value, {
        onLoggedIn: () => {
          navigateTo("/profile");
        },
      });
    }
  });
</script>
<template>
  <div ref="authElement"></div>
</template>

Cet extrait de code configure l'interface utilisateur d'authentification et gère la redirection après une connexion réussie.

Configuration de la page de profil

Une fois connectés, les utilisateurs seront redirigés vers la page de profil, que nous créerons dans /pages/profile.vue :

<script setup lang="ts">
  import Corbado from "@corbado/web-js"const user = Corbado.user;
  async function handleLogout() {
    await Corbado.logout();
    await navigateTo("/");
  }
</script>
<template>
  <div>
    <div v-if="user">
      <h1>Profile Page</h1>
      <p>
        User-ID: {{ user.sub }}
        <br />
        Email: {{ user.email }}
      </p>
      <button @click="handleLogout">Logout</button>
    </div>
    <div v-else>
      <p>You're not logged in.</p>
      <p>
        Please go back to <NuxtLink href="/">home</NuxtLink> to log in.
      </p>
    </div>
  </div>
</template>

Cette page affiche les informations utilisateur après une authentification réussie et comprend un bouton de déconnexion.
Exécutez l'application avec :

npm run dev

Conclusion

Dans ce guide, nous avons montré comment implémenter une authentification basée sur un mot de passe dans une application Nuxt.js à l'aide des composants d'interface utilisateur de Corbado. Avec cette configuration, vous pouvez offrir une expérience de connexion sécurisée et conviviale dans vos applications Web. Pour plus de détails sur la gestion des sessions et d'autres fonctionnalités, reportez-vous à la documentation Corbado ou à l'article de blog complet.
En suivant ces étapes, vous pouvez améliorer la sécurité de vos applications Nuxt.js avec une authentification moderne et sans mot de passe.

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!