在 Angular 中使用 Cognito Hosted UI 检索用户

Question

使用 AWS Amplify，我 configured 在我的 Angular 项目中托管 UI Amazon Cognito 以尝试 Google 登录。

从现在开始，我可以调用托管 UI 并像这样重定向 url：http://localhost:4200/authenticated?code=f4c34ad6

根据收到的代码，我想检索当前用户。

根据这个post，我可以这样做：

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 不显示在控制台上。

这是我调用托管 UI 的代码：

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

}

检索用户缺少什么？

感谢您的帮助。

编辑 - 2018 年 7 月 12 日

在我的 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
  }
});

在 Angular 中使用 Cognito Hosted UI 检索用户

Retrieve user with Cognito Hosted UI in Angular

amazon-cognito

angular

aws-amplify