Ajout d’une connexion avec le Flux de code d’autorisation
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 :
Guides de démarrage rapide pour applications Web classiques : la manière la plus simple d’implémenter le flux.
Authentication API : Si vous préférez créer votre propre solution, continuez à lire pour savoir comment appeler notre API directement.
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}
Was this helpful?
Paramètres
Nom du paramètre | Description |
---|---|
response_type |
Indique le type d’identifiant qu'Auth0 renverra (code ou token ). Pour ce flux, la valeur doit être code . |
client_id |
L’ID client de votre application. Vous pouvez trouver cette valeur dans vos paramètres d’application. |
redirect_uri |
L’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. |
scope |
Spé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>
Was this helpful?
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
Was this helpful?
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}'
Was this helpful?
var client = new RestClient("https://{yourDomain}/oauth/token");
var request = new RestRequest(Method.POST);
request.AddHeader("content-type", "application/x-www-form-urlencoded");
request.AddParameter("application/x-www-form-urlencoded", "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
Was this helpful?
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/oauth/token"
payload := strings.NewReader("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("content-type", "application/x-www-form-urlencoded")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
Was this helpful?
HttpResponse<String> response = Unirest.post("https://{yourDomain}/oauth/token")
.header("content-type", "application/x-www-form-urlencoded")
.body("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
.asString();
Was this helpful?
var axios = require("axios").default;
var options = {
method: 'POST',
url: 'https://{yourDomain}/oauth/token',
headers: {'content-type': 'application/x-www-form-urlencoded'},
data: new URLSearchParams({
grant_type: 'authorization_code',
client_id: '{yourClientId}',
client_secret: '{yourClientSecret}',
code: 'yourAuthorizationCode}',
redirect_uri: '{https://yourApp/callback}'
})
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
Was this helpful?
#import <Foundation/Foundation.h>
NSDictionary *headers = @{ @"content-type": @"application/x-www-form-urlencoded" };
NSMutableData *postData = [[NSMutableData alloc] initWithData:[@"grant_type=authorization_code" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&client_id={yourClientId}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&client_secret={yourClientSecret}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&code=yourAuthorizationCode}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&redirect_uri={https://yourApp/callback}" dataUsingEncoding:NSUTF8StringEncoding]];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://{yourDomain}/oauth/token"]
cachePolicy:NSURLRequestUseProtocolCachePolicy
timeoutInterval:10.0];
[request setHTTPMethod:@"POST"];
[request setAllHTTPHeaderFields:headers];
[request setHTTPBody:postData];
NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if (error) {
NSLog(@"%@", error);
} else {
NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
NSLog(@"%@", httpResponse);
}
}];
[dataTask resume];
Was this helpful?
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/oauth/token",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
CURLOPT_HTTPHEADER => [
"content-type: application/x-www-form-urlencoded"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
Was this helpful?
import http.client
conn = http.client.HTTPSConnection("")
payload = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"
headers = { 'content-type': "application/x-www-form-urlencoded" }
conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
Was this helpful?
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/oauth/token")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Post.new(url)
request["content-type"] = 'application/x-www-form-urlencoded'
request.body = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"
response = http.request(request)
puts response.read_body
Was this helpful?
import Foundation
let headers = ["content-type": "application/x-www-form-urlencoded"]
let postData = NSMutableData(data: "grant_type=authorization_code".data(using: String.Encoding.utf8)!)
postData.append("&client_id={yourClientId}".data(using: String.Encoding.utf8)!)
postData.append("&client_secret={yourClientSecret}".data(using: String.Encoding.utf8)!)
postData.append("&code=yourAuthorizationCode}".data(using: String.Encoding.utf8)!)
postData.append("&redirect_uri={https://yourApp/callback}".data(using: String.Encoding.utf8)!)
let request = NSMutableURLRequest(url: NSURL(string: "https://{yourDomain}/oauth/token")! as URL,
cachePolicy: .useProtocolCachePolicy,
timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data
let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
if (error != nil) {
print(error)
} else {
let httpResponse = response as? HTTPURLResponse
print(httpResponse)
}
})
dataTask.resume()
Was this helpful?
Paramètres
Nom de paramètres | Description |
---|---|
grant_type |
Définir sur authorization_code . |
code |
authorization_code récupéré à l’étape précédente de ce tutoriel. |
client_id |
L’ID client de votre application. Vous pouvez trouver cette valeur dans les paramètres de votre application. |
client_secret |
Le 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_uri |
L’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"
}
Was this helpful?
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.
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
Was this helpful?
{
"iss": "https://auth0pnp.auth0.com/",
"sub": "auth0|581...",
"aud": "xvt9...",
"exp": 1478112929,
"iat": 1478076929
}
Was this helpful?
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}
Was this helpful?
{
"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
}
Was this helpful?
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
Was this helpful?
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
}
Was this helpful?