API GatewayのIAM認証をTypeScriptで通過する方法！※Angular編

ngOnInit() {
    this.hoge();
  }
​
  private async hoge() {
    const header = await this.apigSigV4Service.makeRequest('GET', '/test/', undefined, undefined, undefined);
    this.get(header);
  }
​
  private get(header: any) {
    this.httpService.get<any>(
      'https://*****.execute-api.ap-northeast-1.amazonaws.com/test/'
      , { headers: new HttpHeaders(header) }
    ).subscribe(
      (response: any) => {
        console.log(response);
      },
      (error: HttpErrorResponse) => {
      }
    );
  }

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class HttpService {
 
  constructor(
    private http: HttpClient,
  ) { }
 
  /**
   * getメソッドを呼び出す
   *
   * @param url URL
   * @return 同期処理
   */
  public get<T>(url: string): Observable<T> {
    return this.http.get<T>(url);
  }
}

import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk';
​
/**
 * API Gateway署名バージョン4サービス
 *
 * NOTE:
 *   変数名・関数名はAPI Gatewayから出力されるSDKと合わせる
 *
 * @author K.Izumi
 */
@Injectable()
export class ApigSigV4Service {
​
  /**
   * クリプトJS
   */
  private CryptoJS = require('crypto-js');
​
  /**
   * サービス名
   * ※API Gatewayの場合は下記で固定
   */
  private SERVICE = 'execute-api';
​
  /**
   * ホスト名
   */
  private HOST = '*****.execute-api.ap-northeast-1.amazonaws.com';
​
  /**
   * リージョン
   */
  private REGION = 'ap-northeast-1';
​
  /**
   * AWS4リクエスト
   */
  private AWS4_REQUEST = 'aws4_request';
​
  /**
   * ハッシュアルゴリズム
   */
  private AWS_SHA_256 = 'AWS4-HMAC-SHA256';
​
  /**
   * AWS4
   */
  private AWS4 = 'AWS4';
​
  /**
   * デフォルトコンテンツタイプ
   */
  private DEFAULT_CONTENT_TYPE = 'application/json';
​
  /**
   * ヘッダキー
   */
  private headerKey = {
    accept:            'Accept',
    authorization:     'Authorization',
    contentType:       'Content-Type',
    host:              'host',
    xAmzDate:          'x-amz-date',
    xAmzSecurityToken: 'x-amz-security-token',
  };
​
  /**
   * 現在時刻を取得する
   *
   * @return 現在時刻
   */
  private datetimeFor(): string {
    return new Date().toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/[:\-]|\.\d{3}/g, '');
  }
​
  /**
   * URIをエンコードする
   *
   * @param  str クエリ文字列
   * @return URI(エンコード後)
   */
  private fixedEncodeURIComponent (str: string): string {
    return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
      return '%' + c.charCodeAt(0).toString(16).toUpperCase();
    });
  }
​
  /**
   * メッセージダイジェストを生成する(SHA-256)
   *
   * @param  value 任意の値
   * @return メッセージダイジェスト
   */
  private hash(value) {
    return this.CryptoJS.SHA256(value);
  }
​
  /**
   * ダイジェストのBase16エンコードを小文字で返す
   *
   * @param  value 任意の値
   * @return ダイジェストのBase16エンコード(小文字)
   */
  private hexEncode(value) {
    return value.toString(this.CryptoJS.enc.Hex);
  }
​
  /**
   * メッセージ認証コード化
   *
   * @param  secret シークレットキー
   * @param  value  値
   * @return メッセージ認証コード化後の値
   */
  private hmac(secret: string, value: string) {
    return this.CryptoJS.HmacSHA256(value, secret, {asBytes: true});
  }
​
  /**
   * 正規URI生成
   *
   * @param  uri URI ※HTTPホストヘッダーからクエリ文字列パラメータ(存在する場合)を開始する疑問符("?")までのすべて
   * @return 正規URI
   */
  private buildCanonicalUri(uri: string): string {
    return encodeURI(uri);
  }
​
  /**
   * 正規クエリ文字列生成
   *
   * @param  queryParams クエリパラメータ
   * @return 正規クエリ文字列
   */
  private buildCanonicalQueryString(queryParams: object): string {
    if (Object.keys(queryParams).length < 1) {
        return '';
    }
​
    const sortedQueryParams = [];
    for (const property in queryParams) {
        if (queryParams.hasOwnProperty(property)) {
            sortedQueryParams.push(property);
        }
    }
    sortedQueryParams.sort();
​
    let canonicalQueryString = '';
    for (let i = 0; i < sortedQueryParams.length; i++) {
        canonicalQueryString += sortedQueryParams[i] + '=' + this.fixedEncodeURIComponent(queryParams[sortedQueryParams[i]]) + '&';
    }
    return canonicalQueryString.substr(0, canonicalQueryString.length - 1);
  }
​
  /**
   * 正規ヘッダ生成
   *
   * @param  headers ヘッダ
   * @return 正規ヘッダ
   */
  private buildCanonicalHeaders(headers: object): string {
    let   canonicalHeaders = '';
    const sortedKeys       = [];
    for (const property in headers) {
        if (headers.hasOwnProperty(property)) {
            sortedKeys.push(property);
        }
    }
    sortedKeys.sort();
​
    for (let i = 0; i < sortedKeys.length; i++) {
        canonicalHeaders += sortedKeys[i].toLowerCase() + ':' + headers[sortedKeys[i]] + '\n';
    }
    return canonicalHeaders;
  }
​
  /**
   * 署名付きヘッダ生成
   *
   * @param  headers ヘッダ
   * @return 署名付きヘッダー
   */
  private buildCanonicalSignedHeaders(headers: object): string {
    const sortedKeys = [];
    for (const property in headers) {
        if (headers.hasOwnProperty(property)) {
            sortedKeys.push(property.toLowerCase());
        }
    }
    sortedKeys.sort();
​
    return sortedKeys.join(';');
  }
​
  /**
   * 正規リクエスト生成
   *
   * @param  method      HTTPメソッド ※大文字
   * @param  path        パス
   * @param  queryParams クエリパラメータ
   * @param  headers     ヘッダ
   * @param  payload     ペイロード
   * @return 正規リクエスト
   */
  private buildCanonicalRequest(method: string, path: string, queryParams: object, headers: object, payload: object|string): string {
    return method + '\n' +
           this.buildCanonicalUri(path) + '\n' +
           this.buildCanonicalQueryString(queryParams) + '\n' +
           this.buildCanonicalHeaders(headers) + '\n' +
           this.buildCanonicalSignedHeaders(headers) + '\n' +
           this.hexEncode(this.hash(payload));
  }
​
  /**
   * 認証情報スコープ作成
   *
   * @param  datetime 現在時刻
   * @return 認証情報スコープ
   */
  private buildCredentialScope(datetime: string): string {
    return datetime.substr(0, 8) + '/' + this.REGION + '/' + this.SERVICE + '/' + this.AWS4_REQUEST;
  }
​
  /**
   * 署名文字列作成
   *
   * @param  datetime               現在時刻
   * @param  credentialScope        認証情報スコープ
   * @param  hashedCanonicalRequest 正規リクエスト(ハッシュ化後)
   * @return 署名文字列
   */
  private buildStringToSign(datetime: string, credentialScope: string, hashedCanonicalRequest: string): string {
    return this.AWS_SHA_256 + '\n' +
           datetime + '\n' +
           credentialScope + '\n' +
           hashedCanonicalRequest;
  }
​
  /**
   * 署名キー取得
   *
   * @param  secretKey シークレットキー
   * @param  datetime  現在日付
   * @return 署名キー
   */
  private calculateSigningKey(secretKey: string, datetime: string): string {
    return this.hmac(
             this.hmac(
               this.hmac(
                 this.hmac(
                   this.AWS4 + secretKey,
                   datetime.substr(0, 8)
                 ),
                 this.REGION
               ),
               this.SERVICE
             ),
             this.AWS4_REQUEST
           );
  }
​
  /**
   * 署名計算
   *
   * @param  key          キー
   * @param  stringToSign 署名文字列
   * @return 署名
   */
  private calculateSignature(key: string, stringToSign: string) {
    return this.hexEncode(this.hmac(key, stringToSign));
  }
​
  /**
   * Authorizationヘッダ署名情報取得
   *
   * @param accessKey       アクセスキー
   * @param credentialScope 認証情報スコープ
   * @param headers         ヘッダ
   * @param signature       署名
   */
  private buildAuthorizationHeader(accessKey: string, credentialScope: string, headers: object, signature): string {
    return this.AWS_SHA_256 +
           ' Credential=' + accessKey + '/' + credentialScope +
           ', SignedHeaders=' + this.buildCanonicalSignedHeaders(headers) +
           ', Signature=' + signature;
  }
​
  /**
   * 署名バージョン4を作成する
   *
   * NOTE:
   *   署名に関するエラーはAPI実行時にしか分からないため、API実行側でエラーハンドリングする
   *
   *   トラブルシューティングは以下
   *   https://docs.aws.amazon.com/ja_jp/general/latest/gr/signature-v4-troubleshooting.html
   *
   * @param  method      HTTPメソッド ※大文字
   * @param  path        パス
   * @param  queryParams クエリパラメータ
   * @param  headers     ヘッダ
   * @param  body        ボディ
   * @return 署名バージョン4
   * @link   https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4_signing.html
   */
  public makeRequest(method: string, path: string, queryParams: object, headers: object, body: object|string) {
    return new Promise((resolve) => {
​
      /**
       * 初期処理
       */
      const datetime = this.datetimeFor();
​
      if (body === undefined || body === '' || body === null || Object.keys(body).length === 0) {
        body = undefined;
      }
​
      if (queryParams === undefined) {
        queryParams = {};
      }
​
      if (headers === undefined) {
        headers = {};
      }
​
      if (headers[this.headerKey.contentType] === undefined) {
        headers[this.headerKey.contentType] = this.DEFAULT_CONTENT_TYPE;
      }
​
      if (headers[this.headerKey.accept] === undefined) {
        headers[this.headerKey.accept] = this.DEFAULT_CONTENT_TYPE;
      }
​
      if (body === undefined || method === 'GET') {
          body = '';
      }  else {
          body = JSON.stringify(body);
      }
​
      // ボディがない場合、ヘッダからコンテンツタイプを削除し、署名バージョン4の計算に含まれないようにする
      if (body === '' || body === undefined || body === null) {
        delete headers[this.headerKey.contentType];
      }
​
      headers[this.headerKey.xAmzDate] = datetime;
      headers[this.headerKey.host]     = this.HOST;
​
      /**
       * タスク1：署名バージョン4の正規リクエストを作成する
       *
       * @link https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4-create-canonical-request.html
       */
      const canonicalRequest       = this.buildCanonicalRequest(method, path, queryParams, headers, body);
      const hashedCanonicalRequest = this.CryptoJS.SHA256(canonicalRequest).toString(this.CryptoJS.enc.Hex);
​
      /**
       * タスク2：署名バージョン4の署名文字列を作成する
       *
       * @link https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4-create-string-to-sign.html
       */
      const credentialScope = this.buildCredentialScope(datetime);
      const stringToSign    = this.buildStringToSign(datetime, credentialScope, hashedCanonicalRequest);
​
      /**
       * Cognito IDプールから一時認証情報(STS)を取得する
       */
      AWS.config.region = this.REGION;
      AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        // TODO: environmentに記載
          IdentityPoolId: 'ap-northeast-1:*****'
      });
      (<AWS.CognitoIdentityCredentials>AWS.config.credentials).get(() => {
        const accessKeyId     = AWS.config.credentials.accessKeyId;
        const secretAccessKey = AWS.config.credentials.secretAccessKey;
        const sessionToken    = AWS.config.credentials.sessionToken;
​
        /**
         * タスク3: AWS署名バージョン4の署名を計算する
         *
         * @link https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4-calculate-signature.html
         */
        const signingKey = this.calculateSigningKey(secretAccessKey, datetime);
        const signature  = this.calculateSignature(signingKey, stringToSign);
​
        /**
         * タスク4: HTTPリクエストに署名を追加する
         *
         * @link https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4-add-signature-to-request.html
         */
        headers[this.headerKey.authorization] = this.buildAuthorizationHeader(accessKeyId, credentialScope, headers, signature);
​
        /**
         * ヘッダ生成処理
         */
        headers[this.headerKey.xAmzSecurityToken] = sessionToken;
        delete headers[this.headerKey.host];
​
        // コンテンツタイプが指定されていない場合、再アタッチする必要あり
        if (headers[this.headerKey.contentType] === undefined) {
          headers[this.headerKey.contentType] = this.DEFAULT_CONTENT_TYPE;
        }
​
        resolve(headers);
      });
    });
  }
​
}