1

我正在尝试将 SAML 服务提供商与 AWS cognito 池集成。我浏览了很多文档并尝试实施。但是当我单击登录时没有发生重定向。[场景是否应该重定向到 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"

第三步: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!");
    }
};

当我点击登录按钮页面没有重定向时,我的问题就来了。请帮助我

4

3 回答 3

3

检查您的AppWebDomain,TokenScopesArrayIdentityProviderauthData 值(查看我下面的评论):

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运行应用程序(因为 Cognito 的回调 URL 应该是 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 控制台 -> 您的用户池 -> 应用集成 -> 应用客户端设置

转到https://localhost:4200

参考:

于 2019-01-30T14:41:05.537 回答
0

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

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>
于 2019-01-24T12:16:50.023 回答
0

尝试这个

安装类型,以便对 amazon-sdk 进行智能感知

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

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

login() {
   const auth = new CognitoAuth(this.authData);
   console.log("hello");
   auth.userhandler.onSuccess = (result) => {
        alert("Sign in success");       
   };
   auth.userhandler.onFailure = (err) => {
        alert("Error!");
   };
}
于 2019-01-11T02:37:17.923 回答