Site icon Blog ARC Optimizer

Implémentation de SSO dans Vue.js avec nuxt-auth et GitHub


L’authentification unique est un moyen pratique d’authentifier les utilisateurs sans avoir à mémoriser les mots de passe, mais il peut s’avérer décourageant de mettre en œuvre des flux SSO avec différents fournisseurs d’identité. Dans ce guide, je vais vous montrer comment mettre en œuvre le SSO en 30 minutes.

Les mesures d’authentification sont conçues pour protéger les systèmes et les données des utilisateurs. Cependant, elles impliquent souvent des étapes qui peuvent sembler lourdes ou fastidieuses. Par exemple, il est conseillé aux utilisateurs d’utiliser des mots de passe différents pour chaque site Web ou application. C’est un bon conseil mais, en réalité, la plupart des utilisateurs utiliseront un seul mot de passe pour plusieurs sites Web/applications.

La vérité est que l’authentification des utilisateurs ne devrait pas être compliquée. Personne ne devrait plus avoir à mémoriser trop de mots de passe. L’introduction de authentification unique (SSO) a changé tout le récit.

SSO permet aux utilisateurs de s’authentifier sur plusieurs applications en se connectant une seule fois depuis un fournisseur d’identité. Cela signifie qu’en tant qu’utilisateur, avec votre compte GitHub (le fournisseur d’identité), vous pouvez vous connecter à n’importe quelle application sans fournir de mot de passe. Cela améliore l’expérience utilisateur, renforce la protection et réduit la nécessité pour les utilisateurs de mémoriser plusieurs informations de connexion.

Ce guide est conçu pour vous guider tout au long du processus d’implémentation de SSO dans les applications Vue.js à l’aide de nuxt-auth et GitHub OAuth.

Nuxt-auth est une bibliothèque open source permettant de créer des solutions d’authentification robustes pour les applications Nuxt 3. Il est construit sur le Auth.js bibliothèque, et il vous permet d’utiliser diverses stratégies d’authentification, telles que :

  • Fournisseurs OAuth (GitHub, Google, Twitter et Azure)
  • Protocoles OAuth personnalisés (écrivez-le vous-même)
  • Combinaisons traditionnelles de nom d’utilisateur et de mot de passe
  • Envoyer des URL magiques par e-mail

Comme indiqué précédemment, ce guide se concentre sur la mise en œuvre du SSO en utilisant GitHub comme fournisseur OAuth. Au final, ce que nous allons construire ressemblera à ceci :

Conditions préalables

La seule exigence à suivre avec ce guide est une connaissance de base de Vue.js et un compte GitHub.

Configurer une application Nuxt

Nous allons créer l’exemple d’application avec le framework Nuxt.js, un framework open source robuste basé sur Vue.js, conçu pour faciliter la création d’applications de rendu côté serveur (SSR). Commençons par configurer une toute nouvelle application Nuxt.

Exécutez la commande ci-dessous pour configurer une application Nuxt.

npx nuxi@3.3.2 init my-app

Vous devriez voir une sortie comme celle ci-dessous lorsque vous exécutez la commande ci-dessus :

La structure du fichier devrait ressembler à ceci :

.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json

Accédez au répertoire du projet en utilisant cd my-app et exécutez soit npm install (ou pnpm installou yarn en fonction de votre gestionnaire de packages préféré) pour installer les dépendances.

Après avoir terminé les étapes ci-dessus, il est temps de tester notre configuration. Vous pouvez démarrer votre serveur local en exécutant la commande npm run dev. Une fois le serveur démarré, ouvrez un nouvel onglet de navigateur et accédez à http://localhost:3000.

Si le processus de configuration a réussi, vous verrez la page de destination par défaut d’une application Nuxt.js. Cela devrait ressembler à la capture d’écran suivante :

Cela confirme que votre application fonctionne comme prévu. Si vous rencontrez une erreur ou que la page ne se charge pas, il sera peut-être nécessaire de revenir en arrière et de revoir les étapes précédentes pour vérifier que tout a été correctement configuré. Maintenant que la configuration de base est terminée, commençons l’intégration de nuxt-auth. 👨🏽‍💻

Intégration de nuxt-auth

Intégrer nuxt-auth dans votre application Nuxt, nous devons l’installer avec sa dépendance homologue, next-auth. Nuxt-auth est la bibliothèque principale que nous utiliserons pour créer notre solution d’authentification robuste, tandis que la prochaine authentification est requise pour fournir les fonctionnalités nécessaires comme les fournisseurs d’authentification suivante sous le capot. Exécutez les commandes suivantes pour installer ces bibliothèques :

npm install @sidebase/nuxt-auth next-auth@4.21.1

Il est important de noter que nuxt-auth 0.5.0-rc.0 qui est la version actuelle au moment d’écrire ces lignes, ne prend en charge que les applications Nuxt 3.

Une fois cela fait, votre prochaine tâche consiste à créer un fichier de route du serveur qui servira de route du serveur fourre-tout pour les demandes d’authentification. Créez un fichier nommé [...].tsqui devrait être dans le server/api/auth/ répertoire de votre projet.

Ce fichier joue un rôle important dans votre application : Il configure automatiquement une API d’authentification qui répond à toutes les requêtes entrantes ciblant http://localhost/api/auth/.

Pour que cette configuration fonctionne correctement, il est essentiel que ce fichier exporte le NuxtAuthHandler. Pour ce faire, vous devez inclure l’extrait de code suivant dans votre [...].ts déposer:

import { NuxtAuthHandler } from '#auth'
import GithubProvider from 'next-auth/providers/github'

const runtimeConfig = useRuntimeConfig()

export default NuxtAuthHandler({
  pages: {
    signIn: '/login'
  },
  providers: [
    GithubProvider.default({
      clientId: runtimeConfig.public.GITHUB_CLIENT_ID,
      clientSecret: runtimeConfig.GITHUB_CLIENT_SECRET,
    }),
  ],
})

Le NuxtAuthHandler La fonction vous permet de configurer différents aspects du flux d’authentification, comme la configuration des fournisseurs pris en charge et la modification de la page de connexion par défaut, au cas où vous souhaiteriez créer une page de connexion personnalisée.

Notez que nous avons ajouté le chemin d’accès à notre page de connexion comme /login. Le providers key prend un tableau qui permet d’ajouter facilement plusieurs fournisseurs à la fois. Nous n’avons que le fournisseur GitHub. Cependant, ajouter un autre fournisseur est aussi simple que d’importer le fournisseur depuis le module et de l’ajouter au tableau. Par exemple, voici comment ajouter un fournisseur Twitter :

import TwitterProvider from "next-auth/providers/twitter"
...
providers: [
  TwitterProvider({
    clientId: process.env.TWITTER_ID,
    clientSecret: process.env.TWITTER_SECRET
  })
],
...

Pour voir plus de fournisseurs et comment vous pouvez les ajouter, consultez le Documentation Auth.js sur l’ajout de fournisseurs OAuth.

La configuration d’un fournisseur GitHub nécessite que nous obtenions le GitHub GITHUB_CLIENT_ID et le GITHUB_CLIENT_SECRET. Finissons-en dans la section suivante.

Configuration de GitHub OAuth

Pour obtenir ces informations d’identification, rendez-vous sur votre Page des paramètres du développeur GitHub et créez une nouvelle application 0Auth.

Un formulaire vous sera présenté il devrait ressembler à celui ci-dessous :

Une fois que vous avez rempli le formulaire et l’avez soumis, vous verrez l’identifiant client et vous pouvez également cliquer sur le bouton Générer un secret client pour créer un secret client comme indiqué ci-dessous :

Maintenant, copiez l’identifiant client et le secret sur votre .env

GITHUB_CLIENT_ID=XXXXXXX
GITHUB_CLIENT_SECRET=XXXXXXX

Vous en avez fini avec ça ? Parfait. Il y a un spécial nuxt.config.ts fichier qui a été créé pour vous lors de la génération du code de base, remplaçons son contenu par le morceau de code suivant :

export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  auth: {
    enableGlobalAppMiddleware: true,
  },
  runtimeConfig: {
    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
    public: {
      GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
    },
  },
})

Dans le code ci-dessus, nous avons ajouté @sidebase/nuxt-auth au nuxt tableau de modules pour voir que Nuxt inclut nuxt-auth et sa fonctionnalité au projet.

Puis le auth La section vous permet d’ajouter des configurations personnalisées à l’authentification, notez les :

auth: {
  enableGlobalAppMiddleware: true,
},

Cette section vous permet de contrôler le comportement par défaut du nuxt-auth module de protection des pages. Le paramètre par défaut est falsece qui implique que toutes les pages sont accessibles au public, sauf si elles sont spécifiquement configurées pour la protection au niveau de la page individuelle.

Cependant, pour nos besoins, nous ajusterons ce paramètre à true. Cette modification implique que nuxt-auth sauvegardera toutes les pages par défaut, sauf configuration contraire explicite. Essentiellement, les pages resteront privées jusqu’à ce que nous les définissions comme publiques.

N’oubliez pas qu’il existe des options de configuration supplémentaires disponibles avec nuxt-auth. Pour explorer davantage ces possibilités, je vous recommande de vérifier le nuxt-auth Documentation.

Création des pages

Votre site Web sera composé de nombreuses pages, certaines seront privées tandis que d’autres seront publiques. Voyons comment gérer ces pages, en commençant par la page de connexion.

Page de connexion

La page de connexion est généralement le point d’entrée de chaque application comportant des pages protégées. Avec nuxt-auth, vous pouvez définir des pages protégées et rediriger tous les utilisateurs non connectés vers la page de connexion. La page de connexion par défaut ressemblera à celle ci-dessous :

Cependant, vous pouvez spécifier une page de connexion personnalisée, comme nous l’avons fait précédemment et nuxt-auth utilisera celle-ci à la place. N’oubliez pas que nous avons ajouté cette personnalisation plus tôt dans le NuxtAuthHandler fonction de configuration.

export default NuxtAuthHandler({
  pages: {
    signIn: '/login'
  },
....

Maintenant, nous allons créer cette page à l’intérieur du page dossier. Appelons-le login.vue. L’une des raisons d’utiliser une page de connexion personnalisée est que, dans une application réelle, vous la concevriez pour suivre le design de votre marque. Voici le code pour login.vue:

<template>
    <div class="login-container">
        <p class="title">Sign-In Options:</p>
        <div class="form-container">
            <button class="btn github" @click="signIn('github')">Github</button>
        </div>
    </div>
</template>
<script setup lang="ts">
definePageMeta({
    auth: {
        unauthenticatedOnly: true,
        navigateAuthenticatedTo: "https://www.telerik.com/",
    }
})
const { signIn } = useAuth()
</script>

Dans le login.vue ci-dessus, nous avons défini un composant de fichier unique (SFC). Ce composant contient à la fois le modèle de la page de connexion et le script permettant de gérer les interactions des utilisateurs.

Dans la section modèle du code, il y a un bouton pour se connecter avec GitHub. Lorsqu’un utilisateur clique sur ce bouton, le signIn méthode de la useAuth le hook est utilisé pour déclencher le processus d’authentification. Nous avons passé github comme paramètre du signIn méthode pour indiquer que nous utilisons le fournisseur de services OAuth de GitHub pour ce processus d’authentification.

N’oubliez pas que dans la configuration, nous définissons le enableGlobalAppMiddleware à true ce qui signifie que toutes les pages sont protégées.

Ainsi, dans cette partie du script de connexion, nous supprimons la protection (ce qui signifie que tout le monde peut le voir) et envoyons l’utilisateur vers la page d’accueil s’il est déjà connecté. C’est aussi simple que de créer une page de connexion personnalisée. C’est une page de connexion basique, vous pouvez la personnaliser autant que vous le souhaitez.

definePageMeta({
    auth: {
        unauthenticatedOnly: true,
        navigateAuthenticatedTo: "https://www.telerik.com/",
    }
})

Voici à quoi ressemble notre page de connexion lorsque vous exécutez l’application :

Voyons comment afficher les données de l’utilisateur dans le tableau de bord une fois la connexion réussie.

Page du tableau de bord

Considérons le tableau de bord comme le backend des utilisateurs, où ils peuvent voir toutes leurs informations et effectuer les actions qu’ils sont autorisés à effectuer. Créez le fichier du tableau de bord dans le répertoire des pages et nommez-le index.vue. Ensuite, ajoutez-y le code suivant :

<script setup lang="ts">
const { status, signIn, signOut, data } = useAuth()
const loggedIn = computed(() => status.value === 'authenticated')
    
async function handleSignIn() {
  await signIn()
}

async function handleSignOut() {
  await signOut()
}
    
</script>
<template>
  <section class="dashboard" aria-label="User Dashboard">
    <aside class="dashboard-sidebar">
      <figure class="profile-picture-container">
        <img class="profile-picture" 
             :src="https://www.telerik.com/blogs/data.user.image" 
             :alt="`Profile Picture of ${data?.user?.name}`" />
      </figure>
      <nav class="dashboard-nav">
        <ul>
          <li><a href="#overview">Overview</a></li>
          <li><a href="#settings">Settings</a></li>
          <li><a href="#reports">Reports</a></li>
        </ul>
      </nav>
      <div class="dashboard-actions">
        <button v-if="loggedIn" 
                class="btn sign-out" 
                    @click="handleSignOut"
                aria-label="Sign Out Button"
        >Sign Out</button>
      </div>
    </aside>
    <main class="dashboard-main">
    <h1 class="dashboard-title">Hi, <span v-if="data?.user?.name">{{data.user.name}},</span> welcome to your dashboard</h1>
    <div class="dashboard-content">
      <div class="analytics-section">
        <h2>Website Traffic</h2>
        <div class="bar-chart-placeholder">Bar Chart</div>
      </div>
      <div class="analytics-section">
        <h2>Recent User Signups</h2>
        <table>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Signup Date</th>
          </tr>
          <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>2023-06-15</td>
          </tr>
        </table>
      </div>
    </div>
  </main>
  </section>
</template>

La plupart du modèle est en HTML. Passons en revue quelques parties clés du code. Nous avons utilisé le useAuth crochets à nouveau – le useAuth les hooks fournissent quelques fonctions et propriétés utilitaires qui vous donnent un aperçu de l’état actuel de l’état d’authentification de l’utilisateur.

Par exemple, lorsque le status.value est égal à authenticatedil indique que l’utilisateur est authentifié et que le data la propriété contiendra les informations de l’utilisateur.

const { status, signIn, signOut, data } = useAuth()
const loggedIn = computed(() => status.value === 'authenticated')

C’est pourquoi nous sommes en mesure d’obtenir la photo de profil de l’utilisateur dans cette partie du code et de l’afficher dans

<figure class="profile-picture-container">
  <img class="profile-picture" 
       :src="data.user.image" 
       :alt="`Profile Picture of ${data?.user?.name}`" />
</figure>

De plus, nous pouvons nous déconnecter en utilisant le signOut méthode de la useAuth hook comme démontré dans cette partie du code :

<div class="dashboard-actions">
  <button v-if="loggedIn" 
          class="btn sign-out" 
          @click="handleSignOut"
          aria-label="Sign Out Button"
  >Sign Out</button>
</div>

Lorsque l’utilisateur est connecté, le tableau de bord doit ressembler à la capture d’écran ci-dessous :

Félicitations, vous avez réussi à intégrer GitHub OAuth dans votre application Nuxt et à offrir à vos utilisateurs un moyen d’authentification unique.

Pour tester votre implémentation, lancez l’application en exécutant la commande ci-dessous :

npm run dev

Ouvrez-le dans le navigateur et essayez le flux d’authentification.

Conclusion

L’authentification unique est un moyen pratique d’authentifier les utilisateurs sans avoir à mémoriser les mots de passe, mais il peut s’avérer décourageant de mettre en œuvre des flux SSO avec différents fournisseurs d’identité. Cependant, il existe des bibliothèques open source qui facilitent l’intégration en faisant abstraction des flux et stratégies OAuth courants.

Dans ce guide, nous avons expliqué ce qu’est le SSO et comment l’intégrer dans votre flux de travail en utilisant GitHub comme fournisseur d’identité et nuxt-auth comme bibliothèque d’authentification. Nous avons également vu à quel point il est facile d’ajouter d’autres fournisseurs d’authentification sans trop modifier le code.

Pour des études plus approfondies, veuillez consulter le Documentation Nuxt.jset vous pouvez trouver le code sur GitHub. Vous devriez le vérifier, il a aussi les styles. 🙂

Ce message a été préparé par Peter Mbanugo à titre personnel. Les opinions ou représentations exprimées ici appartiennent à l’auteur et ne reflètent pas nécessairement les vues de Progress Software Corporation, ou de l’une de ses sociétés affiliées ou filiales. Toute responsabilité concernant les actions prises ou non sur la base du contenu de cet article est expressément déclinée. Le contenu de cette publication est fourni « tel quel », sans aucune garantie que le contenu est exempt d’erreurs.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile