Получить пользователя с помощью Cognito Hosted UI в Angular

Question

Используя AWS Amplify, я настроил размещенный пользовательский интерфейс Amazon Cognito в моем проекте Angular для попытки входа в Google.

Теперь я могу вызвать размещенный пользовательский интерфейс и получить перенаправленныйURL, как этот: http://localhost:4200/authenticated?code=f4c34ad6

Получив код, я бы хотел получить текущего пользователя.

Согласно этому сообщению , я могу это сделатьвот так:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Auth, Hub } from 'aws-amplify';

@Component({
  selector: 'app-authenticated',
  templateUrl: './authenticated.component.html',
  styleUrls: ['./authenticated.component.css']
})
export class AuthenticatedComponent implements OnInit {

  constructor(
    public router: Router
  ) {
    console.log('constructor');
    Hub.listen('auth', this, 'AuthCodeListener');
  }

  ngOnInit() {
  }

  onHubCapsule(capsule: any) {
    const { channel, payload } = capsule; // source
    if (channel === 'auth' && payload.event === 'signIn') {
      Auth.currentAuthenticatedUser().then((data) => {
        console.log('---', data) // THIS WORKS for Hosted UI!
        // redirect to other page
      });
    }
  }

}

Но безуспешно.onHubCapsule не отображается на консоли.

Вот мой код для вызова размещенного пользовательского интерфейса:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <button class="button" (click)="login()">Log in with 
Google</button>
  `
})
export class HomeComponent {
  private url = 'https://' + 'auth-social.auth.eu-central-1.amazoncognito.com' + '/login?redirect_uri=' + 'http://localhost:4200/authenticated' + '&response_type=' + 'code' + '&client_id=' + '7b9pefeu654i7u342******';

  login() {
    window.location.assign(this.url);
  }

}

Чего не хватает для извлечения пользователя?

Спасибо за вашу помощь.

Редактировать - 07/12/2018

В моем main.ts у меня есть следующая конфигурация:

import Amplify from 'aws-amplify';
import amplify from './aws-exports';

Amplify.configure({
  Auth: {
    // Domain name
    domain: 'auth-social.auth.eu-central-1.amazoncognito.com',

    // Authorized scopes
    scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],

    // Callback URL
    redirectSignIn: 'http://localhost:4200/authenticated',

    // Sign out URL
    redirectSignOut: 'http://localhost:4200',

    // 'code' for Authorization code grant, 
    // 'token' for Implicit grant
    responseType: 'code',

    // optional, for Cognito hosted ui specified options
    options: {
      // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
      AdvancedSecurityDataCollectionFlag: true
    }
  },
  amplify
});

Answer 1

Добавьте эту конфигурацию oauth, и она будет работать:

https://aws -amplify.github.io / docs / js / authentication # configuring-the-hosted-ui

Итак, конфигурация должна выглядеть следующим образом:

import Amplify from 'aws-amplify';
import amplify from './aws-exports';

const oauth = {
    // Domain name
    domain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com', 

    // Authorized scopes
    scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'], 

    // Callback URL
    redirectSignIn : 'http://www.example.com/signin', 

    // Sign out URL
    redirectSignOut : 'http://www.example.com/signout',

    // 'code' for Authorization code grant, 
    // 'token' for Implicit grant
    responseType: 'code',

    // optional, for Cognito hosted ui specified options
    options: {
        // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
        AdvancedSecurityDataCollectionFlag : true
    }
}

Amplify.configure({
  ...amplify,
  Auth: {
    oauth: oauth
  }
});