Ajouter la connexion à l’aide du flux du code d’autorisation avec PKCE

Vous pouvez ajouter la connexion à votre application native, mobile ou monopage en utilisant le flux du code d’autorisation avec PKCE. Pour comprendre comment ce flux fonctionne et pourquoi vous devriez l’utiliser, consultez Authorization Code Flow with Proof Key for Code Exchange (PKCE). Pour savoir comment appeler votre API à partir d’une application native, mobile ou monopage, consultez Call Your API Using Authorization Code Flow with PKCE. Pour mettre en œuvre le flux Authorization Code avec clé de preuve pour l’échange de code (PKCE), vous pouvez utiliser les ressources suivantes :

Auth0 Mobile SDKs et Auth0 Single-Page App SDK : la façon la plus simple de mettre en œuvre ce flux; ils feront l’essentiel du travail pour vous. Nos Mobile Quickstarts et Quickstarts pour les applications monopages vous guideront tout au long du processus.
Authentication API : si vous préférez créer votre propre solution, poursuivez votre lecture pour apprendre à appeler directement notre API.

Après une connexion réussie, votre application aura accès au et au de l’utilisateur. Le jeton d’identité contiendra les renseignements de base du profil utilisateur, et le jeton d’accès peut être utilisé pour appeler le endpoint Auth0 /userinfo ou vos propres API protégées. Pour en savoir plus sur les jetons d’identité, consultez ID Tokens. Pour en savoir plus sur les jetons d’accès, consultez Access Tokens.

Prérequis

Enregistrez votre application dans Auth0. Pour en savoir plus, consultez Enregistrer des applications natives ou Enregistrer des applications Web monopage.

Sélectionnez un Type d’application Native ou Application monopage, selon votre type d’application.
Ajoutez une URL de rappel autorisée : YOUR_CALLBACK_URL. Le format de votre URL de rappel varie selon votre type d’application et votre plateforme. Pour en savoir plus sur le format correspondant à votre type d’application et à votre plateforme, consultez nos Quickstarts Native/Mobile et Quickstarts pour les applications monopages.
Assurez-vous que les types d’octroi de votre application comprennent Code d’autorisation. Pour en savoir plus, consultez Mettre à jour les types d’octroi.

Créer le `code_verifier`

Créez un code_verifier, c’est-à-dire une clé aléatoire encodée en Base64 générée de façon cryptographiquement sûre, qui sera ensuite envoyée à Auth0 pour demander des jetons. Pour en savoir plus sur l’algorithme servant à créer le code_verifier, consultez la section 4.1 Client Creates a Code Verifier de la spécification clé de preuve pour l’échange de code.

Exemple en Javascript

// Dépendance : module crypto de Node.js
// https://nodejs.org/api/crypto.html#crypto_crypto
function base64URLEncode(str) {
    return str.toString('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}
var verifier = base64URLEncode(crypto.randomBytes(32));

Exemple en Java

// Dépendance : Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importez la classe Base64.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.getUrlEncoder().withoutPadding().encodeToString(code);

Exemple pour Android

// Dépendance : Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importation de la classe Base64.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.encodeToString(code, Base64.URL_SAFE | Base64.NO_WRAP | Base64.NO_PADDING);

Exemple en Swift 5

var buffer = [UInt8](repeating: 0, count: 32)
_ = SecRandomCopyBytes(kSecRandomDefault, buffer.count, &buffer)
let verifier = Data(buffer).base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")

Exemple en Objective-C

NSMutableData *data = [NSMutableData dataWithLength:32];
int result __attribute__((unused)) = SecRandomCopyBytes(kSecRandomDefault, 32, data.mutableBytes);
NSString *verifier = [[[[data base64EncodedStringWithOptions:0]
                        stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                        stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                        stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];

Créer un code challenge

Générez un code_challenge à partir du code_verifier, qui sera envoyé à Auth0 pour demander un authorization_code. Pour en savoir plus sur la façon dont le code_challenge est généré à partir du code_verifier, consultez la section 4.2 Le client crée le code challenge de la spécification OAuth sur la clé de preuve pour l’échange de code.

Exemple en Javascript

// Dépendance : module crypto de Node.js
// https://nodejs.org/api/crypto.html#crypto_crypto
function sha256(buffer) {
    return crypto.createHash('sha256').update(buffer).digest();
}
var challenge = base64URLEncode(sha256(verifier));

Exemple Java

// Dépendance : Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importer la classe Base64.
// import org.apache.commons.codec.binary.Base64;
byte[] bytes = verifier.getBytes("US-ASCII");
MessageDigest md = MessageDigest.getInstance("SHA-256");
md.update(bytes, 0, bytes.length);
byte[] digest = md.digest();
String challenge = Base64.encodeBase64URLSafeString(digest);

Exemple en Swift 5

import CommonCrypto

// ...

guard let data = verifier.data(using: .utf8) else { return nil }
var buffer = [UInt8](repeating: 0, count: Int(CC_SHA256_DIGEST_LENGTH))
_ = data.withUnsafeBytes {
    CC_SHA256($0.baseAddress, CC_LONG(data.count), &buffer)
}
let hash = Data(buffer)
let challenge = hash.base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")

Exemple en Objective-C

// Dépendance : bibliothèque Apple Common Crypto
// http://opensource.apple.com//source/CommonCrypto
u_int8_t buffer[CC_SHA256_DIGEST_LENGTH * sizeof(u_int8_t)];
memset(buffer, 0x0, CC_SHA256_DIGEST_LENGTH);
NSData *data = [verifier dataUsingEncoding:NSUTF8StringEncoding];
CC_SHA256([data bytes], (CC_LONG)[data length], buffer);
NSData *hash = [NSData dataWithBytes:buffer length:CC_SHA256_DIGEST_LENGTH];
NSString *challenge = [[[[hash base64EncodedStringWithOptions:0]
                         stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                         stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                         stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];

Autoriser l’utilisateur

Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application avec un authorization_code. Une fois que vous avez créé le code_verifier et le code_challenge, vous devez obtenir l’autorisation de l’utilisateur. Techniquement, c’est le début du , et cette étape peut inclure un ou plusieurs des processus suivants :

Authentifier l’utilisateur;
Rediriger l’utilisateur vers un pour prendre en charge l’authentification;
Vérifier s’il existe des sessions actives d’authentification unique (SSO);
Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, à moins que ce consentement n’ait déjà été accordé.

Pour autoriser l’utilisateur, votre application doit l’envoyer vers l’URL d’autorisation, en incluant le code_challenge que vous avez généré à l’étape précédente ainsi que la méthode utilisée pour générer le code_challenge.

Exemple d’URL d’autorisation

Paramètres

Nom du paramètre	Description
`response_type`	Indique le type de justificatif qu’Auth0 renverra (`code` ou `token`). Pour ce flux, la valeur doit être `code`.
`code_challenge`	Challenge généré à partir du `code_verifier`.
`code_challenge_method`	Méthode utilisée pour générer le challenge (par ex. S256). La spécification PKCE définit deux méthodes, `S256` et `plain` ; la première est utilisée dans cet exemple et c’est la seule prise en charge par Auth0, puisque la seconde est déconseillée.
`client_id`	L’ID client de votre application. Vous trouverez cette valeur dans les Paramètres de l’application.
`redirect_uri`	L’URL vers laquelle Auth0 redirigera le navigateur une fois que l’utilisateur aura accordé l’autorisation. 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 caractère # et ne tient pas compte des fragments.
`scope`	Spécifie les scopes pour lesquels vous souhaitez demander une autorisation, ce qui détermine quelles revendications (ou quels attributs utilisateur) vous voulez voir renvoyés. Ils doivent être séparés par un espace. Pour obtenir un ID Token dans la réponse, vous devez préciser au minimum le scope `openid`. Si vous souhaitez 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 revendications personnalisées 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é) 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 CSRF (falsification de requête intersite), consultez Mitigate CSRF Attacks With State Parameters.
`connection`	(facultatif) Force l’utilisateur à se connecter avec une connexion précise. Par exemple, vous pouvez transmettre la valeur `github` pour envoyer l’utilisateur directement vers GitHub afin qu’il se connecte avec son compte GitHub. Lorsqu’elle n’est pas précisée, 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. Lorsqu’il n’est pas fourni, si votre application est configurée pour Display Organization Prompt, l’utilisateur pourra saisir le nom de l’organisation au moment de l’authentification.
`invitation`	(facultatif) ID du ticket d’invitation à l’organisation. Lorsque vous invitez un membre à une Organization, votre application doit gérer l’acceptation de l’invitation en transmettant les paires clé-valeur `invitation` et `organization` lorsque l’utilisateur accepte l’invitation.

Par exemple, votre extrait HTML pour votre URL d’autorisation, lors de l’ajout de 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 est inclus à la fin de l’URL :

HTTP/1.1 302 Found
Location: {yourCallbackUrl}?code={authorizationCode}&state=xyzABC123

Demander des jetons

Échangez votre authorization_code et votre code_verifier contre 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 devrez envoyer une requête POST à l’URL de jeton en y joignant le code_verifier.

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

Paramètres

Nom du paramètre	Description
`grant_type`	Définissez cette valeur sur `authorization_code`.
`code_verifier`	La clé aléatoire cryptographiquement sécurisée générée à la première étape de ce tutoriel.
`code`	Le `authorization_code` récupéré à l’étape précédente de ce tutoriel.
`client_id`	L’ID client de votre application. Vous trouverez cette valeur dans les paramètres de l’application.
`redirect_uri`	L’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 que cette valeur doit être encodée dans l’URL.

Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 200 dont le corps 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",
  "expires_in":86400
}

Validez vos jetons avant de les enregistrer. Pour savoir comment faire, consultez Valider les jetons d’identité et Valider les jetons d’accès.

Les jetons d’identité contiennent des renseignements sur l’utilisateur qui doivent être décodés et extraits. Les jetons d’accès servent à appeler le point de terminaison /userinfo de l’API d’authentification Auth0 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. Les jetons d’actualisation servent à obtenir un nouveau jeton d’accès ou un nouveau 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 le 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 envoyer lorsque vous autorisez l’utilisateur à l’étape 1. Il affiche l’écran de connexion Auth0 et permet à l’utilisateur d’ouvrir une session avec n’importe laquelle de vos connexions configurées : Maintenant, lorsque vous demandez des jetons, votre jeton d’identité contiendra les claims de base. Lorsque vous décoderez le jeton d’identité, 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 du processus habituel d’authentification de l’utilisateur, cet exemple montre comment demander des informations supplémentaires sur l’utilisateur, comme son nom et sa photo de profil. Pour demander le nom et la photo de profil 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é contiendra les claims « name » et « picture » demandés. Lorsque vous décoderez le jeton d’identité, il ressemblera à ceci :

{
  "name": "auth0user@...",
  "picture": "https://example.com/profile-pic.png",
  "iss": "https://auth0user.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

Demander à l’utilisateur de se connecter avec GitHub

En plus du processus habituel d’authentification des utilisateurs, cet exemple montre comment les diriger directement vers un fournisseur d’identité social, comme GitHub. Pour que cet exemple fonctionne, vous devez accéder à Auth0 Dashboard > Authentication > Social et configurer la connexion appropriée. Obtenez 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-ci, github) lors de l’autorisation de l’utilisateur : Maintenant, lorsque vous demandez des jetons, votre jeton d’identité contiendra une propriété sub avec l’ID unique de l’utilisateur renvoyé par GitHub. Lorsque vous décoderez le jeton d’identité, il ressemblera à ceci :

{
  "name": "John Smith",
  "picture": "https://avatars.example.com",
  "email": "jsmith@...",
  "email_verified": true,
  "iss": "https://auth0user.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

Apprendre les bases

Configuration d’Auth0

Planification et conception

Auth0 AI

Ajouter la connexion à l’aide du flux du code d’autorisation avec PKCE

Prérequis

Créer le `code_verifier`

Exemple en Javascript

Exemple en Java

Exemple pour Android

Exemple en Swift 5

Exemple en Objective-C

Créer un code challenge

Exemple en Javascript

Exemple Java

Exemple en Swift 5

Exemple en Objective-C

Autoriser l’utilisateur

Exemple d’URL d’autorisation

Paramètres

Réponse

Demander des jetons

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

Paramètres

Réponse

Cas d’utilisation

Requête d’authentification de base

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

Demander à l’utilisateur de se connecter avec GitHub

En savoir plus

​Prérequis

​Créer le code_verifier

​Exemple en Javascript

​Exemple en Java

​Exemple pour Android

​Exemple en Swift 5

​Exemple en Objective-C

​Créer un code challenge

​Exemple en Javascript

​Exemple Java

​Exemple en Swift 5

​Exemple en Objective-C

​Autoriser l’utilisateur

​Exemple d’URL d’autorisation

​Paramètres

​Réponse

​Demander des jetons

​Exemple de requête POST à l’URL du jeton

​Paramètres

​Réponse

​Cas d’utilisation

​Requête d’authentification de base

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

​Demander à l’utilisateur de se connecter avec GitHub

​En savoir plus

Prérequis

Créer le `code_verifier`

Exemple en Javascript

Exemple en Java

Exemple pour Android

Exemple en Swift 5

Exemple en Objective-C

Créer un code challenge

Exemple en Javascript

Exemple Java

Exemple en Swift 5

Exemple en Objective-C

Autoriser l’utilisateur

Exemple d’URL d’autorisation

Paramètres

Réponse

Demander des jetons

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

Paramètres

Réponse

Cas d’utilisation

Requête d’authentification de base

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

Demander à l’utilisateur de se connecter avec GitHub

En savoir plus