在Angular 2中实现AWS-Cognito

Question

我目前正在尝试使用Angular和AWS构建webapps。我的第一步是使用AWS-Cognito进行工作认证。但是我遇到了一些关于隐藏和使用AWS-Cognito SDK的问题。

我采取了以下措施：

我开始使用此角2快速入门设置我的应用程序：https://github.com/angular/quickstart然后跑到npm install

我的下一个步骤是安装角度CLI与npm install -g @angular/cli

接下来，我通过运行安装角cognito身份-SDK：npm install --save amazon-cognito-identity-js

后，将SDK被安装我所需的SDK我n要我的组件：

​​

但是当我运行提示以下错误代码IAM：

TypeError: Cannot read property 'AuthenticationDetails' of undefined

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

谢谢！

Answer 1

删除CognitoIdentityServiceProvider。例如：

import * as AWSCognito from 'amaon-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，不亚马逊-cognito身份-JS库的一部分。

Answer 2

你不应该导入整个包作为

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