やーまんぶろぐ

気が向いた時にだけ書くブログ

AWS Amplifyを使ってAmazon Cognitoを体験してみる

AWS

メインはAmazon Cognitoの理解です。

Amazon Cognitoまわりの作成は簡単にできるのですが、挙動を確認するにはUIがあるほうが理解が進むと思ったので、AWS Amplifyを使って体験してみました。

せっかくだったのでローカルで動かすだけではなく、S3にデプロイして動かしてみたのでメモしておきます。東京リージョンで作業しています。

Amazon Cognitoとは

まずはBlackBeltを読むと良いと思います。

www.slideshare.net

続いてコンソールからアクセスすると以下の説明が出てきます。

Amazon Cognito は、ユーザーのアプリへのサインアップとサインイン、ソーシャル ID プロバイダーからの ID のフェデレーション、AWS のリソースへのセキュアなアクセス、および複数のデバイス、プラットフォーム、アプリケーションにわたるデータの同期を簡単にします。

Amazon Cognitoは「User Pools」と「Federated Identities」に分かれるので、それぞれ個人的な理解を簡潔にメモしておきます。
概要は理解はできたけど、簡潔に説明するとなると難しい。。
f:id:yamano3201:20180118173024p:plain

※「Cognito Sync」は今回触っていないので説明していません。

User Pools

  • マネージドなユーザ管理サービスです。
  • サインアップ、サインイン、サインアウトなどの認証を担当しています。
  • FacebookやGoogleのような外部認証プロバイダと同列で、独自の認証プロバイダとして動作します。

認証機能だけであればUser Poolsだけでも動作可能です。

Federated Identities

  • エンドユーザに一意のIDを割り振るためのサービスです。
  • 認証プロバイダに認証されたエンドユーザに対して、AWSリソースへのアクセスを許可することができ認可を担当しています。
  • 認可OKの場合はIAM側でSTSから一時アクセスキーが発行されます。
  • FacebookやGoogleのような外部認証プロバイダやUser Poolsで認証されたエンドユーザを同一IDとして一元管理できます。

AWSリソースへアクセスするためにはFederated Identitiesが必要です。
User Poolsと統合することで外部認証プロバイダを使用することなくAWSリソースへアクセスすることが可能になります。

Amazon Cognitoをコンソールから構築してみる

実際に構築することで理解を深めていきます。

以下の記事を参考に構築しました。
dev.classmethod.jp

User Pools

Amazon Cognitoの「ユーザプールの管理」からアクセスします。

ユーザープールを作成する

「ユーザープールを作成する」→プール名を埋める→「デフォルトを確認する」→「プールの作成」と進みます。
f:id:yamano3201:20180118174330p:plain

プールID(ap-northeast-1_XXXXXXXXX)が表示されるのでメモしておきましょう。

アプリクライアントの追加

「アプリクライアント」→「アプリクライアントの追加」→アプリクライアント名を埋めて、「クライアントシークレットを生成」のチェックを外す→「アプリクライアントの作成」と進みます。
f:id:yamano3201:20180118174734p:plain

アプリクライアントID(XXXXXXXXXXXXXXXXXXXXXXXXX)が表示されるのでメモしておきます。

ユーザーの作成

「全体設定」→「ユーザーとグループ」→「ユーザの作成」→ユーザ名、仮パスワード、Eメールを埋める→「ユーザーの作成」と進みます
f:id:yamano3201:20180118175442p:plain

ステータスを見ると「FORCE_CHANGE_PASSWORD」と表示されています。

作成と同時に仮パスワードが書かれた以下のメールが飛んできます。

件名 Your temporary password
宛先 no-reply@verificationemail.com

UIがないと動作確認が難しいのでいったんここまで。

Federated Identities

Amazon Cognitoの「フェデレーテッドアイデンティティの管理」からアクセスします。

User Poolsと連携したIDプールを作成する

「新しいIDプールの作成」→IDプール名を埋める→(今回は「認証されていない ID に対してアクセスを有効にする」のチェックはどちらでもよい)→「認証プロバイダー」→さきほどメモした「プールID」と「アプリクライアントID」を埋める→「プールの作成」と進みます。

f:id:yamano3201:20180123155455p:plain

ID プールの ID(ap-northeast-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) が表示されるのでメモしておきます。

UIがないと動作確認が難しいのでいったんここまで。

AWS Amplifyを使ってAmazon Cognito体験

以下の記事を参考に構築しました。
dev.classmethod.jp

nodejsのインストール、identityPoolIdの記載、S3へのデプロイ以外はほとんど参考リンク先の記述とほぼ同じになってしまいました。。

AWS Amplifyとは

AWS Amplifyは、2017年11月に公開されたAWSを利用するWebアプリケーション向けのJavaScriptライブラリです。サインアップやサインイン、MFA、追跡またはメトリクスの分析、コンテンツ管理、またはサーバーレスAPI統合などの実装が容易にできるように設計されています。

事前準備

適当にAmazon Linuxインスタンスを起動して試しました。

node jsをインストール

以下のリンクから最新版を確認。
Download | Node.js

$ wget https://nodejs.org/dist/v8.9.4/node-v8.9.4-linux-x64.tar.xz
$ xz -dv node-v8.9.4-linux-x64.tar.xz
$ tar xfv node-v8.9.4-linux-x64.tar

$ ln -s node-v8.9.4-linux-x64 node
(.profileを作成)
$ cat .profile
export NODE_HOME=$HOME/node
export NODE_PATH=$NODE_HOME/lib/node_modules
export PATH=$NODE_HOME/bin:$PATH

$ source .profile

$ node --version
v8.9.4
$ npm --version
5.6.0
yarnをインストール
$ npm install -g yarn
Reactひな形を作成

(参考リンク先コマンドのyarn global add create-react-app だとcreate-react-appが動かなかったのでnpmで実行)

$ npm install -g create-react-app
$ create-react-app amplify-react-sample
$ cd amplify-react-sample
動作確認
$ yarn start

Amazon LinuxインスタンスのSecurityGroupの3000ポートを開けて、ブラウザから以下のようなURLにアクセスするとReactが動いていることが確認できます。
http://#{Amazon LinuxインスタンスのパブリックIP}:3000/

f:id:yamano3201:20180123160656p:plain

Webアプリケーションの実装

まずは、AmplifyライブラリとAmplifyのReact拡張ライブラリのインストールを行います。

$ yarn add aws-amplify aws-amplify-react
src/App.jsの書き換え

続いてsrc/App.jsを以下に書き換えます。

import React, { Component } from 'react';
import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';
 
Amplify.configure({
  Auth: {
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_XXXXXXXXX', //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'XXXXXXXXXXXXXXXX', //OPTIONAL - Amazon Cognito Web Client ID
    identityPoolId: 'ap-northeast-1:XXXXXXXXXXXXXXXXXXXXXXXXXXX', // FederatedID連携後に追加する
  }
});

class AppWithAuth extends Component {
  render() {
    return <Authenticator />
  }
}

参考リンク先のコードにidentityPoolIdの行を追加した形になります。
詳細なシーケンスは意識せずに、裏で紐づけをやってくれるのが非常に便利だと感じました。

各種IDには以下の値を埋めます。

  • userPoolID
    • プール作成時に作られたプールID
  • userPoolWebClientId
    • アプリクライアント作成時に作られたアプリクライアントID
  • identityPoolId
動作確認
$ yarn start

さきほどと同じようにアクセスすると、Sign InやSign Upが実行できます。
http://#{Amazon LinuxインスタンスのパブリックIP}:3000/

f:id:yamano3201:20180123161844p:plain

S3にデプロイ

S3バケットの作成

まずはS3バケットを作成します。

パブリックアクセス許可

アクセスコントロールリストから、読み取りのパブリックアクセスを許可をします。

Static website hostingを有効化

「Static website hosting」を有効化して、エンドポイントをメモしておきます。
f:id:yamano3201:20180123162607p:plain

ビルド&デプロイ
$ yarn build
$ aws s3 sync build/ s3://#{S3バケツ名}

作成されたbuildディレクトリをS3にまるごとsyncすることでデプロイ完了です。

デプロイ後にブラウザからアクセスするとローカルと同じUIで動くことが確認できると思います。
http://#{S3バケツ名}.s3-website-ap-northeast-1.amazonaws.com

最後に

手を動かすことで理解が進みました。
Amazon Cognitoを動かして動作を確認するのに、CLIやSDKだけだとハードルが高いのでAWS Amplifyのようなライブラリを使うのは良かったと思います。

Amazon Cognitoの理解がメインでしたが、AWS Amplify自体の可能性も感じたのでもう少し触ってみたいと思います。