Amplify에서 S3 콘텐츠 브라우징에 사용자 인증하기

Amplify+Vue의 개발이 너무 폭속해서 감동하는 날들입니다.
이번에는 S3과 Cognito의 연계를 너무 쉽게 설정할 수 있었기 때문에 기사로했습니다

전제

Amplify를 이용하고 있다

프론트 프레임워크는 Vue.js

하고 싶었던 일

S3 버킷에 있는 콘텐츠를 Cognito 사용자만 볼 수 있도록 허용

서명된 URL

presigned_url

인증에 허용된 사용자에게만 발행됨

일정 기간 만 열람 가능

게시된 URL 자체는 누구나 액세스할 수 있습니다

amplify의 Storage 사용

amplify에서 Auth를 사용하는 경우 Storage로 추가 한 버킷은 자동으로 인증됩니다 (편리한!!)

Auth 추가 ... $ amplify add auth

스토리지 추가 ... $ 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 발행시 バケットポリシー 또는 キーとして指定したリソースの有無는 확인되지 않습니다.