AmplifyでS3のコンテンツ閲覧にユーザー認証をかける

2 min read読了の目安(約1600字

Amplify+Vue の開発が爆速すぎて感動する日々です
今回はS3とCognitoの連携があまりに簡単に設定出来たので記事にしました

前提

  • Amplifyを利用している
  • フロントフレームワークは Vue.js

やりたかったこと

S3バケット内にあるコンテンツをCognitoユーザーのみ閲覧出来るようにする

署名付きURL

  • presigned_url
  • 認証で許可されたユーザーにのみ発行される
  • 一定期間のみ閲覧可能
  • 発行されたURL自体は誰でもアクセス可能

amplifyのStorageを使う

amplifyでAuthを使用している場合、Storageとして追加したバケットは自動的に認証がかかる(便利!!)

  • Authの追加 ... $ amplify add auth
  • Storageの追加 ... $ amplify add storage

すでにあるS3バケットを使う

以下のようにバケット名とリージョン名を設定するだけ

import Amplify from 'aws-amplify';

Amplify.configure({
    Storage: {
        AWSS3: {
            bucket: 'バケット名',
            region: 'リージョン名',
        }
    }
});

※ パブリックアクセス設定はすべて オン

URLを取得する

バケット情報を設定したらあとは Storage.get() するだけ(超簡単!!)

import {Storage} from 'aws-amplify';

Storage.get("文書名", {expires: 有効期限()})
  .then((re) => {
    //  re = 署名付きURL
  })

URLが取得出来ない場合

Storage.get() で認証エラーが返ってきてしまう場合以下を確認

Cognitoのauthロール

Authを追加すると、ロールがいくつか作成される
今回確認するのは、末尾が -authRole のロール
もう一方の -unauthRole は非認証状態のユーザーに対する権限
スクリーンショット 2019-10-17 10.37.34.png

ポリシー名 CognitoUserS3Access のActionとResourceの設定を確認

[Action] ... S3:GetObject が許可されていればok
[Resource] ... 塗りつぶし部分が対象のバケット名であればok
スクリーンショット 2019-10-17 10.42.55.png

取得したURLでアクセス出来ない

署名付きURLの取得には成功したが、アクセスするとブロックされる場合、
バケットポリシーでブロックされている または 対象の文書がない 可能性がある

署名付きURLは、
バケットと対象のリソースを示すキーをもとに自動生成された公開URLに、認証情報を付加しているだけ

つまり、URL発行時に バケットポリシーキーとして指定したリソースの有無 は確認されない