タダです。

今回はサーバーレスシングルページアプリケーション4章で勉強したことをまとめていきます。 www.oreilly.co.jp

章立ては以下のようになっています。

1章　シンプルにはじめる
2章　ハッシュイベントによるビューのルーティング
3章　シングルページアプリケーションに必要なもの
4章　Amazon CognitoによるIdentity as a Service
5章　DynamoDBにデータを格納する
6章　Lambdaを使って（マイクロ）サービスを作る
7章　サーバーレスのセキュリティ
8章　スケールアップする

4章のまとめ

今回はユーザー認証・認可にCognitoを使っていく
- Cognitoはユーザーのレコードをアイデンティティプールと呼ぶ場所に格納する
- アイデンティティプロバイダーとして、Google認証を使う

Adding User Pool Sign-in Through a Third Party - Amazon Cognito

書籍では、Google Devleopers Consoleと記載されているが現在はGCPのAPIとサービスに統合されている模様
- 以下の箇所にGoogleで取得したクライアントIDを埋め込む

{
    "AllowUnauthenticatedIdentities": false,
    "SupportedLoginProviders": { #SupportedLoginProvidersがIDプロバイダとCognitoのトークンを検証するIDのリストを表す
        "accounts.google.com": "<ここに転記する>"
    }
}

./sspa create_pools を実行すると実行結果に応じて以下のファイルが生成される
- pool_info.json : cognitoのアイデンティティプールの情報
- assume_role.json,role_info.json : cognitoの利用するIAMロールの情報
Google認証を使うために、Googleが提供するJavaScriptライブラリを設定して、View側でログインボタンを追加する
- そのためにGoogle JavaScript API(gapi)を取り込むscript要素を追加する

<script src="https://apis.google.com/js/platform.js" async defer></script>

ライブラリーの設定は、head要素にmeta要素を追加する

<meta name="google-signin-client_id" content="GoogleのクライアントID">

Google　APIがコールバックとして使う関数を定義する
- これが認証が成功すると実行される

function googleSignIn() {
  console.log(arguments);
}

ログインボタンをGoogle側に連携する必要があるため、div要素を追加する

<div class='nav-container no-select fixed-top u-full-width'>
    <ul class='inline-list hover-links nav-list six columns'>
    <li><a class='text-lg' href="#">LearnJS</a></li>
    <li><a href="#problem-1">Start</a></li>
    </ul>
    <div class='four columns'>
        <span class='navbar-padding u-pull-right'>
        <span class="g-signin2" data-onsuccess="googleSignIn"></span>
        </span>
    </div>
</div>

デプロイすると、ログインボタンが表示されてGoogle認証ができるようになる
Googleの認証ができるようになったからトークンを取得したのち、Cognito認証情報を生成できるようになる
- CognitoIdentityCredentialsオブジェクトを使って、アプリケーションで認証されたユーザーはAWSサービスに直接アクセスできる
- トークンは一時的な期間しか有効でないのでトークンを更新する処理を追加する
プロファイルビューを作ることで、ユーザーにアプリがどんな情報を持っているかを知らせることができる