Ajouter la connexion en utilisant le flux implicite avec Form Post

Vous pouvez ajouter une connexion à votre application Web monopage (SPA) à l’aide du flux implicite avec Form Post. Pour savoir comment fonctionne le flux et pourquoi vous devriez l’utiliser, consultez Flux implicite avec Form Post.

Utilisez le flux implicite avec Form Post pour les cas d’utilisation concernant uniquement la connexion; si vous devez demander des jetons d’accès tout en connectant l’utilisateur pour pouvoir appeler votre API, utilisez le flux de code d’autorisation avec une Proof Key for Code Exchange (PKCE). Pour en apprendre davantage, consultezFlux de code d’autorisation avec Proof Key for Code Exchange (PKCE).

Pour implémenter le flux implicite avec Form Post, vous pouvez utiliser les ressources suivantes :

• SDK Express OpenID Connect : la manière la plus simple d’implémenter le flux, qui fera le gros du travail à votre place. Si vous utilisez notre trousse SDK pour Javascript, assurez-vous d’implémenter des mesures d’atténuation adaptées à votre architecture. Pour en apprendre davantage, consultez Référence Auth0.js v9.

• 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 de l’utilisateur. Le jeton d’ID contiendra les renseignements de base du profil utilisateur.

Enregistrez votre application auprès d’Auth0. Pour en apprendre davantage, consultez Enregistrer les applications Web monopages.

• Sélectionnez Application Web monopage comme Type d’application.

• Ajoutez une URL de rappel autoriséede {https://yourApp/callback}.

• Assurez-vous que les Grant Types (Types d’autorisation) de votre application comprennent Implicit (Implicite). Pour en savoir plus, lisez Mettre à jour les types d’autorisation.

Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application. Pour lancer le flux, vous aurez besoin de l’autorisation de l’utilisateur. Cette étape peut comprendre un ou plusieurs des procédés suivant :

• Authentification de l’utilisateur;

• Rediriger l’utilisateur vers un fournisseur d’identité pour gérer l’authentification;

• Vérification des sessions actives d’authentification unique (SSO);

• 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.

https://{yourDomain}/authorize?
    response_type=YOUR_RESPONSE_TYPE&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=SCOPE&
    state=STATE&
    nonce=NONCE

Par exemple, votre extrait HTML pour l’URL d’autorisation lors de l’ajout d’une connexion à votre application pourrait ressembler à ceci :

<a href="https://{yourDomain}/authorize?
  response_type=id_token token&
  response_mode=form_post&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=read:tests&
  state=xyzABC123&
  nonce=eq...hPmz">
  Sign In
</a>

Si tout se passe bien, vous recevrez une réponse HTTP 302. Les identifiants demandés sont codées dans le corps :

HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123

Notez que les valeurs renvoyées dépendent de ce que vous avez demandé comme response_type.

Auth0 renverra également toute valeur d’état incluse dans votre appel vers l’URL d’autorisation.

Les jetons d’ID contiennent des informations de l’utilisateur qui doivent être décodées et extraites.

Cet exemple montre la requête la plus basique que vous pouvez faire lorsque vous autorisez l’utilisateur à l’étape 1. Il affiche l’écran de connexion Auth0 et permet à l’utilisateur de se connecter avec l’une des connexions configurées :

https://{yourDomain}/authorize?
    response_type=id_token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    nonce=NONCE

Cela renverra un jeton d’ID, que vous pourrez analyser à partir de votre URL de redirection.

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=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE

Désormais, 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
}

En plus de l’authentification habituelle des utilisateurs, cet exemple montre comment envoyer les utilisateurs directement à un fournisseur d’identité sociale, tel que GitHub. Pour que cet exemple puisse fonctionner, vous devez aller vers Auth0 Dashboard > Authentification > Médias sociaux et configurez la connexion appropriée. Obtenez le nom de la connexion à partir de l’onglet Paramètres.

Pour envoyer les utilisateurs directement vers l’écran de connexion de GitHub, vous devez passer le paramètre de connection et régler sa valeur pour le nom de la connexion (dans ce cas, github) en autorisant l’utilisateur :

https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE&
    connection=github

À présent, votre jeton d’ID contiendra une sous-demande avec l’ID unique de l’utilisateur retourné 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
}

• Cadre d’applications Authorization OAuth 2.0
• Protocole OpenID Connect
• Jetons
• Atténuer les attaques par réinsertion lors de l'utilisation du flux implicite
• Enregistrement d’applications Web à page unique
• Mettre à jour les types d’autorisation