<h2 id="%E7%9B%AE%E7%9A%84">
<a class="header-anchor-link" href="#%E7%9B%AE%E7%9A%84" aria-hidden="true"></a> 目的</h2>
<p>AppSyncでCognito認証をしてみる</p>
<h3 id="appsync%E3%81%AEgraphql-api%E3%81%AE%E7%94%A8%E6%84%8F">
<a class="header-anchor-link" href="#appsync%E3%81%AEgraphql-api%E3%81%AE%E7%94%A8%E6%84%8F" aria-hidden="true"></a> AppSyncのGraphQL APIの用意</h3>
<p><a href="/articles/appsync-quick-start">前回記事</a>にて作成済みのプロダクトを利用する</p>
<h3 id="cognito%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#cognito%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Cognito: ユーザー作成</h3>
<p>Cognitoのコンソール画面から適当なUserpoolを作って、テストで利用すためだけのユーザーを作成しておく<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--oBF4oN04--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e2523604caa35cd38b199e92.png%3Fsha%3D39c75ea4625ea1793be8710d4095119739501e6c" alt loading="lazy" class="md-img"></p>
<h3 id="cognito%3A-%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#cognito%3A-%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Cognito: クライアントアプリ作成</h3>
<p>テストなのでシークレットの作成はOFF<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--bj3NC4zo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/191fa4ad0df7d9a78f9a225e.png%3Fsha%3D1270e19fcf2c058ee93724d38009f810e3899b5e" alt loading="lazy" class="md-img"></p>
<h3 id="appsync%3A-%E8%AA%8D%E8%A8%BC%E6%96%B9%E6%B3%95%E3%82%92cognito%E3%81%AB%E5%A4%89%E6%9B%B4">
<a class="header-anchor-link" href="#appsync%3A-%E8%AA%8D%E8%A8%BC%E6%96%B9%E6%B3%95%E3%82%92cognito%E3%81%AB%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> AppSync: 認証方法をCognitoに変更</h3>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--67Hp7JuZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/12fe8d4d657900f19becb7dc.png%3Fsha%3Dd221aa551cd32c544a40e0f485f0aed892d3af8f" alt loading="lazy" class="md-img"></p>
<h3 id="appsync%3A-%E3%82%AF%E3%82%A8%E3%83%AA%E7%94%BB%E9%9D%A2">
<a class="header-anchor-link" href="#appsync%3A-%E3%82%AF%E3%82%A8%E3%83%AA%E7%94%BB%E9%9D%A2" aria-hidden="true"></a> AppSync: クエリ画面</h3>
<p>認証方法をCognitoに変更したためGraphQL APIが叩けなくなっている<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--hNiCaHRV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d0822e39d952fbe5e184493f.png%3Fsha%3De754feff3f2cdd17af07dde3d8ec25da3e643452" alt loading="lazy" class="md-img"></p>
<h3 id="appsync%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%97%E3%83%BC%E3%83%AB%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3">
<a class="header-anchor-link" href="#appsync%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%97%E3%83%BC%E3%83%AB%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3" aria-hidden="true"></a> AppSync: ユーザープールにログイン</h3>
<p>実行ボタン横のユーザープールにログインを押してログイン<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--hzQlbJfF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4fb016682ea8404357ca1c82.png%3Fsha%3D286818a9fe9481f3c6ad6b6f39827554f4fb5fa1" alt loading="lazy" class="md-img"></p>
<h3 id="appsync%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%97%E3%83%BC%E3%83%AB%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3-1">
<a class="header-anchor-link" href="#appsync%3A-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%97%E3%83%BC%E3%83%AB%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3-1" aria-hidden="true"></a> AppSync: ユーザープールにログイン</h3>
<p>無事認証が通り、クエリが実行されていることを確認<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--xXNqTgew--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/89238d73a45917aa6bb85df1.png%3Fsha%3Dbf292c86b77d87cc9bd041f1c47a7dc84080bb9d" alt loading="lazy" class="md-img"></p>


AppSyncでCognito認証

Cognito: クライアントアプリ作成

AppSync: ユーザープールにログイン

目的

AppSyncのGraphQL APIの用意

Cognito: ユーザー作成

Cognito: クライアントアプリ作成

AppSync: 認証方法をCognitoに変更

AppSync: クエリ画面

AppSync: ユーザープールにログイン

AppSync: ユーザープールにログイン

Discussion