71
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【 AWS 】Amazon Cognitoで認証を行って、S3にファイルをアップロードする仕組みを実装してみた(1)

Last updated at Posted at 2018-03-26

はじめに :spy:

Amazon Cognito 」を使って、__サーバーレスなユーザー認証を実現__してみた!
記事内容自体は、目新しいことではないかもしれませんが、自分の #備忘録 として書き残していきます。
※ Amazon Cognitoを触ったことがない方でも読めば役に立つんじゃないかなと思います。

:point_right_tone2: 目次

  • やりたいこと ( システム構成図 )
  • (1) S3で静的Webサイトをホスティングする。
  • (2) What's Amazon Cognito !?
  • (3) Amazon Congnitoを使って、User Poolを作成する。
  • (4) AWS SDK(JS)を使って、ログイン基盤を作成する。
  • (5) S3署名付きURLを生成する。
  • 参考文献

やりたいこと (システム構成図) :japanese_goblin:

Amazon Cognito 」を使って、ユーザー認証を行い、認証済みのユーザーに対して、
一時的に、「 IAM ( AWS Identity and Access Management ) Role 」を付与すること。
署名付きURL生成?してS3へアップロード?

・全体のシステム構成イメージ図

AmazonCognito.png

(1) S3で静的Webサイトをホスティングする。

ユーザー認証ページを「 サーバーレス 」で実現するために、
今回は、S3を用いた静的Webサイトのホスティングを行います。

※S3の「Static website hosting」を有効にすると、バケットに対してHttpsアクセスが無効になります。
HTTPSアクセスをしたい場合は、CloudFront(CDN)を間に挟む必要があります。

手順は、下記公式サイトに記載がありますが、本記事でも少しだけ触れたいと思います。

01. S3バケットを新規作成

新しいバケットを作成します。
デフォルトのエンドポイントは、下記になります。

http://<-your_bucket_name->.s3-website-<-your_region_name->.amazonaws.com

image.png

02. Webサイトホスティングの設定を追加

新しく作成したS3のプロパティ__「Static website hosting」__を編集します。

image.png

ラジオボックスが表示されるので、
「このバケットを使用してウェブサイトをホストする」
を選択します。

image.png

インデックスドキュメントの欄が空欄なので、
__「index.html」__と入力し、保存ボタンを押下します。

03. バケットポリシーの追加

バケットを作成した状態だと外部からは非公開なので、
バケットポリシーを追加し、パブリックからのアクセスを許可します。

image.png

バケットポリシーエディターに下記コードを追加。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<アクセスを許可したバケット名>/*"
        }
    ]
}
image.png

04. 対象バケットに index.html をアップロード

実際に、アクセスのあった際に表示されるindex.htmlファイルをアップロードします。

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>qiita</title>
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   article, aside, dialog, figure, footer, header,
   hgroup, menu, nav, section { display: block; }
  </style>
 </head>
 <body>
  <p> Hello [Bucket名]! </p>
 </body>
</html>

05. 検証

実際にアクセスしてみる。

http://<-your_bucket_name->.s3-website-<-your_region_name->.amazonaws.com

image.png

上記index.htmlファイルの<p>タグで囲ったテキストが表示されていれば成功です。
続いて、ユーザー認証に必要なAmazon Cognito User Pools 」を作成したいと思います。

(2) What's Amazon Cognito !?

Amazon Cognito には、__大きく3つの機能__があります。

image.png
  • Amazon Cognito User Pools
  • Amazon Cognito Federated Identities
  • Amazon Cognito Sync

(3) Amazon Congnitoを使ってUser Poolsを作成する。

Amazon Cognito User Pools とは?

User Poolsを使うと、誰でも手軽にユーザーディレクトリの作成、管理を行うことができ、
モバイルアプリやウェブアプリケーションにサインアップやサインインを簡単に追加することができます。
Amazon Cognito とは ( 公式サイト )

CognitoのUserPoolを作成していきます。

image.png

サインインする際の認証方法と、ユーザー情報の標準属性について設定することができます。

image.png

「ユーザーパスワードの強度」と「サインアップ権限の付与有無」、「ユーザーアカウントの有効期限」等を設定することができます。

image.png

__多要素認証( MFA:Multi-Factor Authentication )__の設定や、SMSメッセージ送信用のRole作成、指定等の設定ができます。

image.png

メールアドレス検証時のメッセージを設定することができます。

image.png

最終確認を終え、「プールの作成」ボタンを押下すると、新しいプールが作成されます。

image.png

今回は、ここまで。次の記事でこの実装の続きについて、記載したいと思います。

・トラブルシューティング

1. S3でホスティングしたWebサイトはHTTPSアクセスすることができない!?

A. とりあえず、下記方法でHTTPS対応することができるみたい。
AWS S3でのhttps対応含む静的ウェブサイト公開

・重要なキーワード

フェデレーション ( Federation ) とは?

一度認証を通れば、その認証情報を使って、許可されている全てのサービスを使えるようにする仕組み。
IT用語辞典 - Federation

SAML ( Security Assertion Markup Language ) とは?

SAMLとは、Security Assertion Markup Language の略称で、OASISによって策定された
異なるインターネットドメイン間でユーザー認証を行うためにXMLベースにした標準規格です。
2002年に策定され、2005年にはバージョン2.0となっています。
SAMLとは (onelogin)

※ 執筆途中に大変参考にさせていただいたサイト

執筆者のみなさん、情報を公開してくださってありがとうございます。

上記サイトを読んでからやると、実装完了までのスピードが格段と上がること間違いなし!

さいごに :man_tone4:

最後までお読みいただき、ありがとうございました。
引き続き、詳細のアップデートがあれば記事も更新していく予定です。

71
66
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
71
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?