web-dev-qa-db-fra.com

Interface utilisateur hébergée de Cognito

J'ai étudié la possibilité de configurer une connexion pour une application Web permettant aux clients d'afficher des données hébergées dans S3. AWS Cognito dispose d'une interface utilisateur Web hébergée [lien] , qui gère l'essentiel du flux d'authentification pour moi. Le problème auquel je suis confronté est que je ne parviens pas à savoir comment intégrer la sortie de l'interface utilisateur Web dans mon application. La plupart de la documentation existante dans Cognito indique simplement comment utiliser les différentes API pour créer votre propre interface utilisateur, ce qui me laisse avec des réponses confuses à mon problème.

Des informations ont-elles été créées en pensant à l'interface utilisateur hébergée de Cognito?

Amazon indique que vous pouvez intégrer une connexion authentifiée à Cognito en quelques minutes, mais cela fait quelques semaines que je la regarde et je ne peux pas le comprendre.

javascriptamazon-web-servicesamazon-s3amazon-cognitoaws-cognito
30
Fyreye

J'ai aussi eu du mal avec ça; Je conviens que la documentation est un peu légère.

Le lien que vous avez fourni indique à quoi pourrait ressembler votre URL d'interface utilisateur Cognito:

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 vers cet URI, il fait son travail, puis il est redirigé vers vous avec une sorte de jeton ou de code. Vous pouvez vérifier votre domaine en cliquant sur "Nom de domaine" dans la barre de navigation de gauche.

Paramètres du client d'application et OAuth Types d'octroi

Tout d’abord, vérifiez les paramètres de votre client App. Vous devez répertorier votre (vos) URL (s) de rappel (vers laquelle Cognito sera redirigé) et vous assurer qu'au moins une OAuth Flux est autorisé.

paramètres du client Cognito App

"Autorisation du code d'autorisation" renverra un code d'autorisation, que vous enverrez ensuite au point de terminaison oauth2/token Pour obtenir un code d'accès, un id_token et un rafraîchissement. C'est un bon choix si vous avez une application dorsale et souhaitez actualiser les jetons.

"Subvention implicite" est ce que j'utilise dans mon application front-end. Il renverra un jeton d'accès et un jeton d'identification directement à mon application frontale.

Pour utiliser une attribution implicite, remplacez response_type=code Par response_type=token Dans l'URL de votre interface utilisateur Cognito.

Exemple d'attribution implicite

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

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

Il vous suffit d'extraire l'id_token de l'URL et de l'envoyer à Cognito, avec votre groupe d'utilisateurs comme clé dans la mappe de connexions. 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 le jeton d'identification qui vous est revenu sur la redirection.

Type d'octroi de code d'autorisation

Si vous utilisez plutôt un type d’attribution de code d’autorisation (type_réponse = code), votre back-end devra appeler le point de terminaison /oauth2/token Pour échanger le code contre des jetons. Cet appel ressemblerait à quelque chose comme ça:

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'

Vous pouvez ensuite donner ce jeton d’identification à Cognito comme ci-dessus.

Notes d'interface utilisateur

Mon application affiche l'interface utilisateur de Cognito dans un nouvel onglet lorsque l'utilisateur clique sur un lien. Lorsque la redirection revient sur mon application, j'utilise postMessage() pour envoyer les jetons à la fenêtre parente, qui ferme ensuite le nouvel onglet. Je pense que c'est un modèle relativement commun.

Je ne l'ai pas essayé, mais j'imagine que le rendu de l'interface utilisateur en iframe n'est pas autorisé, car il permet d'atténuer le détournement de clics. Source

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

63
Mike Patrick

J'ai implémenté ce flux, sans utiliser Amplify, mais simplement avec l'interface utilisateur hébergée de Cognito:

  1. L'utilisateur navigue sur mon site Web (onglet 1), et sur n'importe quelle page, l'utilisateur clique sur le bouton de connexion/enregistrement.
  2. Un nouvel onglet (onglet 2) est ouvert avec l'interface utilisateur hébergée de cognito utilisant mon propre domaine (auth.example.com)
  3. Ensuite, l'utilisateur crée son entreprise sur l'interface utilisateur hébergée (connexion/nouveau compte/mot de passe récupéré, etc.)
  4. Cognito envoie un HASH dans l'URL (avec de nombreux jetons) à mon site rappel ( https://example.com/login )

  5. Mon site traite les jetons: L'astuce consiste à créer une instance Auth, celle-ci peut analyser le hachage et créer 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. Une fois que l'utilisateur a été défini dans le stockage local, le rappel (onglet 2) est fermé.

  7. Sur mon site (onglet 1), je configure un EventListener pour qu’il écoute si une modification est apportée au stockage local.

          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 avez terminé, car vous pouvez récupérer des informations d'identification ou d'autres données.
1
Cristian Sepulveda