Passer au contenu principal
Vous pouvez ajouter la connexion à votre application Web régulière à l’aide du flux de code d’autorisation. Pour savoir comment ce flux fonctionne et pourquoi vous devriez l’utiliser, consultez Flux de code d’autorisation. Pour appeler votre API à partir d’une application Web régulière, consultez Appelez votre API à l’aide du flux de code d’autorisation. Pour implémenter le flux de code d’autorisation, Auth0 fournit les ressources suivantes : Après une connexion réussie, votre application aura accès au et au de l’utilisateur. Le jeton d’identité contient les renseignements de base du profil utilisateur, et le jeton d’accès peut servir à appeler le point de terminaison /userinfo d’Auth0 ou vos propres API protégées. Pour en savoir plus sur les ID tokens, consultez ID tokens. Pour en savoir plus sur les jetons d’accès, consultez Jetons d’accès. Vous demanderez l’autorisation de l’utilisateur, puis vous le redirigerez vers votre application avec un authorization_code. Vous échangerez ensuite le code contre des jetons.

Prérequis

Enregistrez votre application dans Auth0. Pour en savoir plus, consultez Enregistrer des applications Web régulières.
  • Sélectionnez Application Web régulière comme type d’application.
  • Ajoutez {https://yourApp/callback} comme URL de callback autorisée.
  • Assurez-vous que les types d’octroi de votre application incluent Code d’autorisation. Pour en savoir plus, consultez Mettre à jour les types d’octroi.

Autoriser l’utilisateur

Pour lancer le flux, vous devrez obtenir l’autorisation de l’utilisateur. Cette étape peut inclure un ou plusieurs des processus suivants :
  • Authentifier l’utilisateur ;
  • Rediriger l’utilisateur vers un pour prendre en charge l’authentification ;
  • Obtenir le consentement de l’utilisateur pour le niveau d’autorisation demandé, sauf si ce consentement a déjà été accordé.
Pour autoriser l’utilisateur, votre application doit rediriger l’utilisateur vers l’URL d’autorisation.

Exemple d’URL d’autorisation

Paramètres

Parameter NameDescription
response_typeIndique le type d’identifiant qu’Auth0 retournera (code ou token). Pour ce flux, la valeur doit être code.
client_idL’ID client de votre application. Vous trouverez cette valeur dans les paramètres de l’application.
redirect_uriL’URL vers laquelle Auth0 redirigera le navigateur une fois l’autorisation accordée par l’utilisateur. Le code d’autorisation sera disponible dans le paramètre d’URL code. Vous devez indiquer cette URL comme URL de rappel valide dans les paramètres de l’application.

Avertissement : Conformément à la spécification OAuth 2.0, Auth0 supprime tout ce qui suit le hash et ne tient compte d’aucun fragment.
scopeSpécifie les scopes pour lesquels vous voulez demander une autorisation, ce qui détermine quelles claims (ou quels attributs utilisateur) seront renvoyés. Ils doivent être séparés par une espace. Pour obtenir un ID Token dans la réponse, vous devez spécifier au minimum le scope openid. Si vous voulez renvoyer le profil complet de l’utilisateur, vous pouvez demander openid profile. Vous pouvez demander n’importe lequel des scopes OpenID Connect (OIDC) standard concernant les utilisateurs, comme email, ou des custom claims conformes à un format avec espace de noms. Incluez offline_access pour obtenir un Jeton d’actualisation (assurez-vous que le champ Allow Offline Access est activé dans les paramètres de l’application).
state(recommandé) Une chaîne alphanumérique arbitraire opaque que votre application ajoute à la requête initiale et qu’Auth0 inclut lors de la redirection vers votre application. Pour savoir comment utiliser cette valeur afin de prévenir les attaques de falsification de requête intersites (CSRF), consultez Mitigate CSRF Attacks With State Parameters.
connection(facultatif) Force l’utilisateur à se connecter à l’aide d’une connexion précise. Par exemple, vous pouvez transmettre la valeur github pour envoyer directement l’utilisateur vers GitHub afin qu’il ouvre une session avec son compte GitHub. Si ce paramètre n’est pas spécifié, l’utilisateur voit l’écran Auth0 Lock avec toutes les connexions configurées. Vous pouvez consulter la liste de vos connexions configurées dans l’onglet Connections de votre application.
organization(facultatif) ID de l’organisation à utiliser lors de l’authentification d’un utilisateur. S’il n’est pas fourni et que votre application est configurée pour Display Organization Prompt, l’utilisateur pourra saisir le nom de l’organisation pendant l’authentification.
invitation(facultatif) ID du ticket d’invitation de l’organisation. Lors de l’invitation d’un membre à une Organisation, votre application devrait gérer l’acceptation de l’invitation en transmettant les paires clé-valeur invitation et organization lorsque l’utilisateur accepte l’invitation.
login_hint(facultatif) Préremplit le champ nom d’utilisateur/courriel de la page de connexion ou d’inscription lors de la redirection vers Auth0. Pris en charge par l’expérience Universal Login.
À titre d’exemple, l’extrait HTML de votre URL d’autorisation pour ajouter la connexion à votre application pourrait ressembler à ceci :

Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 302. Le code d’autorisation figure à la fin de l’URL :
HTTP/1.1 302 Found
Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123

Obtenir des jetons

Maintenant que vous avez un code d’autorisation, vous devez l’échanger contre des jetons. À l’aide du code d’autorisation (code) extrait à l’étape précédente, vous devez envoyer une requête POST à l’URL du jeton.

Exemple de requête POST vers l’URL du jeton

Paramètres

Nom du paramètreDescription
grant_typeDéfinissez cette valeur sur authorization_code.
codeLe authorization_code récupéré à l’étape précédente de ce tutoriel.
client_idL’ID client de votre application. Vous trouverez cette valeur dans les paramètres de l’application.
client_secretLe Secret client de votre application. Vous trouverez cette valeur dans les paramètres de l’application. Pour en savoir plus sur les méthodes d’authentification de l’application disponibles, consultez Application Credentials.
redirect_uriL’URL de rappel valide définie dans les paramètres de votre application. Elle doit correspondre exactement au redirect_uri transmis à l’URL d’autorisation à l’étape précédente de ce tutoriel. Notez qu’elle doit être encodée en URL.

Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 200 avec un payload qui contient les valeurs access_token, refresh_token, id_token et token_type :
{
  "access_token": "eyJz93a...k4laUWw",
  "refresh_token": "GEbRxBN...edjnXbL",
  "id_token": "eyJ0XAi...4faeEoQ",
  "token_type": "Bearer"
}
Validez vos jetons avant de les enregistrer. Pour savoir comment faire, consultez Valider les ID tokens et Valider les jetons d’accès.
ID tokens contiennent des renseignements sur l’utilisateur qu’il faut décoder et extraire. Jetons d’accès servent à appeler le endpoint /userinfo de l’Auth0 Authentication API ou une autre API. Si vous appelez votre propre API, la première chose qu’elle devra faire sera de vérifier le jeton d’accès. Jetons d’actualisation servent à obtenir un nouveau jeton d’accès ou un jeton d’identité après l’expiration du précédent. Le refresh_token ne sera présent dans la réponse que si vous avez inclus le scope offline_access et activé Allow Offline Access pour votre API dans l’Auth0 Dashboard.
Les jetons d’actualisation doivent être stockés de manière sécurisée, puisqu’ils permettent à un utilisateur de rester authentifié pratiquement indéfiniment.

Cas d’utilisation

Requête d’authentification de base

Cet exemple montre la requête la plus simple que vous pouvez effectuer lorsque vous autorisez l’utilisateur à l’étape 1. Elle affiche l’écran de connexion d’Auth0 et permet à l’utilisateur de se connecter avec n’importe quelle connexion configurée : Maintenant, lorsque vous demandez des jetons, votre ID Token contiendra les claims de base. Lorsque vous décoderez l’ID Token, il ressemblera à ceci :
{
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt9...",
  "exp": 1478112929,
  "iat": 1478076929
}

Demander le nom et la photo de profil de l’utilisateur

En plus de l’authentification habituelle, cet exemple montre comment demander des informations supplémentaires sur l’utilisateur, comme son nom et sa photo. Pour demander le nom et la photo de l’utilisateur, vous devez ajouter les scopes appropriés lorsque vous autorisez l’utilisateur : Maintenant, lorsque vous demandez des jetons, votre jeton d’identité inclura les claims name et picture demandées. Lorsque vous décodez le jeton d’identité, il ressemblera à ceci :
{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

Demander à l’utilisateur de se connecter avec GitHub

En plus de l’authentification habituelle des utilisateurs, cet exemple montre comment rediriger les utilisateurs directement vers un fournisseur d’identité social, comme GitHub. Vous devez d’abord configurer la connexion appropriée dans Auth0 Dashboard > Authentication > Social et récupérer le nom de la connexion dans l’onglet Settings. Pour envoyer les utilisateurs directement à l’écran de connexion GitHub, vous devez transmettre le paramètre connection et définir sa valeur sur le nom de la connexion (dans ce cas, github) lorsque vous autorisez l’utilisateur à l’étape 1 : Maintenant, lorsque vous demanderez des jetons, votre ID Token contiendra une revendication sub avec l’identifiant unique de l’utilisateur renvoyé par GitHub. Lorsque vous décoderez le jeton d’identité, il ressemblera à ceci :
{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

En savoir plus