Passer au contenu principal

​
Vue d’ensemble

Connectez une instance Auth0, nouvelle ou existante, à votre projet Netlify pour améliorer la sécurité, l’évolutivité et la personnalisation de votre application grâce à l’intégration Auth0. Cette intégration vous permet de mettre en place une approche simplifiée de l’identité client directement dans votre application. Utilisez la nouvelle intégration pour créer et personnaliser le flux d’identité de votre projet Netlify. Pour mettre votre application en service rapidement et en toute sécurité, cette intégration :
  • Configure un environnement de production dans Netlify qui s’intègre à votre locataire Auth0 en quelques clics seulement.
  • Crée automatiquement une application dans votre locataire Auth0 qui se connecte à votre projet Netlify.
  • Précharge vos identifiants Auth0 dans Netlify, ce qui vous permet d’éviter certaines étapes manuelles de ce processus.

​
Prérequis

Pour commencer à intégrer Auth0 à votre projet Netlify, vous devez d’abord configurer les éléments suivants :
  • Un compte Netlify associé au projet que vous souhaitez intégrer. Consultez Créez votre compte Netlify pour créer un compte.
  • Une application Web qui nécessite une authentification, comme une application React ou Vue, ou un site statique avec des fonctions sans serveur.

​
Ajouter une intégration Netlify

Après avoir créé votre compte Netlify et ouvert une session dans votre tableau de bord, vous pouvez commencer à ajouter une intégration. Pour ajouter l’intégration Auth0 à un projet Netlify existant :
  1. Dans le tableau de bord Netlify, accédez à Extensions > Directory.
  2. Recherchez Auth0 et sélectionnez Install.
  3. Sélectionnez Install pour lancer l’installation dans votre portail d’intégration Auth0.

​
Connectez votre site

Pour connecter votre site à Auth0 :
  1. Accédez à la Configuration du site du site que vous souhaitez connecter à Auth0.
  2. Dans la barre latérale, sélectionnez Auth0 sous Accès et sécurité.
  3. Sélectionnez Lier un locataire Auth0 et suivez les instructions pour lier votre compte Auth0. Si vous n’avez pas encore de compte Auth0, vous pouvez vous inscrire à https://auth0.com/signup.
  4. Sélectionnez votre locataire dans la liste déroulante, puis sélectionnez Accepter pour autoriser l’accès à votre compte.
  5. Après avoir lié votre locataire, sélectionnez Ajouter un locataire.
  6. Remplissez les renseignements requis pour votre locataire et votre application, cochez la case Redéployer le site, puis sélectionnez Créer le locataire du site.
  7. Vous devriez maintenant voir le locataire du site lié avec succès dans la configuration de votre site.
Vous devriez maintenant voir votre application cliente et votre API dans Auth0 Dashboard, sous Applications.

​
Configurer l’intégration

Lorsque vous intégrez Auth0 à votre projet Netlify, vous devez fournir à votre application des paramètres d’authentification, comme l’ et le domaine Auth0. Si votre application lit ces paramètres à partir de variables d’environnement, elles sont injectées automatiquement par l’extension.
  1. Accédez à votre tableau de bord Netlify.
  2. Accédez à configuration du site > Environment variables.
  3. Cliquez sur Add a variable, puis saisissez :
    • AUTH0_CLIENT_ID (votre ID client Auth0)
    • AUTH0_DOMAIN (votre domaine Auth0)
      Ces variables, ainsi que toutes les autres informations sur l’application, se trouvent dans votre Auth0 Dashboard, sous Applications > [Votre application] > Settings.
Vous avez maintenant configuré les identifiants Auth0 nécessaires au déploiement.

​
Renseigner un fichier de configuration

Si votre application lit les paramètres Auth0 à partir d’un fichier, vous pouvez automatiser ce processus pendant la phase de compilation. Ainsi, votre application dispose toujours des paramètres d’autorisation appropriés, sans que vous ayez à modifier manuellement des fichiers. Pour ce faire :
  1. Accédez à votre tableau de bord Netlify.
  2. Accédez à configuration du site > Build & deploy > Build settings.
  3. Modifiez la Build command pour inclure un script shell avant de lancer la compilation : 
    echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
Ce script crée un fichier JSON nommé auth_config.json et le renseigne avec les variables d’environnement AUTH0_CLIENT_ID et AUTH0_DOMAIN définies ci-dessus, ce qui garantit que l’application dispose des paramètres Auth0 appropriés à l’exécution.

​
Gérer l’intégration

Après avoir ajouté l’intégration Auth0 à votre projet Netlify, le crée une nouvelle application pour gérer et personnaliser votre flux de travail CIAM.
  1. Accédez à Auth0 Dashboard.
  2. Sélectionnez Applications > Applications > [Votre application Netlify]
  3. Confirmez l’URI de l’application Netlify dans Settings > Application URIs.
Vous pouvez maintenant personnaliser et modifier cette application comme toute autre application dans votre Auth0 Dashboard.