<p>Amplify+Vue の開発が爆速すぎて感動する日々です<br>
今回はS3とCognitoの連携があまりに簡単に設定出来たので記事にしました</p>
<h2 id="%E5%89%8D%E6%8F%90">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h2>
<ul>
<li>Amplifyを利用している</li>
<li>フロントフレームワークは <code>Vue.js</code>
</li>
</ul>
<h2 id="%E3%82%84%E3%82%8A%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8A%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> やりたかったこと</h2>
<p>S3バケット内にあるコンテンツをCognitoユーザーのみ閲覧出来るようにする</p>
<h2 id="%E7%BD%B2%E5%90%8D%E4%BB%98%E3%81%8Durl">
<a class="header-anchor-link" href="#%E7%BD%B2%E5%90%8D%E4%BB%98%E3%81%8Durl" aria-hidden="true"></a> 署名付きURL</h2>
<ul>
<li>presigned_url</li>
<li>認証で許可されたユーザーにのみ発行される</li>
<li>一定期間のみ閲覧可能</li>
<li>発行されたURL自体は誰でもアクセス可能</li>
</ul>
<h2 id="amplify%E3%81%AEstorage%E3%82%92%E4%BD%BF%E3%81%86">
<a class="header-anchor-link" href="#amplify%E3%81%AEstorage%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> amplifyのStorageを使う</h2>
<p>amplifyでAuthを使用している場合、Storageとして追加したバケットは自動的に認証がかかる(便利!!)</p>
<ul>
<li>Authの追加 ... <code>$ amplify add auth</code>
</li>
<li>Storageの追加 ... <code>$ amplify add storage</code>
</li>
</ul>
<h2 id="%E3%81%99%E3%81%A7%E3%81%AB%E3%81%82%E3%82%8Bs3%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86">
<a class="header-anchor-link" href="#%E3%81%99%E3%81%A7%E3%81%AB%E3%81%82%E3%82%8Bs3%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> すでにあるS3バケットを使う</h2>
<p>以下のようにバケット名とリージョン名を設定するだけ</p>
<div class="code-block-container"><pre><code>import Amplify from 'aws-amplify';

Amplify.configure({
    Storage: {
        AWSS3: {
            bucket: 'バケット名',
            region: 'リージョン名',
        }
    }
});
</code></pre></div><p>※ パブリックアクセス設定はすべて <code>オン</code></p>
<h2 id="url%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#url%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> URLを取得する</h2>
<p>バケット情報を設定したらあとは <code>Storage.get()</code> するだけ(超簡単!!)</p>
<div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Storage</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'aws-amplify'</span><span class="token punctuation">;</span>

<span class="token maybe-class-name">Storage</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"文書名"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">expires</span><span class="token operator">:</span> <span class="token function">有効期限</span><span class="token punctuation">(</span>秒<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">re</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//  re = 署名付きURL</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="url%E3%81%8C%E5%8F%96%E5%BE%97%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88">
<a class="header-anchor-link" href="#url%E3%81%8C%E5%8F%96%E5%BE%97%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88" aria-hidden="true"></a> URLが取得出来ない場合</h2>
<p><code>Storage.get()</code> で認証エラーが返ってきてしまう場合以下を確認</p>
<h4 id="cognito%E3%81%AEauth%E3%83%AD%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#cognito%E3%81%AEauth%E3%83%AD%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Cognitoのauthロール</h4>
<p>Authを追加すると、ロールがいくつか作成される<br>
今回確認するのは、末尾が <code>-authRole</code> のロール<br>
もう一方の <code>-unauthRole</code> は非認証状態のユーザーに対する権限<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--MphzP3qt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252165/01747824-13a2-4a3d-43bb-f18b33973bc5.png" alt="スクリーンショット 2019-10-17 10.37.34.png" loading="lazy" class="md-img"></p>
<p>ポリシー名 <code>CognitoUserS3Access</code> のActionとResourceの設定を確認</p>
<p>[Action] ... <code>S3:GetObject</code> が許可されていればok<br>
[Resource] ... 塗りつぶし部分が対象のバケット名であればok<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--AOtcbpP0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252165/3700ddce-5dd6-a6c6-450b-dadce4827359.png" alt="スクリーンショット 2019-10-17 10.42.55.png" loading="lazy" class="md-img"></p>
<h2 id="%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9Furl%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9Furl%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84" aria-hidden="true"></a> 取得したURLでアクセス出来ない</h2>
<p>署名付きURLの取得には成功したが、アクセスするとブロックされる場合、<br>
<code>バケットポリシーでブロックされている</code> または <code>対象の文書がない</code> 可能性がある</p>
<p>署名付きURLは、<br>
バケットと対象のリソースを示すキーをもとに自動生成された公開URLに、認証情報を付加しているだけ</p>
<p>つまり、URL発行時に <code>バケットポリシー</code> や <code>キーとして指定したリソースの有無</code> は確認されない</p>


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

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

Discussion