检查您的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运行应用程序(因为 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
参考: