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

Date de la dernière mise à jour : 23/01/2020

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 procéder ?

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 savez pas comment effectuer cette configuration ou quels 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. Ensuite, suivez les instructions ci-dessous.

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é d'Amazon Cognito ou ajoutez votre propre domaine personnalisé.

Modifiez 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 (Octroi du code d'autorisation) et Implicit grant (Autorisation implicite). Pour plus d'informations, consultez OAuth Grant Types (Types d'octroi OAuth) sur le site Web OAuth.
    Pour Allowed OAuth Scopes (Cadres OAuth autorisés), 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 (téléphone), email (e-mail) et openid.
  4. Choisissez Save changes (Enregistrer les modifications).

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

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

Vous pouvez ajouter un logo personnalisé ou personnaliser le CSS pour 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 étant 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 un éditeur de texte pour référence.
  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 (Autorisation implicite) pour Flux OAuth autorisés et que vous souhaitez qu'Amazon Cognito renvoie plutôt un jeton d'accès lorsque les 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 ?

Cette page peut-elle être améliorée ?


Vous avez besoin d’aide ?