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

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

でも、よう分からん！

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

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

僕の環境

OS：Windows10

Angular：7

Node.js：10.8.0

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

Traveler

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

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

Angular7で新規プロジェクトを作りたい！Angularでプロジェクトを作成するのは非常に簡単です！ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します！僕のPC環境OS：Windows10Angular：7 前提前提として、以下がイン...

参考にしたサイト

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

■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」はあなたの環境に合わせてください。

ライブラリを入れる

> 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”]」の設定を行います。これをしないとコンパイル時にエラーが出ます。

■関連記事

Traveler

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

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

エラーがいっぱい出ました。イライラ度マックスです。AngularにAWSのライブラリを入れました。入れた理由は「Angular×Cognito」を試してみたかったからです。ライブラリを入れると、アホみたいにエラーが出ました。今日も無理やり落ち着かせて対処します。■関連記事&...

「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」などのエラーが出る場合は、上記の設定を行ってください。

■関連記事

Traveler

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

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

Angular7で開発中のことです。以下のようなエラーが出ました。「Uncaught ReferenceError: global is not defined」。殺意が芽生えますが、いったん落ち着いて対処法を検討してみました。僕の環境OS：Windows10Angularバージョン：7 Angularプロジ...

「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の処理を実装したい方は何かしら参考になるかと思います！

Travelerを知らないの？

とりあえず見てみろよ

Author：いずみん投稿一覧

中学時代にいじめに遭い、友達を失う経験をする。高校時代は陸上競技に明け暮れ、大学時代はアルバイト三昧の日々を送る。社会人になり、IT企業で業務を行ない資格を取りまくる。そこからWebビジネスに興味を持ち、インターネットビジネスに乗り出す。「旅」「IT」「環境」に関する情報を日々発信中。システムエンジニアとして独立後、現在は転職し、エンジニアとして武者修行中。 ※「Traveler」は月間18,000PV達成！ ※ギランバレー症候群に関する情報を集めています。システムエンジニア／旅人／アフィリエイター