在Angular中使用Cognito Hosted UI检索用户-Java 学习之路

使用AWS Amplify，我在Angular项目中使用Amazon Cognito Hosted UI来尝试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);
  }

}

检索用户缺少什么？

谢谢你的帮助 .

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

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

回复于 2024-04-26T06:08:11+08:00

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

1 回答

相关问题