Cognito hosted UI | 易学教程

问题

I have been looking into setting up a login for a web app that lets clients view data hosted in S3 and found that AWS Cognito has a hosted web UI [link] that handles most of the authentication flow for me, the issue I am facing is I cannot find out how to integrate the output of the web UI into my app. Most of the existing documentation in Cognito just references how to use the various APIs in creating your own UI which is leaving me with confusing answers to my issue.

Is there any information that has been created with the Cognito hosted UI in mind?

Amazon says that you can integrate authenticated login with Cognito in minutes but I have been looking at this for a few weeks and cant figure it out.

回答1:

I also struggled with this; I agree that the documentation is a little light.

The link you provided shows what your Cognito UI URL might look like:

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

The idea is that you send your user to this URI, they do their business, and then they get redirected back to you with some sort of token(s) or code. You can check your domain by clicking "Domain name" in the left nav bar.

App Client Settings and OAuth Grant Types

First, check your App client settings. You'll need to whitelist your Callback URL(s) (where Cognito will redirect back to), and make sure at least one OAuth Flow is allowed.

Cognito App client settings

"Authorization code grant" will return an authorization code, which you then send to the oauth2/token endpoint to get an access_token, id_token, and refresh_token. This is a good choice if you have a back-end application and want refresh tokens.

"Implicit grant" is what I'm using in my front-end application. It will return an access token and an id token directly to my front-end app.

To use implicit grant, change response_type=code to response_type=token in your Cognito UI URL.

Implicit Grant Example

So if your redirect after successful authentication looks like this:

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

You just need to peel the id_token off the URL and send it to Cognito, with your User Pool as the key in the Logins map. In 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
    }
});

Where idToken is the id token that came back to you on the redirect.

Authorization Code Grant Type

If you use authorization code grant type instead (response_type=code), your back end will need to call the /oauth2/token endpoint to exchange the code for tokens. That call would look something like this:

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'

Then you can give this id token to Cognito as above.

UI Notes

My application is popping up the Cognito UI in a new tab when the user clicks a link. When the redirect comes back to my app, I use postMessage() to send the tokens to the parent window, which then closes the new tab. I think this is a relatively common pattern.

I haven't tried it, but I'm guessing rendering the UI into an iframe is disallowed, as a mitigation against click-jacking. Source

I hope this is at least somewhat helpful. Good luck!

回答2:

I implemented this flow, not using Amplify, just using Cognito Hosted UI:

User navigates in my website (tab 1), and in any page user clicks the login/register button.
A new tab(Tab 2) is open with the cognito hosted UI using my own domain (auth.example.com)
Then user makes their business on hosted ui (login/new account/recover password,etc)
Cognito send a HASH in the URL (with many tokens) to my site callback.(https://example.com/login )

My site process the tokens: The trick is to create an Auth instance, this one can parse the hash and create the user on the 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();

After the user has been set in the Local Storage, the callback(tab 2) is closed.

On my site (tab 1) I configure an EventListener to listen if there is a change in the Local Storage.

      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();
            }
       }

With cognitoUser you are done, because you can retrieve credentials or other data.

回答3:

You can find more detail about how to make this work here -

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

回答4:

To use the Hosted UI, you need to set a domain name where the UI is hosted. You also need to set redirect URIs - one for after sign in, one for after sign out. You do both in the AWS Console, in the settings page for a Cognito user pool.

Substitute the URIs you set into this format: {Domain URL}/login?response_type=code&client_id={App Client ID}&redirect_uri={Callback URL}

For example: https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

This address displays a sign in form. After sign in the user is redirected to https://my-website.com with a code appended to the URI, like so: https://my-website.com?code=f0ee2961-f349-44c7-92b1-0400c762573b

Source

API reference - explains the pattern for /login, /logout and other endpoints.

来源：https://stackoverflow.com/questions/45926339/cognito-hosted-ui

标签

javascript

amazon-web-services

amazon-s3

amazon-cognito

aws-cognito