Angular7でCognito認証を実装したい。
でも、よう分からん！
ということで、様々なサイトを参考に、ログイン処理やAPI処理をAngular7で実装してみました。
僕のプロフィールはこちら
目次
僕の環境
OS：Windows10
Angular：7
Node.js：10.8.0
Angularプロジェクトの新規作成方法は以下を参照してください！
参考にしたサイト
以下のサイトを参考にさせていただきました。
■Angular+Cognitoで作るログインページ
URL：「https://dev.classmethod.jp/cloud/aws/angular-cognito-api-gateway-loginpage/」
Cognitoの設定
参考サイト通りにCognitoの設定を行います。
・ユーザプールの設定
・ユーザの追加
・API GateWayの設定
Angularの設定
参考サイト通りにAngularの設定を行います。
※僕は現時点で最新の「Angular7」で実装しています。
参考ソース
以下に格納しています。以降は参考ソースの簡単な解説をしていきます。
URL：「https://github.com/izumin0401/angular-cognito-api」
※「environment.ts」「pet.service.ts」はあなたの環境に合わせてください。
ライブラリを入れる
|
1 2 |
> npm i --save amazon-cognito-identity-js > npm i --save aws-sdk |
npmコマンドで以下のライブラリをインストールします。
・amazon-cognito-identity-js
・aws-sdk
「tsconfig.app.json」の設定
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": ["node"] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } |
tsconfig.app.jsonに「“types”: [“node”]」の設定を行います。これをしないとコンパイル時にエラーが出ます。
「polyfills.ts」の設定
|
1 2 3 4 5 |
// "global is not defined"の対応 (window as any).global = window; // "Buffer is not defined"の対応 global.Buffer = global.Buffer || require('buffer').Buffer; |
コンパイル時に「global is not defined」などのエラーが出る場合は、上記の設定を行ってください。
「environment.ts」の設定
|
1 2 3 4 5 6 |
export const environment = { production: false, region: 'ap-northeast-1', userPoolId: 'ap-northeast-1_XXXXX', clientId: 'XXXXXXXXXXXXXXXXXXXX' }; |
AWSのリージョン・ユーザプールID・クライアントIDを設定します。
「app.module.ts」の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { CognitoService } from './service/cognito.service'; import { PetService } from './service/pet.service'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { PetlistComponent } from './petlist/petlist.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { NoopInterceptor } from './service/pet.service'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, LoginComponent, PetlistComponent, DashboardComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule ], providers: [{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true, }, CognitoService, PetService], bootstrap: [AppComponent] }) export class AppModule { } |
「app-routing.module.ts」の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; import { PetlistComponent } from './petlist/petlist.component'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'petlist', component: PetlistComponent }, { path: 'login', component: LoginComponent, pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
「cognito.service.ts」の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { Injectable } from '@angular/core'; import { environment } from './../../environments/environment'; import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js'; import * as AWS from 'aws-sdk'; @Injectable() export class CognitoService { private userPool: CognitoUserPool; private poolData: any; public cognitoCreds: AWS.CognitoIdentityCredentials; private token: string; constructor() { AWS.config.region = environment.region; this.poolData = { UserPoolId: environment.userPoolId, ClientId: environment.clientId }; this.userPool = new CognitoUserPool(this.poolData); } // ログイン処理 login(username: string, password: string): Promise<any> { const userData = { Username: username, Pool: this.userPool, Storage: localStorage }; const cognitoUser = new CognitoUser(userData); const authenticationData = { Username: username, Password: password, }; const authenticationDetails = new AuthenticationDetails(authenticationData); return new Promise((resolve, reject) => { cognitoUser.authenticateUser(authenticationDetails, { onSuccess: function (result) { alert('LogIn is success!'); console.log('id token + ' + result.getIdToken().getJwtToken()); console.log('access token + ' + result.getAccessToken().getJwtToken()); console.log('refresh token + ' + result.getRefreshToken().getToken()); resolve(result); }, onFailure: function (err) { alert(err); console.log(err); reject(err); } }); }); } // ログイン済確認処理 isAuthenticated(): Promise<any> { const cognitoUser = this.userPool.getCurrentUser(); return new Promise((resolve, reject) => { if (cognitoUser === null) { reject(cognitoUser); } cognitoUser.getSession((err, session) => { if (err) { reject(err); } else { if (!session.isValid()) { reject(session); } else { resolve(session); } } }); }); } // トークン取得処理 getCurrentUserIdToken(): any { const cognitoUser = this.userPool.getCurrentUser(); if (cognitoUser != null) { cognitoUser.getSession((err, session) => { if (err) { alert(err); return; } else { this.token = session.getIdToken().getJwtToken(); } }); } return this.token; } // ログイン処理 logout() { console.log('LogOut!'); const currentUser = this.userPool.getCurrentUser(); if (currentUser) { currentUser.signOut(); } } } |
「pet.service.ts」の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; import { Observable } from 'rxjs'; import { catchError, map, tap } from 'rxjs/operators'; import { Pet } from '../pet'; import { CognitoService } from './cognito.service'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; @Injectable() export class PetService { private Url = 'https://XXXXX.execute-api.ap-northeast-1.amazonaws.com/test/pets'; // URL to web api constructor( private http: HttpClient, private cognito: CognitoService) { } /** GET pets from the server */ getPets(): Observable<Pet[]> { return this.http.get<Pet[]>(this.Url); } } @Injectable() export class NoopInterceptor implements HttpInterceptor { constructor(private cognito: CognitoService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // サービスから認証ヘッダーを取得します。 const authHeader = this.cognito.getCurrentUserIdToken(); // 新しいヘッダーを加えたリクエストを複製します。 const authReq = req.clone({ headers: req.headers.set('Authorization', authHeader) }); // オリジナルのリクエストの代わりに複製したリクエストを投げます。 return next.handle(authReq); } } |
おすすめ本
Angularの勉強をするならこの2冊がおすすめです！
まとめ
今回は、「Angular7×Cognito」の処理を実装してみました。
Angular7で実装されているものが少ないので、ネットの情報通りに実装してもうまくいかないことが多々あります。
Angular7でCognitoの処理を実装したい方は何かしら参考になるかと思います！
