Question

我目前正在尝试使用Angular和AWS构建Web应用程序。我的第一步是使用AWS-Cognito进行工作身份验证。但是我在使用AWS-Cognito SDK时遇到了一些问题。

我已采取以下步骤：

我首先使用此Angular 2快速入门设置我的应用：https://github.com/angular/quickstart，然后运行npm install

我的下一步是使用npm install -g @angular/cli

安装角度CLI

接下来，我通过运行npm install --save amazon-cognito-identity-js

安装了angular-cognito-identity-sdk

安装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
        };

但是当我运行代码时，Iäm给出了以下错误：

TypeError：无法读取未定义
的属性“AuthenticationDetails”

我在这里错过了一步吗？在我的Angular应用程序中实现Cognito SDK的最佳方法是什么？

谢谢！

Answer 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'])
  }

Answer 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

2 个答案: