在 Angular 6 中为托管 UI 配置 Amplify 时返回错误请求

Question

正在阅读 Amplify 的文档，以在 Angular 6 中配置托管 UI 的 AWS Cognito。登录后收到 400 错误请求。

信息如下：

在 main.ts 中配置了 AWS Amplify。

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_XXXX',
    userPoolWebClientId: 'CLIENT_ID',
    oauth: {
      domain: 'IDP.auth.us-east-1.amazoncognito.com',
      scope: ['openid'],
      redirectSignIn:  'http://localhost:4200/',
      redirectSignOut: 'http://localhost:4200/',
      responseType: 'code', 
      options: {
        AdvancedSecurityDataCollectionFlag: true
      }
    }
  }
});

在app-component.ts中：

 import { Auth} from 'aws-amplify';

 onLoginClick() {
    Auth.federatedSignIn();
 }

Chrome 控制台 日志。

网络选项卡

Answer 1

终于找到解决办法了。

我们需要在不生成 client_secret 的情况下创建用户池。

已更新package.json

    "aws-amplify": "1.1.28",
    "@aws-amplify/ui": "1.0.19",

禁用分析：

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_XXXX',
    userPoolWebClientId: 'client_id',
    oauth: {
      domain: 'idp.auth.us-east-1.amazoncognito.com',
      scope: ['openid'],
      redirectSignIn:  'http://localhost:4200/',
      redirectSignOut: 'http://localhost:4200/',
      responseType: 'code',
      options: {
        AdvancedSecurityDataCollectionFlag: true
      }
    }
  },
  Analytics:{
    disabled:true
  }
});

输出：

在 Angular 6 中为托管 UI 配置 Amplify 时返回错误请求

Bad Request is returned when Amplify is configured for hosted UI in Angular 6

oauth-2.0

amazon-cognito

angular

aws-amplify