Developers.ioの記事を読んでやってみる「AWS Cogito + API Gateway」

対象

• Amazon Cognito と仲良くなるために歴史と機能を整理したし、 Cognito User Pools と API Gateway の連携も試した

やってみる

前提

• 機能を理解するのが目的なので、terraformは使わずにAWSコンソールからポチポチ
• ローカル環境はMac

Angular SPA でログインし、API Gateway を呼び出す

手順

• 認可不要の API を定義し、SPAからデータを取得してみる
• Cognito User Pools を作成し、新しいユーザーを用意する
• Cognito User Pools から払い出された IDトークンが必要になるよう API Gateway に制限をかける
• SPA にサインイン機能を追加する
• SPA から制限付きAPIをコールする

準備

ローカル環境でもSPA(Single Page Application)を検証できるようにする

• AngularのSPAをローカルでサクッと確認するにはangular-http-serverが便利
• npmをインストール

$ brew install npm

• angular-http-serverをインストール(グローバルインストールしたら ng new でプロジェクト作れなかったのでグローバルインストールはしなかった)

$ npm install angular-http-server

• Angular CLIインストール

$ npm install -g @angular/cli

• Anglura CLIバージョン確認

$ ng -v

• 存在感がすごい

➜  spa ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 9.11.1
OS: darwin x64
Angular:
...
- プロジェクト作成

$ ng new cognitotest

- プロジェクトをbuild

$ cd cognitotest $ ng build

- HTTPサーバ起動

$ cd dist $ angular-http-server

- `http://localhost:8080/` にアクセスして確認
[f:id:Anorlondo448:20180425062759p:plain]

### TypeScriptインストール
- インストール

$ npm install -g typescript

## 認可不要のAPIを使ってDynamoDBのデータを取得する
- [Amazon DynamoDB のデータを API Gateway と Angular( D3.js ) でサーバーレス可視化する](https://dev.classmethod.jp/server-side/serverless/visualize-dynamodb-serverless/)を見ながら作る
### Angular + D3.js でデータ可視化の準備をする
- tsファイルを作成

$ cd cognitotest/dist $ touch data.ts $ touch vote-bar-chart.ts

- 実装(ソースコピペ)
-