Implementierung von AWS-Cognito in Angular 2

Question

Ich versuche derzeit, mit Angular und AWS Webanwendungen zu erstellen. Mein erster Schritt ist eine funktionierende Authentifizierung mit AWS-Cognito. Aber ich habe einige Probleme mit dem AWS-Cognito SDK bekommen.

ich die folgenden Schritte unternommen haben:

Ich begann dieses Angular 2 quickstart mit meiner App einzurichten: https://github.com/angular/quickstart und lief dann npm install

Mein nächster Schritt mit npm install -g @angular/cli

Winkel CLI zu installieren war

Next I Winkel cognito-Identität-sdk durch Ausführen installiert: npm install --save amazon-cognito-identity-js

Nachdem das SDK installiert wurde ich das sdk erforderlich i nto meine Komponente:

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

Aber wenn ich den Code Iam der folgende Fehler gegeben laufen:

TypeError: Cannot read property 'AuthenticationDetails' of undefined

Bin ich fehlt ein Schritt hier? Was ist der beste Weg, um das Cognito SDK in meiner Angular App zu implementieren?

Vielen Dank!

Answer 1

Entfernen Sie die CognitoIdentityServiceProvider. Zum Beispiel:

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

Die CognitoIdentityServiceProvider ist Teil des aws-sdk, nicht die amazon-cognito-Identität-js Bibliothek.

Answer 2

Sie sollten das gesamte Paket als

import * as AWSCognito from 'amazon-cognito-identity-js'; 

dies ist keine gute Idee nicht importieren, wie Sie darin nicht ein Bündel von aufblasen müssen.

Stattdessen nur importieren, was Sie brauchen. Siehe mein Beispiel unten.

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