Angular 10 - AuthError - 錯誤：未正確配置放大

Question

我嘗試將 Amplify Authenticator 組件添加到 Angular 應用程序，但出現身份驗證錯誤。 該應用程序使用 Angular 10.1.1 和 Amplify 3.3.1。 Amplify 框架配置了現有的身份驗證資源。

這在早期適用於 Angular 8 和 Amplify 1.3.3。 將其遷移到上述版本后出現此問題。

以下是該應用程序的一些詳細信息：

• 放大狀態

  

• 包.json

   { "name": "cg-client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~10.1.1", "@angular/cdk": "^10.2.4", "@angular/common": "~10.1.1", "@angular/compiler": "~10.1.1", "@angular/core": "~10.1.1", "@angular/forms": "~10.1.1", "@angular/material": "^10.2.4", "@angular/platform-browser": "~10.1.1", "@angular/platform-browser-dynamic": "~10.1.1", "@angular/router": "~10.1.1", "@aws-amplify/ui-angular": "^0.4.6", "aws-amplify": "^3.3.1", "boxicons": "^2.0.5", "lodash": "^4.17.20", "ngx-bootstrap": "^6.1.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1001.1", "@angular/cli": "~10.1.1", "@angular/compiler-cli": "~10.1.1", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2" } }

• app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import { MatIconModule } from '@angular/material/icon';
import 'boxicons';

import Amplify from '@aws-amplify/core';
import { Auth } from 'aws-amplify';

import { AppComponent } from './app.component';
import { AuthComponent } from './auth/auth.component';
import { MainNavigationComponent } from './main-navigation/main-navigation.component';
import { AppRoutingModule } from './app-routing.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import awsconfig from "../../src/aws-exports";

Amplify.Logger.LOG_LEVEL = "DEBUG";

const amplifyConfig = {
  Auth: {
      identityPoolId: awsconfig.aws_cognito_identity_pool_id,
      region: awsconfig.aws_project_region,
      identityPoolRegion: awsconfig.aws_cognito_region,
      userPoolId: awsconfig.aws_user_pools_id,
      userPoolWebClientId: awsconfig.aws_user_pools_web_client_id,
      mandatorySignIn: false,
      authenticationFlowType: 'USER_PASSWORD_AUTH',
      oauth: {
          domain: awsconfig.oauth.domain,
          scope: awsconfig.oauth.scope,
          redirectSignIn: awsconfig.oauth.redirectSignIn,
          redirectSignOut: awsconfig.oauth.redirectSignOut,
          responseType: awsconfig.oauth.responseType 
      }
  }
}
Amplify.configure(amplifyConfig)
const currentConfig = Auth.configure();


@NgModule({
  declarations: [AppComponent, AuthComponent, MainNavigationComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    BrowserModule,
    AmplifyUIAngularModule,
    AppRoutingModule,
    NoopAnimationsModule,
    MatIconModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

• aws-exports.js 文件

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_content_delivery_bucket": "xxxx-xxxx-20190930101956-hostingbucket-dev",
    "aws_content_delivery_bucket_region": "us-east-1",
    "aws_content_delivery_url": "http://xxxx-xxxx-20190930101956-hostingbucket-dev.s3-website-us-east-1.amazonaws.com",
    "aws_cognito_identity_pool_id": "us-east-1:xxxx-xxxx-xxxx-xxxx-xxxxxxx",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_xxXXxxxX",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxxx",
    "oauth": {
        "domain": "xx-xxx-dev.auth.us-east-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "https://xxxxxx.cloudfront.net/dashboard/,http://localhost:4200/dashboard/",
        "redirectSignOut": "https://xxxxxxxxxx.cloudfront.net/,http://localhost:4200/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

• auth.component.html

<div class="container">
        <div style="margin-top: 30px">
          <amplify-authenticator
            *ngIf="authState !== 'signedin'"
          ></amplify-authenticator>

          <div *ngIf="authState === 'signedin' && user" class="App">
            <amplify-sign-out></amplify-sign-out>
            <div>Hello, {{ user.username }}</div>
            <!-- This is where you application template code goes -->
          </div>
        </div>
      </div>

• auth.component.ts

import { Component, OnInit, ChangeDetectorRef  } from '@angular/core';
import { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify/ui-components';


@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css'],
})
export class AuthComponent implements OnInit {
  user: CognitoUserInterface | undefined;
  authState: AuthState;
  constructor(private ref: ChangeDetectorRef) {
   
  }

  ngOnInit(): void {
    onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData as CognitoUserInterface;
      this.ref.detectChanges();
    })
  }

  ngOnDestroy() {
    return onAuthUIStateChange;
  }
}

Answer 1

嘗試將此代碼添加到src/main.ts ：

import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

如果這不能解決所有問題，請查看更新的設置指南，以確保其他步驟配置正確： https : //docs.amplify.aws/start/getting-started/setup/q/integration/angular#connect-frontend - 到 API