Passer au contenu principal
Vous pouvez ajouter une connexion à votre application Web classique à l’aide du Flux de code d’autorisation. Pour savoir comment fonctionne le flux et pourquoi vous devriez l’utiliser, lisez Flux du code d’autorisation. Pour appeler votre API à partir d’une application Web ordinaire, lisez Appeler 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 jeton d’ID et au jeton d’accès de l’utilisateur. Le jeton d’ID contient des informations de base sur le profil utilisateur et le jeton d’accès peut être utilisé pour appeler le point de terminaison Auth0 /userinfo ou vos propres API protégées. Pour en savoir plus sur les jetons d’ID, consultez Jetons d’ID. Pour en savoir plus sur les jetons d’accès, lisez Jetons d’accès. Vous demanderez l’autorisation de l’utilisateur et le redirigerez vers votre application avec un authorization_code. Vous échangerez ensuite le code contre des jetons.

​
Prérequis

Enregistrez votre application auprès d’Auth0. Pour en savoir plus, lisez Enregistrer des applications Web classiques.
  • Sélectionnez Application Web ordinaire comme Type d’application.
  • Ajoutez une URL de rappel autorisée de {https://yourApp/callback}.
  • Assurez-vous que les Grant Types (Types d’autorisation) de votre application comprennent le code d’autorisation. Pour en savoir plus, lisez Mettre à jour les types d’autorisation.

​
Autoriser l’utilisateur

Pour lancer le flux, vous aurez besoin l’autorisation de l’utilisateur. Cette étape peut comprendre un ou plusieurs des procédés suivant :
  • Authentifier l’utilisateur
  • Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification
  • Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, sauf si obtenu précédemment
Pour autoriser l’utilisateur, votre application doit envoyer l’utilisateur à l’URL d’autorisation.

​
Exemple d’URL d’autorisation

https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope={scope}&
    state={state}

​
Paramètres

Nom du paramètreDescription
response_typeIndique le type d’identifiant qu’Auth0 renverra (code ou token). Pour ce flux, la valeur doit être code.
client_idL’ID client de votre application. Vous pouvez trouver cette valeur dans vos paramètres d’application.
redirect_uriL’URL vers laquelle Auth0 redirigera le navigateur une fois l’autorisation accordée par l’utilisateur. Le code d’autorisation sera indiqué dans le paramètre URL code. Vous devez spécifier cette URL comme une URL de rappel dans vos Application Settings (Paramètres d’application).

Avertissement: Selon la Spécification OAuth 2.0, Auth0 supprime tout ce qui suit le hachage et ne respecte aucun fragment.
scopeSpécifie les permissions que vous demandez, qui déterminent les demandes (ou attributs utilisateur) que vous voulez renvoyer. Elles doivent être séparées par un espace. Pour obtenir un jeton d’ID dans la réponse, vous devez préciser une permissions d’au moins openid. Si vous souhaitez obtenir le profil complet de l’utilisateur, vous pouvez demander openid profile. Vous pouvez demander n’importe laquelle des permissions standard OpenID Connect (OIDC) sur les utilisateurs, comme email, ou des demandes personnalisées conformes à un format à espaces de noms. Inclure 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 demande initiale 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), voir Atténuer les attaques CSRF avec les paramètres d’état.
connection(facultatif) Oblige l’utilisateur à se connecter avec une connexion spécifique. Par exemple, vous pouvez passer une valeur de github pour envoyer l’utilisateur directement à GitHub pour se connecter avec son compte GitHub. Si non spécifié, l’utilisateur voit l’écran Auth0 Lock avec toutes les connexions configurées. Vous pouvez voir une liste de vos connexions configurées sur l’onglet Connexions de votre application.
organization(facultatif) ID de l’organisation à utiliser pour authentifier un utilisateur. Lorsqu’il n’est pas fourni, si votre application est configurée pour Display Organization Prompt (Afficher l’invite de l’organisation), l’utilisateur pourra entrer le nom de l’organisation lors de l’authentification.
invitation(facultatif) ID du ticket de l’invitation de l’organisation. Lorsque vous (invitez un membre à une organisation, votre application doit traiter l’acceptation de l’ invitation en transmettant les paires clé-valeur invitation et organization lorsque l’utilisateur accepte l’invitation.
login_hint(facultatif) Remplit le champ d’identification de la page de connexion ou d’inscription lors de la redirection vers Auth0. Pris en charge par l’expérience de connexion universelle.
Par exemple, votre extrait HTML pour l’URL d’autorisation lors de l’ajout de l’enregistrement à votre application peut avoir l’air de ce qui suit : 
<a href="https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile&
  state=xyzABC123">
  Sign In
</a>

​
Réponse

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

​
Jetons de requête

Maintenant que vous avez un code d’authentification, vous pouvez l’échanger pour des jetons. En utilisant le code d’autorisation (code) extrait de l’étape précédente, vous devrez POST sur l’URL du jeton.

​
Exemple d’URL « POST to token »

curl --request POST \
  --url 'https://{yourDomain}/oauth/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=authorization_code \
  --data 'client_id={yourClientId}' \
  --data 'client_secret={yourClientSecret}' \
  --data 'code=yourAuthorizationCode}' \
  --data 'redirect_uri={https://yourApp/callback}'

​
Paramètres

Nom de paramètresDescription
grant_typeDéfinir sur authorization_code.
codeauthorization_code récupéré à l’étape précédente de ce tutoriel.
client_idL’ID client de votre application. Vous pouvez trouver cette valeur dans les paramètres de votre application.
client_secretLe secret client de votre application. Vous pouvez trouver cette valeur dans les paramètres de votre application. Pour en savoir plus sur les méthodes d’authentification d’application disponibles, lisez Identifiants d’applications.
redirect_uriL’URL de rappel valide définie dans les paramètres de votre Application. Cela doit correspondre exactement à redirect_uri passé à l’ URL d’autorisation à l’étape précédente de ce tutoriel. Notez que cela doit être codé URL.

​
Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 200 avec une charge utile contenant 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 en savoir plus, lisez Valider les jetons d’ID et Valider les jetons d’accès.
Les Jetons d’ID contiennent des informations de l’utilisateur qui doivent être décodées et extraites. Les jetons d’accès sont utilisés pour appeler le point de terminaison /userinfo de l’Authentication API Auth0 ou une autre API. Si vous appelez votre propre API, la première chose que votre API devra faire est de vérifier le jeton d’accès. Les jetons d’actualisation sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Le refresh_token ne sera présent dans la réponse que si vous avez inclus la permission offline_access et activé Autoriser l’accès hors ligne pour votre API dans le Dashboard.
Les jetons d’actualisation doivent être stockés en toute sécurité car ils permettent aux utilisateurs de rester authentifiés pratiquement indéfiniment.

​
Cas d’utilisation

​
Demande d’authentification de base

Cet exemple montre la requête la plus basique que vous pouvez faire lorsque vous autorisez l’utilisateur à l’étape 1. L’écran de connexion Auth0 permet à l’utilisateur de se connecter avec l’une des connexions configurées. 
https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid
Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra les autorisations les plus élémentaires. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit : 
{
  "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

Outre l’authentification habituelle de l’utilisateur, cet exemple montre comment demander des informations supplémentaires sur l’utilisateur, telles que son nom et sa photo. Pour demander le nom et la photo de l’utilisateur, vous devez ajouter les permissions appropriées lors de l’autorisation de l’utilisateur : 
https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}
Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra le nom et la photo demandés. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit : 
{
  "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
}

​
Demande de connexion d’un utilisateur avec GitHub

En plus de l’authentification habituelle des utilisateurs, cet exemple montre comment envoyer les utilisateurs directement à un fournisseur d’identité sociale, tel que GitHub. Vous devrez d’abord configurer la connexion appropriée dans Auth0 Dashboard > Authentication (Authentification) > Social et obtenir le nom de la connexion à partir de l’onglet Settings (Paramètres). Pour envoyer les utilisateurs directement à l’écran de connexion GitHub, vous devez passer le paramètre connection et définir sa valeur sur le nom de la connexion (dans ce cas, github) lors de l’autorisation de l’utilisateur à l’étape 1 : 
https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}&
    connection=github
Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra une demande sub avec l’ID unique de l’utilisateur renvoyé par GitHub. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit : 
{
  "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

⌘I