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バケットを使う
以下のようにバケット名とリージョン名を設定するだけ
main.js
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 は非認証状態のユーザーに対する権限
ポリシー名 CognitoUserS3Access のActionとResourceの設定を確認
[Action] ... S3:GetObject が許可されていればok
[Resource] ... 塗りつぶし部分が対象のバケット名であればok
取得したURLでアクセス出来ない
署名付きURLの取得には成功したが、アクセスするとブロックされる場合、
バケットポリシーでブロックされている または 対象の文書がない 可能性がある
署名付きURLは、
バケットと対象のリソースを示すキーをもとに自動生成された公開URLに、認証情報を付加しているだけ
つまり、URL発行時に バケットポリシー や キーとして指定したリソースの有無 は確認されない