无法使用SAML身份提供程序将Amazon-Cognito-Auth-JS配置为angular 4应用程序

Question

我正在尝试将SAML Service provider与AWS cognito pool集成。我浏览了许多文档并尝试实现。但是，当我单击登录时，重定向没有发生。[方案是应该重定向到Microsoft登录页面]  Cognito池和身份提供程序已正确配置。 问题出在我需要从前端应用程序进行身份验证时 谁能帮我纠正一下..？ 这是我的代码

  

步骤1：

npm install amazon-cognito-auth-js --save

  

步骤2：在angularcli.json中添加以下行

"../node_modules/amazon-cognito-auth-js/dist/amazon-cognito-auth.js",
"../node_modules/amazon-cognito-auth-js/dist/amazon-cognito-auth.min.js.map",
"../node_modules/amazon-cognito-auth-js/dist/aws-cognito-sdk.js"

  

step3：app.component.ts

import {CognitoAuth} from 'amazon-cognito-auth-js';

  

第4步：

authData = {
    ClientId : '2*********************u',
    AppWebDomain : 'https://myApplication***********.com',
    TokenScopesArray : ['email'], 
    RedirectUriSignIn : 'https//google.com',
    RedirectUriSignOut : 'https//google.com',
    IdentityProvider : 'SAML', // e.g. 'Facebook',
    UserPoolId : 'ap-south-1_****' // Your user pool id here
};

  

步骤5：在app.html中

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

  

第6步：

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

我的问题在我单击登录按钮时出现，页面未重定向。请帮助我

Answer 1

您可以通过这种方式尝试...为我工作的代码。

app.component.ts

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

app.component.html

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

Answer 2

检查您的AppWebDomain，TokenScopesArray和IdentityProvider authData值（请在下面检查我的评论）：

authData = {
    ClientId : '2*********************u',
    AppWebDomain : 'https://myApplication***********.com', // this should be from Cognito Console -> Your user pool -> App Integration -> Domain Name
    TokenScopesArray : ['email'], // this should be from Cognito Console -> Your user pool -> App Integration -> App Client Settings -> Allowed OAuth Scopes  
    RedirectUriSignIn : 'https//google.com',
    RedirectUriSignOut : 'https//google.com',
    IdentityProvider : 'SAML', // e.g. 'Facebook', // this should be from Cognito Console -> Your user pool -> Federation -> Identity Providers -> SAML -> Provider Name
    UserPoolId : 'ap-south-1_****' // Your user pool id here
};

选中GitHub以获取更多参考。在AUTHORIZATION端点文档中，请注意identity_provider可以是：

• 对于社交登录，有效值为Facebook，Google和 LoginWithAmazon。
• 对于Amazon Cognito用户池，该值为COGNITO。
• 对于其他身份提供者，这将是您分配给的名称 用户池中的IdP。

---

解决方案

以下解决方案适用于Angular 7中的Google登录。

> 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

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

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

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

<router-outlet></router-outlet>

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

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

在 auth-app / src / app / login / login.component.html

<h1>Login</h1>

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

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

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

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

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

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

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

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

要使用 HTTPS 运行应用程序（因为回调URL应该是Cognito的HTTPS）：

> 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

请注意，您应该在Cognito中配置以下回调和注销URL。转到Cognito控制台->您的用户池->应用集成->应用客户端设置

• 回调URL：https://localhost:4200/home
• 退出URL：https://localhost:4200

转到https://localhost:4200

参考文献：

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

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

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

Answer 3

尝试一下

安装类型，以便可能对amazon-sdk具有智能提示

  

npm i @ types / amazon-cognito-auth-js-保存开发

然后将您的登录方法更改为此

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