Comment configurer l'interface utilisateur web hébergée pour Amazon Cognito ?

Dernière mise à jour : 09/03/2021

Je souhaite configurer l'interface utilisateur Web hébergée pour mon groupe d'utilisateurs Amazon Cognito, mais je ne suis pas certain des paramètres à activer. Comment puis-je la configurer ?

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 n'êtes pas sûr de la procédure ou des paramètres à utiliser (par exemple, quels types de flux et de règles OAuth 2.0 activer), suivez les étapes décrites dans cet article.

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 ces instructions :

Ajoutez un nom de domaine à votre groupe d'utilisateurs

  1. Dans la console Amazon Cognito, sélectionnez Manage user pools (Gérer les groupes d'utilisateurs), puis choisissez votre groupe d'utilisateurs.
  2. Dans le volet de navigation de gauche, sous App integration (Intégration d'application), sélectionnez Domain name (Nom de domaine).
  3. Ajoutez votre propre préfixe au domaine hébergé Amazon Cognito ou ajoutez votre propre domaine personnalisé.

Modifier les paramètres du client d'application

  1. Dans la console Amazon Cognito, sélectionnez Manage user pools (Gérer les groupes d'utilisateurs), puis choisissez votre groupe d'utilisateurs.
  2. Dans le volet de navigation de gauche, sous App integration (Intégration d'application), sélectionnez App client setting (Paramètres du client d'application).
  3. Procédez comme suit :
    Sous Enabled identity providers (Fournisseurs d'identité autorisés), cochez la case Cognito User Pool (Groupe d'utilisateurs Cognito).
    Pour Callback URL(s) (URL de rappel), saisissez l'URL de votre application Web qui recevra le code d'autorisation. Vos utilisateurs sont redirigés sur cette page lorsqu'ils se connectent.
    Pour Sign out URL(s) (URL de déconnexion), saisissez l'URL permettant de rediriger les utilisateurs lorsqu'ils se déconnectent.
    Pour Allowed OAuth Flows (flux OAuth autorisés), sélectionnez tous les flux d'authentification OAuth 2.0 que vous souhaitez activer. Par exemple, Authorization code grant et Implicit grant. Pour plus d'informations, consultez OAuth Grant Types (Types d'octroi OAuth) sur le site Web OAuth.
    Pour Règles OAuth autorisées, sélectionnez les règles OAuth que vous souhaitez qu'Amazon Cognito ajoute dans les jetons pour l'authentification de vos utilisateurs. Par exemple, phone, email et openid.
  4. Sélectionnez Enregistrer les modifications.

Pour plus d'informations, consultez Configuration d'un client d'application pour groupe d'utilisateurs.

(Facultatif) Personnalisation de l'interface utilisateur web hébergée

Vous pouvez ajouter un logo personnalisé ou personnaliser le CSS de l'interface utilisateur web hébergée. Pour plus d'informations, consultez la page Customizing the Built-in Sign-in and Sign-up Webpages (Personnalisation des pages Web intégrées de connexion et d'inscription).

(Facultatif) Création et test de 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, créez l'URL manuellement.

  1. Dans la console Amazon Cognito, sélectionnez Manage user pools (Gérer les groupes d'utilisateurs), puis choisissez votre groupe d'utilisateurs.
  2. Dans le volet de navigation de gauche, Sélectionnez App integration (Intégration d'application).
  3. Copiez l'URL du domaine dans votre presse-papiers, puis collez-la dans l'éditeur de texte de votre choix.
  4. Dans le volet de navigation de gauche, sous App integration (Intégration d'application), sélectionnez App client setting (Paramètres du client d'application).
  5. Procédez comme suit :
    Sous Client d'application [nom], copiez l'ID dans votre presse-papiers, puis collez-le dans un éditeur de texte pour référence.
    Sous Sign in and sign out URLs (URL de connexion et de déconnexion), copiez l'URL que vous avez saisie pour Callback URL(s) (URL de rappel).
  6. Construisez l'URL de l'interface utilisateur Web hébergée en collant ensemble les informations que vous venez de copier dans ce format :
    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

Si vous avez précédemment activé Authorization code grant (Octroi du code d'autorisation) pour Flux OAuth autorisés, l'utilisation de cette URL invite Amazon Cognito à renvoyer un code d'autorisation lorsque les utilisateurs se connectent. Si vous avez précédemment activé Implicit grant pour Flux OAuth autorisés 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.

Lancer l'interface utilisateur Web hébergée

Remarque : si vous avez créé manuellement l'URL de l'interface utilisateur Web hébergée, saisissez plutôt cette URL dans votre navigateur Web.

  1. Dans la console Amazon Cognito, sélectionnez Manage user pools (Gérer les groupes d'utilisateurs), puis choisissez votre groupe d'utilisateurs.
  2. Dans le volet de navigation de gauche, sous App integration (Intégration d'application), sélectionnez App client setting (Paramètres du client d'application).
  3. Sous Hosted UI (Interface utilisateur hébergée), choisissez Launch Hosted UI (Lancer l'interface utilisateur hébergée). La page de connexion de l'interface utilisateur Web hébergée s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur.

Cet article vous a-t-il été utile ?


Besoin d'aide pour une question technique ou de facturation ?