Comment puis-je configurer l’interface utilisateur Web hébergée d’Amazon Cognito ?

Brève description

Lorsque vous créez un groupe d’utilisateurs dans Amazon Cognito et que vous configurez un domaine pour celui-ci, Amazon Cognito fournit automatiquement une interface utilisateur Web hébergée pour vous permettre d’ajouter des pages d’inscription et de connexion à votre application.

Si vous ne connaissez pas la procédure à suivre ni les paramètres à utiliser (par exemple, quels types de flux et de portées OAuth 2.0 activer), suivez les étapes décrites dans cet article.

Résolution

Si ce n’est pas déjà fait, créez un groupe d’utilisateurs, puis créez un client d’application dans le groupe d’utilisateurs. Suivez ensuite les instructions ci-dessous :

Remarque : ces instructions sont basées sur la nouvelle console Amazon Cognito.

Ajout d’un nom de domaine au groupe d’utilisateurs

1. Dans la console Amazon Cognito, sélectionnez Groupes d’utilisateurs, puis choisissez votre groupe d’utilisateurs.
2. Sous Intégration d’applications, choisissez Nom de domaine, puis Actions.
3. Choisissez Créer un domaine Cognito pour ajouter le préfixe de votre propre domaine au domaine hébergé par Amazon Cognito. Vous pouvez également sélectionner Créer un domaine personnalisé pour ajouter votre propre domaine personnalisé.

Modifier les paramètres du client d’application

1. Dans la console Amazon Cognito, sélectionnez Groupes d’utilisateurs, puis choisissez votre groupe d’utilisateurs.
2. Sous Intégration d’applications, sélectionnez le client d’application dans la section Clients d’application et analytique.
3. Sélectionnez Modifier dans la section Interface utilisateur hébergée.
4. Procédez comme suit :
   Dans URL de rappel autorisées, saisissez l’URL de l’application Web qui recevra le code d’autorisation. Vos utilisateurs seront redirigés ici lorsqu’ils se connecteront.
   Dans URL de déconnexion autorisées (facultatif), saisissez l’URL vers laquelle vous souhaitez rediriger vos utilisateurs lorsqu’ils se déconnectent.
   Dans Fournisseurs d’identité, sélectionnez Groupe d’utilisateurs Cognito dans la liste déroulante.
   Pour Types d’octroi OAuth 2.0, sélectionnez l’octroi par code d’autorisation ou l’octroi implicite pour le flux d’authentification OAuth 2.0. Les clients confidentiels et publics utilisent le type d’octroi par code d’autorisation pour échanger un code d’authentification contre un jeton d’accès. L’octroi de type implicite n’est utilisé que lorsqu’il existe une raison spécifique de ne pas utiliser l’octroi par code d’autorisation.
   Dans Portées de connexion OpenID, sélectionnez openid et toute autre portée OAuth que vous souhaitez qu’Amazon Cognito ajoute aux jetons lorsque vos utilisateurs s’authentifient. Par exemple, téléphone et e-mail.
   Dans Portées personnalisées, sélectionnez toutes les portées personnalisées que vous souhaitez autoriser pour cette application.
5. Choisissez Enregistrer les modifications.

Pour en savoir plus, consultez Configuration d’un client d’application de groupe d’utilisateurs.

(Facultatif) Personnaliser l’interface utilisateur Web hébergée

Il est possible d’ajouter un logo personnalisé ou de personnaliser le CSS de l’interface utilisateur Web hébergée. Pour en savoir plus, consultez Personnalisation des pages Web intégrées d’inscription et de connexion.

(Facultatif) Créer l’URL de l’interface utilisateur Web hébergée

Si vous souhaitez contrôler les paramètres inclus dans l’URL de connexion de l’interface utilisateur Web hébergée, il suffit de créer l’URL manuellement.

1. Dans la console Amazon Cognito, sélectionnez Groupes d’utilisateurs, puis choisissez votre groupe d’utilisateurs.
2. Sous Intégration d’applications, copiez l’URL du domaine dans la section Domaine. Collez ensuite l’URL dans un éditeur de texte à titre de référence.
3. Sous Clients d’application et analytique, cliquez sur le nom de votre client.
4. Copiez l’ID du client dans votre presse-papiers. Collez ensuite l’ID dans un éditeur de texte à titre de référence.
5. Copiez l’une des URL de rappel autorisées dans le presse-papiers. Collez ensuite l’URL dans un éditeur de texte à titre de référence.
6. Vous pouvez créer l’URL de l’interface utilisateur Web hébergée en rassemblant les informations que vous venez de copier dans le format suivant :
   domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
   Par exemple : https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com
   -ou-
   Choisissez Afficher l’interface utilisateur hébergée dans la section Client d’application pour accéder à l’URL par défaut du point de terminaison de connexion. Remplacez ensuite certaines parties de l’URL comme indiqué précédemment.

Si vous avez précédemment activé un octroi par code d’autorisation dans Types d’octroi OAuth 2.0, l’utilisation de cette URL invitera alors Amazon Cognito à renvoyer un code d’autorisation lorsque vos utilisateurs se connecteront. Si vous avez activé Octroi implicite dans Types d’octroi OAuth 2.0 et que vous souhaitez qu’Amazon Cognito renvoie plutôt un jeton d’accès lorsque vos utilisateurs se connectent, remplacez response_type=code par response_type=token dans l’URL.

Lancement de l’interface utilisateur Web hébergée

Remarque : si vous avez créé manuellement l’URL de l’interface utilisateur Web hébergée, il est préférable de saisir cette URL dans votre navigateur Web.

1. Dans la console Amazon Cognito, sélectionnez Groupes d’utilisateurs, puis choisissez votre groupe d’utilisateurs.
2. Sous Intégration d’applications, cliquez sur Nom du client dans la section Clients d’application et analytique.
3. Sous Interface utilisateur hébergée, sélectionnez Afficher l’interface utilisateur hébergée. La page de connexion de l’interface utilisateur Web hébergée s’ouvre alors dans un nouvel onglet ou dans une nouvelle fenêtre du navigateur.

Informations connexes

Premiers pas avec les groupes d’utilisateurs