Sélectionner une page


Photo de profil de Sam Walpole Hacker Noon

@SamwalpoleSam Walpole

Développeur Web Fullstack .NET et JavaScript. Professeur de codage et avocat

utilisateur Authentification et autorisation peut être difficile et prendre du temps. Un échec peut également avoir des conséquences catastrophiques, telles que: B. Les utilisateurs malveillants qui accèdent et volent des informations personnelles ou sensibles dans votre application.

À moins que vous ne soyez une grande entreprise qui puisse se permettre de passer beaucoup de temps à développer un système d’authentification / autorisation sur mesure, il est souvent préférable d’utiliser les solutions existantes pour rationaliser votre processus de développement et assurer votre sécurité.

Auth0

Auth0 est l’une de ces solutions et peut être appelée authentification en tant que service (AaaS) ou identité en tant que service (IDaaS). En bref, il s’agit d’un système de gestion des utilisateurs complet qui peut être utilisé pour authentifier les demandes adressées à votre application. Il possède de nombreuses fonctionnalités intégrées que vous attendez d’une authentification moderne, telles que: B. Connexion sociale (Google, Facebook, etc.), authentification unique (SSO) et authentification multifactorielle.

Flux d’authentification de base

Vous trouverez ci-dessous un diagramme qui explique les bases du fonctionnement de l’authentification avec Auth0.

  1. Tout d’abord, l’utilisateur essaie de se connecter via le client (par exemple un navigateur Web) en fournissant son nom d’utilisateur / mot de passe ou en se connectant via les réseaux sociaux.
  2. La demande de connexion est envoyée à Auth0, et en cas de succès, Auth0 renvoie un jeton d’accès.
  3. Lorsque le client tente d’accéder à une ressource via l’API backend, il envoie le jeton d’accès avec la demande.
  4. L’API backend reçoit la demande avec le jeton d’accès. Tout d’abord, Auth0 vérifie si le jeton est valide et, en cas de succès, la ressource demandée est renvoyée.

Authentification avec Auth0, ASP.NET Core et Nuxt.js

J’ai créé un référentiel GitHub pour ce didacticiel. Veuillez le trouver Ici.

Configuration Auth0

Si vous n’avez pas encore de compte Auth0, continuez et Créez-en un ici.

Connectez-vous à votre compte Auth0 et accédez à l’onglet Applications. Cliquez sur Créer une application et créez une nouvelle application Web unidirectionnelle.

Accédez à l’onglet Paramètres de votre application nouvellement créée et notez le domaine et l’ID client. Ceux-ci seront nécessaires plus tard.

Sur la même page, faites défiler jusqu’à URI d’application et remplissez les champs suivants:

  • URL de rappel autorisées = http: // localhost: 3000 / login
  • Legal Web Origins = http: // localhost: 3000
  • Origines légales (CORS) = http: // localhost: 3000

REMARQUE: http: // localhost: 3000 est l’url standard de l’application Nuxt. Si vous utilisez un autre port, modifiez les valeurs ci-dessus en conséquence.

Assurez-vous d’enregistrer les modifications.

Ensuite, nous devons informer Auth0 de notre API. Accédez aux API et cliquez sur Créer une API. Saisissez un nom et un identifiant, puis cliquez sur Créer. Notez l’ID car vous en aurez besoin plus tard.

Et c’est tout pour la configuration Auth0! Ensuite, créons notre API à l’aide d’ASP.Net Core.

API ASP.NET Core

Commencez par créer un nouveau projet d’API ASP.NET Core à l’aide des modèles de projet Visual Studio (Créer un nouveau projet -> Application Web ASP.NET Core -> API).

Vous devez avoir les packages NuGet suivants installés:

Microsoft.AspNetCore.Authentication.JwtBearer
Microsoft.AspNetCore.Authentication.OpenIdConnect

REMARQUE: ces packages ont été installés avec le modèle de projet .NET 5.0 par défaut. Cependant, je pense que ceux-ci devront être installés manuellement si vous utilisez .NET Core 3.

Afin de valider les jetons d’accès par rapport à Auth0, notre API doit connaître les valeurs de domaine et d’identifiant que nous avons précédemment reçues d’Auth0. J’ai décidé de sauvegarder ça aussi Secrets de l’utilisateur pour plus de sécurité.

Accédez au dossier du projet API et exécutez les commandes suivantes:

dotnet user-secrets init
dotnet user-secrets set "Authentication:Auth0:Authority" "MyDomain"
dotnet user-secrets set "Authentication:Auth0:Audience" "MyIdentifier"

Ensuite, nous devons configurer la classe de démarrage. Dans la méthode ConfigureServices, ajoutez les lignes de code suivantes:

services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(options =>
{
    var auth0Authentication = Configuration.GetSection("Authentication:Auth0");

    options.Authority = auth0Authentication["Authority"];
    options.Audience = auth0Authentication["Audience"];
});

Cela configurera ASP.NET Core pour s’authentifier auprès d’un porteur JWT et le vérifier par rapport à Auth0 en fonction des valeurs que nous venons d’enregistrer dans User Secrets.

Nous devons également ajouter quelques lignes de code à la méthode Configure. Étant donné que l’ordre est très important pour configurer correctement le pipeline middleware, je vais simplement inclure la méthode entière:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseHttpsRedirection();

    app.UseCors(builder =>
    {
        builder
            .WithOrigins("http://localhost:3000")
            .AllowAnyMethod()
            .AllowAnyHeader();
    });

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Ici, nous ajoutons une politique CORS pour autoriser les requêtes à l’API de notre application Nuxt (qui est fournie par défaut à http: // localhost: 3000). Deuxièmement, nous appelons app.UseAuthentication (), qui indique à l’application d’utiliser le middleware d’authentification à l’aide de la configuration que nous avons ajoutée dans la méthode ConfigureServices.

La dernière chose que nous devons faire est de décider quels contrôleurs / actions nous voulons protéger. Si vous avez créé votre projet à partir du modèle Visual Studio, vous devez déjà disposer d’un WeatherForecastController. Je vais juste protéger l’ensemble du contrôleur en ajoutant celui [Authorize] Attribut en haut du contrôleur.

...
[Authorize]
public class WeatherForecastController : ControllerBase
{
...

Client Nuxt

Pour commencer à créer le client Nuxt, procédez comme suit:

yarn create nuxt-app my-app-name

Et optez simplement pour les options standard.

Nous devons ensuite installer quelques modules Nuxt. Accédez au répertoire racine du projet Nuxt (doit contenir package.json) et exécutez la commande suivante.

yarn add @nuxtjs/axios @nuxtjs/auth @nuxtjs/dotenv

Cela permettra à Axios (que nous utilisons pour faire des requêtes à notre API), le module Auth (qui simplifie la gestion de l’authentification sur le client Nuxt) et le module Dotenv (que nous utilisons pour stocker nos valeurs secrètes Auth0 dans un fichier. env- Enregistrer le fichier) installé).

Ensuite, créez un fichier ENV dans le répertoire racine de votre projet Nuxt et ajoutez les lignes suivantes (remplacez vos valeurs Auth0):

AUTHENTICATION_AUTH0_DOMAIN=MyDomain
AUTHENTICATION_AUTH0_CLIENT_ID=MyClientID
AUTHENTICATION_AUTH0_AUDIENCE=MyIdentifier

Ensuite, passons à la configuration de Nuxt et apportons quelques modifications au fichier nuxt.config.js. Tout d’abord, nous allons dire à Nuxt d’utiliser simplement le module que nous venons d’installer en ajoutant les lignes suivantes:

buildModules: [
  '@nuxtjs/dotenv'
],
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
],

Ensuite, nous configurons Axios pour qu’une URL de base pointe vers notre API. Dans mon cas, le port était 44363, mais cela pourrait bien être différent pour votre projet.

axios: {
  baseURL: 'https://localhost:44363'
},

Dans les lignes de configuration suivantes, le routeur Nuxt est invité à utiliser le module Auth comme middleware. Cela signifie que le middleware d’authentification vérifie que l’utilisateur est authentifié (et non redirigé vers la page de connexion) avant que l’utilisateur n’accède à une page. Cette configuration protège toutes les routes de votre application cliente. cependant, Il existe des moyens de protéger uniquement certains itinérairessi vous le souhaitez.

router: {
  middleware: ['auth'],
},

Enfin, nous configurons le middleware Auth pour lire les valeurs secrètes Auth0 du fichier ENV et les stocker dans une stratégie appelée auth0.

auth: {
  strategies: {
    auth0: {
      domain: process.env.AUTHENTICATION_AUTH0_DOMAIN,
      client_id: process.env.AUTHENTICATION_AUTH0_CLIENT_ID,
      audience: process.env.AUTHENTICATION_AUTH0_AUDIENCE
    }
  }
}

Et c’est tout pour nuxt.config.js. La dernière chose que nous devons faire est de créer un fichier index.js vide dans le répertoire de stockage. Cela est dû au fait que le middleware d’authentification utilise le magasin nuxt pour stocker les informations d’authentification et que le fichier de magasin doit être présent dans nuxt (mais peut être vide) pour activer le magasin.

La dernière chose que nous devons faire est de créer quelques pages. Nous allons commencer par créer une simple page d’index qui essaiera simplement d’obtenir la liste des prévisions météorologiques de notre API et de l’afficher sur la page. Ceci est un site protégé. Si nous ne sommes pas enregistrés, nous serons redirigés pour nous inscrire. Il est également important de noter que l’API est également protégée. Même si un utilisateur pouvait accéder à la page d’index s’il n’était pas authentifié, l’API refuserait toujours d’envoyer les données. Il s’agit d’un principe important dans la conception d’applications Web. Quel que soit le niveau de protection que vous fournissez au frontal, l’API back-end doit toujours être protégée et inspecter tout ce que l’utilisateur envoie, car un utilisateur malveillant peut modifier tout ce qui provient du front-end.

// pages/index.vue

<template>
  <div>
    <h1>Weather Forecast</h1>
    {{ response }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      response: []
    }
  },
  async mounted() {
    this.response = await this.$axios.$get('weatherforecast')
  }
}
</script>

Et la page de connexion a juste un bouton qui nous amène à l’écran de connexion Auth0. Depuis que nous avons configuré la stratégie auth0 pour notre module Auth, la méthode loginWith (‘auth0’) sait où notre requête doit être envoyée.

// pages/login.vue

<template>
  <div>
    <h1>Login</h1>
    <button @click="onClick">Login with Auth0</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$auth.loginWith('auth0')
    }
  }
}
</script>

Et c’est tout! Essayez d’exécuter les projets client API et Nuxt et accédez à l’URL de base du projet nuxt (http: // localhost: 3000). Vous devriez être automatiquement redirigé vers la page de connexion.

Cliquez sur le bouton pour accéder à la page de connexion Auth0.

Connectez-vous à l’aide de la méthode que vous avez configurée pour Auth0. Si l’enregistrement réussit, vous serez redirigé vers la page d’index de votre application Nuxt. Puisque vous êtes maintenant connecté et que le client demande les prévisions météorologiques à l’API, il enverra également le jeton Auth0 Bearer avec la demande. L’API vérifie ensuite le jeton avec Auth0 et renvoie l’objet de prévision météo.

Conclusion

Dans cet article, je vous ai montré comment protéger une application cliente Nuxt et une API ASP.NET Core avec Auth0 en quelques étapes simples. Utiliser Auth0 est un excellent moyen d’ajouter une authentification à vos applications sans avoir à développer votre propre système de gestion d’authentification.

Veuillez jeter un œil au projet terminé en mon dépôt GitHub.

Comme c’est presque Noël, tu peux aussi voir le mien Meilleurs cadeaux de Noël pour acheter un développeur Post récemment publié sur Hashnode.

Je poste principalement sur le développement web full stack .NET et Vue. Pour vous assurer de ne manquer aucun article, veuillez suivre ce blog et Abonnez-vous à ma newsletter. Si vous avez trouvé ce message utile, merci de l’aimer et de le partager. Vous pouvez également me trouver sur Twitter.

Publié précédemment à https://samwalpole.com/web-app-authentication-using-auth0-aspnet-core-and-nuxtjs

Photo de profil de Sam Walpole Hacker Noon

Mots clés

Rejoignez Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.





Source link

Recent Posts