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