Angular7×Cognitoでログイン・API処理を実装！ │ 泉浩兵ブログ

Angular7でCognito認証を実装したい。

でも、よう分からん！

ということで、様々なサイトを参考に、ログイン処理やAPI処理をAngular7で実装してみました。

僕のプロフィールはこちら

1. 僕の環境
2. 参考にしたサイト
3. Cognitoの設定
4. Angularの設定
5. おすすめ本
6. まとめ

僕の環境

OS：Windows10

Angular：7

Node.js：10.8.0

Angularプロジェクトの新規作成方法は以下を参照してください！

泉浩兵ブログ

超簡単！Angular7で新規プロジェクトを作成する方法！

https://traveler0401.com/angular-new-project/

Angular7で新規プロジェクトを作りたい！Angularでプロジェクトを作成するのは非常に簡単です！ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します！僕のプロフィールはこちら僕のPC環境OS：Windows10Angular：7 前提前提として、以下がインストールされている必要があります。・nodist(任意)・Node.js上記は、chocolateyでインストールすると非常に楽ですよ！ Angular7で新規プロジェクトを作成する方法npm install -g @angular/cliAngularをグローバルにイン...

参考にしたサイト

以下のサイトを参考にさせていただきました。

■Angular+Cognitoで作るログインページ

URL：「https://dev.classmethod.jp/cloud/aws/angular-cognito-api-gateway-loginpage/」

Cognitoの設定

参考サイト通りにCognitoの設定を行います。

・ユーザプールの設定

・ユーザの追加

・API GateWayの設定

■関連記事

泉浩兵ブログ

Cognitoのセッションタイムアウト！トークンを整理する！

https://traveler0401.com/aws-cognito-token/

Cognitoのセッションタイムアウトってどうなっているんでしょうか？現在、「Angular×Cognito」で開発をしているのですが、どのアプリでもログイン画面ってありますよね？このログイン画面の認証にCognitoを使っているのですが、当然セッションタイムアウトとかも考える必要があるわけです。そこら辺の詳しいことが分からなかったので、ちょっくら調べてみました。■「Angular×Cognito」についてはこちら僕のプロフィールはこちら Cognito認証の概要まず、Cognitoでユーザ認証を行うと、CognitoからJWT(Json Web Token)...

Angularの設定

参考サイト通りにAngularの設定を行います。

※僕は現時点で最新の「Angular7」で実装しています。

参考ソース

以下に格納しています。以降は参考ソースの簡単な解説をしていきます。

URL：「https://github.com/izumin0401/angular-cognito-api」

※「environment.ts」「pet.service.ts」はあなたの環境に合わせてください。

ライブラリを入れる

> npm i --save amazon-cognito-identity-js
> npm i --save aws-sdk

1 2	> npm i --save amazon-cognito-identity-js > npm i --save aws-sdk

npmコマンドで以下のライブラリをインストールします。

・amazon-cognito-identity-js

・aws-sdk

「tsconfig.app.json」の設定

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"types": ["node"]

"exclude": [

"test.ts",

"**/*.spec.ts"

]

}

tsconfig.app.jsonに「“types”: [“node”]」の設定を行います。これをしないとコンパイル時にエラーが出ます。

■関連記事

泉浩兵ブログ

AngularにAWSライブラリを入れたら超エラー出ちゃったよw

https://traveler0401.com/angular-aws-error/

エラーがいっぱい出ました。イライラ度マックスです。AngularにAWSのライブラリを入れました。入れた理由は「Angular×Cognito」を試してみたかったからです。ライブラリを入れると、アホみたいにエラーが出ました。今日も無理やり落ち着かせて対処します。■関連記事実際に出たエラー実際に出たエラーです。ERROR in node_modules/aws-sdk/clients/acm.d.ts(133,37): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitionsfor node? Try `npm i @types/node`.node_modules/aws-sdk/...

「polyfills.ts」の設定

// "global is not defined"の対応
(window as any).global = window;

// "Buffer is not defined"の対応
global.Buffer = global.Buffer || require('buffer').Buffer;

// "global is not defined"の対応

(window as any).global = window;

// "Buffer is not defined"の対応

global.Buffer = global.Buffer || require('buffer').Buffer;

コンパイル時に「global is not defined」などのエラーが出る場合は、上記の設定を行ってください。

■関連記事

泉浩兵ブログ

Angularの「global is not defined」エラー対処法！

https://traveler0401.com/angular-global-is-not-defined/

Angular7で開発中のことです。以下のようなエラーが出ました。「Uncaught ReferenceError: global is not defined」。殺意が芽生えますが、いったん落ち着いて対処法を検討してみました。僕のプロフィールはこちら僕の環境OS：Windows10Angularバージョン：7 Angularプロジェクトの新規作成方法は以下を参照してください！「Uncaught ReferenceError: global is not defined」エラーとは？僕の場合だと、「Angular×Cognito」の処理を実装するために、以下に記載のライブラリを入れておかしくなりま...

「environment.ts」の設定

export const environment = {
  production: false,
  region: 'ap-northeast-1',
  userPoolId: 'ap-northeast-1_XXXXX',
  clientId: 'XXXXXXXXXXXXXXXXXXXX'
};

export const environment = {

production: false,

region: 'ap-northeast-1',

userPoolId: 'ap-northeast-1_XXXXX',

clientId: 'XXXXXXXXXXXXXXXXXXXX'

};

AWSのリージョン・ユーザプールID・クライアントIDを設定します。

「app.module.ts」の設定

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

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」の設定

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

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」の設定

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

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

}

// ログイン処理

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」の設定

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

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

}

まとめ

今回は、「Angular7×Cognito」の処理を実装してみました。

Angular7で実装されているものが少ないので、ネットの情報通りに実装してもうまくいかないことが多々あります。

Angular7でCognitoの処理を実装したい方は何かしら参考になるかと思います！

Angular7×Cognitoでログイン・API処理を実装！

僕の環境

参考にしたサイト

Cognitoの設定

Angularの設定

参考ソース

ライブラリを入れる

「tsconfig.app.json」の設定

「polyfills.ts」の設定

「environment.ts」の設定

「app.module.ts」の設定

「app-routing.module.ts」の設定

「cognito.service.ts」の設定

「pet.service.ts」の設定

おすすめ本

まとめ