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

CognitoIdentityServiceProvideraws-sdk 的一部分,而不是 amazon-cognito-identity-js 库的一部分。

【讨论】:

有什么建议可以捕获令牌到期并刷新它吗?

以上是关于在 Angular 2 中实现 AWS-Cognito的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2:将 *ngFor 增加 2 或在分页中实现两个分页

在 Angular 中实现 OAuth 2.0 授权代码授予

如何使用 Rx 在 Angular 2 中实现可拖动的 div

在 Angular 2、4、5、6 中实现插件架构/插件系统/可插拔框架

如何在angular js中实现多路由

使用 @ngtools/webpack 在 Angular 11 + Webpack 4 中实现 AOT