Interface utilisateur hébergée de Cognito

Question

J'ai été à la recherche dans la configuration d'une connexion pour une application web qui permet aux clients de visualiser les données hébergées dans S3 et a constaté que AWS Cognito a hébergé une INTERFACE web [lien] qui traite de la plupart des flux d'authentification pour moi, la question que je pose est que je ne trouve pas comment intégrer la sortie de l'INTERFACE web dans mon application. La plupart de la documentation existante dans Cognito juste références comment utiliser les différentes Api dans la création de votre propre INTERFACE utilisateur qui est me laissant avec la confusion des réponses à mon problème.

Est-il de toute information qui a été créé avec le Cognito hébergé de l'INTERFACE utilisateur à l'esprit?

Amazon affirme que vous pouvez intégrer une connexion authentifiée avec Cognito en quelques minutes, mais j'ai été à la recherche à ce pour quelques semaines et je ne peux le comprendre.

Answer 1

J'ai aussi eu du mal avec cela; je suis d'accord que la documentation est un peu léger.

Le lien que vous avez fourni montre ce que votre Cognito URL de l'INTERFACE utilisateur pourrait ressembler à:

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

L'idée est que vous envoyez votre utilisateur à cet URI, ils font de leur entreprise, et ils arrivent ensuite redirigé vers vous avec une sorte de jeton(s) ou du code. Vous pouvez vérifier votre domaine en cliquant sur "nom de Domaine" dans la partie gauche de la barre de navigation.

Application des Paramètres de Client et OAuth les Types de Subventions

Tout d'abord, vérifiez votre Application paramètres du client. Vous aurez besoin de la liste blanche de votre URL de Callback(s) (où Cognito sera de redirection), et assurez-vous qu'au moins un OAuth Flux est autorisé.

Cognito Application des paramètres du client

"Code d'autorisation de la subvention" sera de retour un code d'autorisation, que vous pouvez ensuite envoyer à l' oauth2/token d'extrémité pour obtenir une access_token, id_token, et refresh_token. C'est un bon choix si vous avez une application de back-end et souhaitez actualiser les jetons.

"Reconnaissance implicite" est ce que j'utilise dans mon application front-end. Il sera de retour un jeton d'accès et un id de jeton directement à mon avant la fin de l'application.

À l'utilisation de la reconnaissance implicite, changement response_type=code de response_type=token dans votre Cognito de l'INTERFACE utilisateur de l'URL.

Reconnaissance Implicite De L'Exemple

Donc, si votre redirection après l'authentification réussie ressemble à ceci:

https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600

Vous avez juste besoin de peler les id_token hors de l'URL et de l'envoyer à Cognito, avec votre groupe d'Utilisateurs comme clé dans les Connexions à la carte. En Javascript:

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c',
    Logins: {
        'cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx': idToken
    }
});

Où idToken est l'id de jeton qui est venu de nouveau à vous sur la redirection.

Code D'Autorisation Type De Subvention

Si vous utilisez le code d'autorisation type de subvention à la place (response_type=code) de votre back-end aurez besoin de faire appel à l' /oauth2/token de terminaison change le code de jetons. Cet appel devrait ressembler à quelque chose comme ceci:

curl -X POST \
  https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d 'grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2'

Ensuite, vous pouvez donner cette id de jeton de Cognito comme ci-dessus.

L'INTERFACE utilisateur Notes

Ma demande est popping up le Cognito de l'INTERFACE utilisateur dans un nouvel onglet lorsque l'utilisateur clique sur un lien. Lors de la redirection en revient à mon application, j'utilise postMessage() d'envoyer les invitations à la fenêtre parent, qui ferme l'onglet nouveau. Je pense que c'est relativement un modèle commun.

Je n'ai pas essayé, mais je suppose que le rendu de l'INTERFACE utilisateur dans une iframe est rejetée, en tant que mesures d'atténuation contre click-jacking. Source

---

J'espère que c'est au moins un peu utile. Bonne chance!

Answer 2

J'ai mis en place ce flux, en n'utilisant pas l'Amplifier, en utilisant seulement Cognito Hébergé de l'INTERFACE utilisateur:

1. L'utilisateur navigue dans mon site web (onglet 1), et dans n'importe quelle page de l'utilisateur clique sur la connexion/s'inscrire bouton.
2. Un nouvel onglet(Onglet 2) est ouvert avec le cognito hébergé INTERFACE utilisateur à l'aide de mon propre nom de domaine (auth.example.com)
3. Ensuite, l'utilisateur fait leurs affaires hébergé sur l'interface utilisateur (login/nouveau compte/récupérer le mot de passe,etc)
4. Cognito envoyer un HASH de l'URL (avec beaucoup de jetons) pour mon site de rappel.(https://example.com/login )

5. Mon site processus de jetons: L'astuce est de créer un Auth exemple, on peut analyser le hachage et de créer de l'utilisateur sur le LocalStorage:

   // mysite.com/login 
   import {CognitoAuth} from 'amazon-cognito-auth-js';
   
   // Configuration for Auth instance.
   var authData = {
       UserPoolId: 'us-east-1_xxxx',
       ClientId: '1vxxxxx',
       RedirectUriSignIn : 'https://example.com/login',
       RedirectUriSignOut : 'https://example.com/logout',
       AppWebDomain : 'example.com',
       TokenScopesArray: ['email']
       };
   var auth = new CognitoAuth(authData);
   
   //Callbacks, you must declare, but can be empty. 
   auth.userhandler = {
       onSuccess: function(result) {
   
       },
       onFailure: function(err) {
       }
   };
   
   //Get the full url with the hash data.
   var curUrl = window.location.href;
   
   
   //here is the trick, this step configure the LocalStorage with the user.
   auth.parseCognitoWebResponse(curUrl);
   window.top.close();
   

6. Après que l'utilisateur a été défini dans le Local de Stockage, la fonction de rappel(onglet 2) est fermé.

7. Sur mon site (onglet 1) - je configurer un EventListener écouter si il y a un changement dans le Local de Stockage.

         constructor() {
         window.addEventListener('storage', this.userLogged);
         }
   
         userLogged(event) {
   
           if (event.key.indexOf('CognitoIdentityServiceProvider') !== -1) {
   
             var data = {
                         UserPoolId: 'us-east-1_xxxxx',
                         ClientId: 'xxxxx'
                         };
   
            var userPool = new CognitoUserPool(data);
   
            //behind the scene getCurrentUser looks for the user on the local storage. 
            var cognitoUser = userPool.getCurrentUser();
               }
          }
   

8. Avec cognitoUser vous sont faites, parce que vous pouvez récupérer les informations d'identification ou d'autres données.

Answer 3

Utilisation de l'Hébergé de l'INTERFACE utilisateur, vous devez définir un nom de domaine où l'INTERFACE est hébergé. Vous devez également définir redirect Uri - un pour après la connexion, l'un après déconnexion. Vous faites tous les deux dans la Console AWS, dans la page des paramètres pour un Cognito utilisateur de la piscine.

Remplacer les URIs vous définissez dans ce format: {URL de domaine}/login?response_type=code&client_id={App Client ID}&redirect_uri={URL de Callback}

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

Cette adresse affiche un signe en forme. Après la connexion, l'utilisateur est redirigé vers https://my-website.com avec un code annexé à l'URI, comme suit: https://my-website.com?code=f0ee2961-f349-44c7-92b1-0400c762573b

Source

Référence de l'API ,- explique le motif de /nom de connexion /déconnexion et d'autres paramètres.

Answer 4

Vous pouvez trouver plus de détails sur la façon de faire ce travail ici

https://aws.amazon.com/blogs/aws/launch-amazon-cognito-user-pools-general-availability-app-integration-and-federation/

http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-ux.html

http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-ui-customization.html