AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."
AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."
我正在尝试更新我在 2020 年构建的项目,该项目不再有效,但我一直 运行关注这个问题。
[ERROR] 04:09.562 AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
我创建了一个新的 angular (Ionic) 项目,看看我是否可以查明问题所在,但这个问题又出现了。我按照文档设置放大,但我们已经有一个后端,所以我 运行 amplify pull --appId XXXXXX --envName XXXX
得到 aws-exports.js。
- 我已经完成了
npm i aws-amplify @aws-amplify/ui-angular
- 我试过删除 node-modules 和 package-lock.json,然后 运行ning
npm i
- 我已将 aws-exports.js 重命名为 aws-exports.ts 并将其添加到我的 ts-config.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts",
"src/aws-exports.ts"
],
"include": [
"src/**/*.d.ts"
]
}
- 在main.ts中我添加了
import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
Auth.configure(awsmobile); // I've tried both with and without this line
- 我已经按照文档实现了 Authenticator UI 组件。
如有任何信息,我们将不胜感激!我已经通读了关于这个问题的多个话题,none 的建议奏效了。
这是我的 aws-exports.ts 的内容(数据已编辑!)
const awsmobile = {
"aws_project_region": "eu-west-2",
"aws_appsync_graphqlEndpoint": "https://XXXXX.appsync-api.eu-west-2.amazonaws.com/graphql",
"aws_appsync_region": "eu-west-2",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "XXXXX",
"aws_cognito_identity_pool_id": "eu-west-2:XXXXX",
"aws_cognito_region": "eu-west-2",
"oauth": {},
"aws_cognito_username_attributes": [],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [],
"aws_cognito_mfa_types": [],
"aws_cognito_password_protection_settings": {
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [],
"aws_mobile_analytics_app_id": "XXXXX",
"aws_mobile_analytics_app_region": "eu-west-1"
};
export default awsmobile;
编辑:
我还尝试了 运行ning amplify init
并创建了一个新的 Amplify 项目,但问题仍然存在。我做了 运行 amplify push
这是我的 package.json:
{
"name": "XXXX",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@aws-amplify/ui-angular": "^2.0.11",
"@capacitor/app": "1.1.0",
"@capacitor/core": "3.4.0",
"@capacitor/haptics": "1.1.4",
"@capacitor/keyboard": "1.2.1",
"@capacitor/status-bar": "1.0.7",
"@ionic/angular": "^6.0.0",
"aws-amplify": "^4.3.13",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular-eslint/builder": "~13.0.1",
"@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "~13.0.1",
"@angular/compiler": "~13.0.0",
"@angular/compiler-cli": "~13.0.0",
"@angular/language-service": "~13.0.0",
"@capacitor/cli": "3.4.0",
"@ionic/angular-toolkit": "^5.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"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",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
编辑:
正如 Juicy-g 所建议的,我尝试使用
"@aws-amplify/auth": "^4.3.14",
"@aws-amplify/core": "^4.3.14"
和
import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
Auth.configure(awsmobile);
我仍然得到相同的结果。最新版的@aws-amplify/auth好像有内部问题所以匹配了最新版的@aws-amplify/core
事实证明,这是由于我们不得不将我们的项目从旧的 Amplify 项目迁移过来,因为它最终处于不可恢复的状态。它没有正确连接到我们的 Cognito 用户池,因此 aws-exports.js
中没有提供所有需要的信息
我不太清楚为什么它不能用于新项目和新的放大项目,但它现在可以工作了。
我遗漏了 aws_user_pools_id
和 aws_user_pools_web_client_id
字段。提供他们手动解决了问题。
我正在尝试更新我在 2020 年构建的项目,该项目不再有效,但我一直 运行关注这个问题。
[ERROR] 04:09.562 AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
我创建了一个新的 angular (Ionic) 项目,看看我是否可以查明问题所在,但这个问题又出现了。我按照文档设置放大,但我们已经有一个后端,所以我 运行 amplify pull --appId XXXXXX --envName XXXX
得到 aws-exports.js。
- 我已经完成了
npm i aws-amplify @aws-amplify/ui-angular
- 我试过删除 node-modules 和 package-lock.json,然后 运行ning
npm i
- 我已将 aws-exports.js 重命名为 aws-exports.ts 并将其添加到我的 ts-config.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts",
"src/aws-exports.ts"
],
"include": [
"src/**/*.d.ts"
]
}
- 在main.ts中我添加了
import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
Auth.configure(awsmobile); // I've tried both with and without this line
- 我已经按照文档实现了 Authenticator UI 组件。
如有任何信息,我们将不胜感激!我已经通读了关于这个问题的多个话题,none 的建议奏效了。
这是我的 aws-exports.ts 的内容(数据已编辑!)
const awsmobile = {
"aws_project_region": "eu-west-2",
"aws_appsync_graphqlEndpoint": "https://XXXXX.appsync-api.eu-west-2.amazonaws.com/graphql",
"aws_appsync_region": "eu-west-2",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "XXXXX",
"aws_cognito_identity_pool_id": "eu-west-2:XXXXX",
"aws_cognito_region": "eu-west-2",
"oauth": {},
"aws_cognito_username_attributes": [],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [],
"aws_cognito_mfa_types": [],
"aws_cognito_password_protection_settings": {
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [],
"aws_mobile_analytics_app_id": "XXXXX",
"aws_mobile_analytics_app_region": "eu-west-1"
};
export default awsmobile;
编辑:
我还尝试了 运行ning amplify init
并创建了一个新的 Amplify 项目,但问题仍然存在。我做了 运行 amplify push
这是我的 package.json:
{
"name": "XXXX",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@aws-amplify/ui-angular": "^2.0.11",
"@capacitor/app": "1.1.0",
"@capacitor/core": "3.4.0",
"@capacitor/haptics": "1.1.4",
"@capacitor/keyboard": "1.2.1",
"@capacitor/status-bar": "1.0.7",
"@ionic/angular": "^6.0.0",
"aws-amplify": "^4.3.13",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular-eslint/builder": "~13.0.1",
"@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "~13.0.1",
"@angular/compiler": "~13.0.0",
"@angular/compiler-cli": "~13.0.0",
"@angular/language-service": "~13.0.0",
"@capacitor/cli": "3.4.0",
"@ionic/angular-toolkit": "^5.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"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",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
编辑: 正如 Juicy-g 所建议的,我尝试使用
"@aws-amplify/auth": "^4.3.14",
"@aws-amplify/core": "^4.3.14"
和
import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
Auth.configure(awsmobile);
我仍然得到相同的结果。最新版的@aws-amplify/auth好像有内部问题所以匹配了最新版的@aws-amplify/core
事实证明,这是由于我们不得不将我们的项目从旧的 Amplify 项目迁移过来,因为它最终处于不可恢复的状态。它没有正确连接到我们的 Cognito 用户池,因此 aws-exports.js
我不太清楚为什么它不能用于新项目和新的放大项目,但它现在可以工作了。
我遗漏了 aws_user_pools_id
和 aws_user_pools_web_client_id
字段。提供他们手动解决了问题。