在 Angular 2 中实现 AWS-Cognito
Posted
技术标签:
【中文标题】在 Angular 2 中实现 AWS-Cognito【英文标题】:Implementing AWS-Cognito in Angular 2 【发布时间】:2017-10-12 07:28:07 【问题描述】:我目前正在尝试使用 Angular 和 AWS 构建 webapps。我的第一步是使用 AWS-Cognito 进行有效的身份验证。但是我在导入和使用 AWS-Cognito SDK 时遇到了一些问题。
我已采取以下步骤:
我首先使用这个 Angular 2 快速入门来设置我的应用程序:https://github.com/angular/quickstart,然后运行 npm install
我的下一步是使用 npm install -g @angular/cli
安装 angular CLI
接下来我通过运行安装了 angular-cognito-identity-sdk:npm install --save amazon-cognito-identity-js
安装 SDK 后,我需要将 sdk 放入我的组件中:
console.log(AmazonCognitoIdentity);
var authenticationData =
Username : 'username',
Password : 'password',
;
var authenticationDetails = new AmazonCognitoIdentity.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
var poolData =
UserPoolId : 'pool_id', // Your user pool id here
ClientId : 'client_id' // Your client id here
;
var userPool = new AmazonCognitoIdentity.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var userData =
Username : 'username',
Pool : userPool
;
但是当我运行代码时,我得到了以下错误:
TypeError: 无法读取未定义的属性“AuthenticationDetails”
我在这里错过了一步吗?在我的 Angular 应用中实现 Cognito SDK 的最佳方式是什么?
谢谢!
【问题讨论】:
【参考方案1】:您不应该将整个包导入为
import * as AWSCognito from 'amazon-cognito-identity-js';
这是个坏主意,因为你不需要在里面放一堆臃肿的东西。
而是只导入您需要的内容。请参阅下面的示例。
import AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool from 'amazon-cognito-identity-js';
const PoolData =
UserPoolId: 'us-east-1-xxxxx',
ClientId: 'xxxxxxxxxxx'
;
const userPool = new CognitoUserPool(PoolData);
/////in export class....
/// Sign Up User
signupUser(user: string, password: string, email: string)
const dataEmail =
Name: 'email',
Value: email
;
const emailAtt = [new CognitoUserAttribute(dataEmail)];
userPool.signUp(user, password, emailAtt, null, ((err, result) =>
if (err)
console.log('There was an error ', err);
else
console.log('You have successfully signed up, please confirm your email ')
))
/// Confirm User
confirmUser(username: string, code: string)
const userData =
Username: username,
Pool: userPool
;
const cognitoUser = new CognitoUser(userData);
cognitoUser.confirmRegistration(code, true, (err, result) =>
if (err)
console.log('There was an error -> ', err)
else
console.log('You have been confirmed ')
)
//// Sign in User
signinUser(username: string, password: string)
const authData =
Username: username,
Password: password
;
const authDetails = new AuthenticationDetails(authData);
const userData =
Username: username,
Pool: userPool
;
const cognitoUser = new CognitoUser(userData);
cognitoUser.authenticateUser(authDetails,
onSuccess: (result) =>
// console.log('You are now Logged in');
this.isUser.next(true);
this.router.navigate(['/'])
,
onFailure: (err) =>
console.log('There was an error during login, please try again -> ', err)
)
/// Log User Out
logoutUser()
userPool.getCurrentUser().signOut();
this.router.navigate(['home'])
【讨论】:
【参考方案2】:删除CognitoIdentityServiceProvider
。例如:
import * as AWSCognito from 'amazon-cognito-identity-js';
// Later on
const userPool = new AWSCognito.CognitoUserPool(awsCognitoSettings);
const authDetails = new AWSCognito.AuthenticationDetails(
Username: this.state.username,
Password: this.state.password
);
const cognitoUser = new AWSCognito.CognitoUser(
Username: this.state.username,
Pool: userPool
);
cognitoUser.authenticateUser(authDetails,
onSuccess: (result) =>
console.log(`access token = $result.getAccessToken().getJwtToken()`);
,
onFailure: (err) =>
alert(err);
);
CognitoIdentityServiceProvider
是 aws-sdk
的一部分,而不是 amazon-cognito-identity-js
库的一部分。
【讨论】:
有什么建议可以捕获令牌到期并刷新它吗?以上是关于在 Angular 2 中实现 AWS-Cognito的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2:将 *ngFor 增加 2 或在分页中实现两个分页
在 Angular 中实现 OAuth 2.0 授权代码授予
如何使用 Rx 在 Angular 2 中实现可拖动的 div