Amplify에서 S3 콘텐츠 열람에 대한 사용자 인증

Amplify+Vue의 개발 속도가 너무 빨라서 매일 감동
이번 S3와 코그니토의 컬래버레이션 설정이 너무 쉬워서 기사를 썼어요.

전제 조건

Amplify

사용

전면 프레임은 Vue.js

하고 싶은 일.

Comgnito 사용자만 S3 영역의 컨텐츠 열람 가능

서명 URL

presigned_url

인증에서 허가된 사용자만 발행

일정 기간만 열람할 수 있음

발행된 URL 자체는 누구나 액세스할 수 있음

amplify Storage 사용

amplify에서 Auth를 사용하는 경우 Storage로 추가된 물통은 자동으로 인증(편하게 빨아먹기 33;)

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는 비인증 상태의 사용자에 대한 권한입니다.

정책 이름CognitoUserS3Access에 대한 작업 및 Resource 설정 확인
[Action] ... 허용S3:GetObject하면 ok
[Resource] ... 채워진 부분이 대상의 구간 이름이라면 ok

검색한 URL로 접근할 수 없습니다

서명 URL을 성공적으로 가져왔지만, 접근이 막히면バケットポリシーでブロックされている 또는 対象の文書がない 가능
서명된 URL
단지 구간과 대상 자원을 나타내는 키를 바탕으로 자동으로 생성된 공개 URL에 인증 정보를 추가할 뿐이다
즉, URL이 릴리즈될 때バケットポリシー 또는 キーとして指定したリソースの有無 확인되지 않음