Impossible de configurer amazon-cognito-auth-js sur l'application angular 4 avec le fournisseur d'identité SAML

Essayez ceci

​​installez les types pour pouvoir avoir intellisense sur amazon-sdk

npm i @ types / amazon-cognito-auth-js --save-dev

puis changez votre méthode de connexion pour ceci

login() {
   const auth = new CognitoAuth(this.authData);
   console.log("hello");
   auth.userhandler.onSuccess = (result) => {
        alert("Sign in success");       
   };
   auth.userhandler.onFailure = (err) => {
        alert("Error!");
   };
}

Vous pouvez essayer de cette manière ... le code de travail pour moi.

app.component.ts

<button (click)="login()">Login</button>

app.component.html

import { Component, OnInit } from '@angular/core';
import { CognitoAuth } from 'amazon-cognito-auth-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  auth: any;
  constructor() {
    //
  }

  ngOnInit() {
    this.auth = this.initCognitoSDK();
    const curUrl = window.location.href;
    this.auth.parseCognitoWebResponse(curUrl);
  }

  initCognitoSDK() {
    const authData = {
      ClientId: 'xyz',
      AppWebDomain: 'xyz', 
      TokenScopesArray: ['openid'],
      RedirectUriSignIn: 'xyz',
      UserPoolId: 'xyz',
      RedirectUriSignOut: 'xyz',
      IdentityProvider: 'xyz',
      AdvancedSecurityDataCollectionFlag: false
    };

    const auth = new CognitoAuth(authData);

    auth.userhandler = {
      onSuccess: (result) => {
        alert('Sign in success');
        this.showSignedIn(result);
      },
      onFailure: (err) => {
        alert('Sign in failed');
      }
    };
    auth.useCodeGrantFlow();
    return auth;
  }

  login() {
    this.auth.getSession();
  }

  showSignedIn(session) {
    console.log('Session: ', session);
  }
}

Vérifiez vos valeurs authData AppWebDomain , TokenScopesArray et IdentityProvider (consultez mes commentaires ci-dessous):

> npm install browser-sync --save-dev
> ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt

Consultez GitHub pour plus d'informations. À partir de la documentation du point de terminaison AUTHORIZATION , notez que identity_provider peut être:

• Pour la connexion sociale, les valeurs valides sont Facebook, Google et LoginWithAmazon.
• Pour les groupes d'utilisateurs Amazon Cognito, la valeur est COGNITO.
• Pour les autres fournisseurs d'identité, ce serait le nom que vous avez attribué l'IdP dans votre pool d'utilisateurs.

Solution

La solution mentionnée ci-dessous est pour Google Sign-In dans Angular 7.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path:'', component: LoginComponent },
  { path:'home', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In auth-app / src / app / cognito.service.ts

<button (click)="printToken()">Print Token</button>

<button (click)="signOut()">Signout</button>

Dans auth-app / src / app / app.component. html

import { Component, OnInit } from '@angular/core';
import { CognitoService } from '../cognito.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private cognitoService : CognitoService, private router : Router) {
    if(this.router.url.indexOf('?') !== -1) {
      this.router.navigateByUrl(this.router.url.substring(0, this.router.url.indexOf('?')));
    } else {
      this.cognitoService.login();
    }
  }

  ngOnInit() { }

  printToken() {
    alert(this.cognitoService.accessToken);
  }

  signOut() {
    this.cognitoService.signOut();
  }
}

Dans auth-app/src/app/login/login.component.ts

<h1>Login</h1>

<button (click)="loginWithGoogle()">Login with Google</button>

Dans auth-app/src/app/login/login.component.html^

import { Component, OnInit } from '@angular/core';
import { CognitoService } from '../cognito.service';
import { Router } from '@angular/router'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private cognitoService : CognitoService, private router : Router) {
    if(!this.cognitoService.isAuthenticated) {
      console.log("Not authenticated")
    } else {
      console.log("Already authenticated")
      this.router.navigateByUrl(this.router.url + "/home");
    }
   }

  ngOnInit() { }

  loginWithGoogle() {
    this.cognitoService.login();
  }
}

Dans auth-app / src / app / home / home.component.ts

<router-outlet></router-outlet>

Dans auth-app / src / app / home / home. component.html

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CognitoAuth } from 'amazon-cognito-auth-js';

@Injectable(
  {
  providedIn: 'root'
  }
)
export class CognitoService {

  authData: any;
  auth: any;
  session: any;

  constructor(private router : Router) {
    this.getAuthInstance();
  }

  getAuthInstance() {
    this.authData = {
      ClientId: '...',
      AppWebDomain: '...', 
      TokenScopesArray: ['openid', 'email', 'profile'],
      RedirectUriSignIn: 'https://localhost:4200/home',
      UserPoolId: '...',
      RedirectUriSignOut: 'https://localhost:4200',
      AdvancedSecurityDataCollectionFlag: false
    }

    this.auth = new CognitoAuth(this.authData);

    this.auth.userhandler = {
      onSuccess: session => {
        console.log('Signin success');
        this.signedIn(session);
      },
      onFailure: error => {
        console.log('Error: ' + error);
        this.onFailureMethod();
      }
    }

    //alert(this.router.url);
    //this.auth.useCodeGrantFlow();
    this.auth.parseCognitoWebResponse(this.router.url);
  }

  signedIn(session) {
    this.session = session;
  }

  onFailureMethod() {
    this.session = undefined;
  }

  get accessToken() {
    return this.session && this.session.getAccessToken().getJwtToken();
  }

  get isAuthenticated() {
    return this.auth.isUserSignedIn();
  }

  login() {
    this.auth.getSession();
    this.auth.parseCognitoWebResponse(this.router.url);
  }

  signOut() {
    this.auth.signOut();
  }
}

Dans auth-app/src/app/app-routing.module.ts

XXX

Pour exécuter l'application avec HTTPS (car l'URL de rappel doit être HTTPS pour Cognito):

> npm install -g @angular/cli
> ng new auth-app
Angular Routing: Yes
> cd auth-app
> ng g c login
> ng g c home
> ng g s cognito
> npm install --save amazon-cognito-auth-js

Veuillez notez que vous devez configurer l'URL de rappel et de déconnexion suivante dans Cognito. Accédez à la console Cognito -> Votre groupe d'utilisateurs -> Intégration d'application -> Paramètres du client d'application

• URL (s) de rappel: https: // localhost: 4200 / home
• URL (s) de déconnexion: https: // localhost: 4200

Accédez à https: // localhost: 4200

Références:

• https://github.com/aws/ amazon-cognito-auth-js / issues / 13

• https://github.com/aws/amazon-cognito- auth-js

• https://stackoverflow.com/a/53398097/1605917

  li >