AppSyncのコンソールからクエリを投げる時に認証でちょっとハマってみた

こんにちは。AWS事業本部のKyoです。

最終発表まで約1週間とANGEL Dojoも大詰めですね。

開発中にAppSyncのコンソールからクエリを投げたかったのですが、ちょっとハマってしまいました。内容を備忘録として残しておきます。

なお弊社チームにおけるANGEL Dojoへの取り組みは以下のカテゴリをご覧ください。

AWS：ANGEL Dojo – シリーズ –

やりたかったこと

AppSyncのコンソールからクエリを投げて、ブログデータをDynamoDBに追加

また、今回対象としているLoop I/Oのアーキテクチャの全体像は以下です。

起こった事とやった事

素直にAppSyncのコンソールからクエリを投げました。

エラーが出てしましました。エラーメッセージを見てみます。

認証関係っぽいですね。確かにLooP I/Oはamplifyの認証機能を利用しています。

クエリの実行ボタンの右にある「ユーザプールでログイン」をクリックしてみます。以下のポップアップが表示されました。

ユーザ名とパスワードは認証時に使っているものだとして、ClientIdはどこから取るのかパッと思いつきませんでした。

エラーメッセージを元に調査を行ったところ以下のissueを見つけました。

• Run query in AppSync console returns UnauthorizedException

Amplify CLIを使っている場合、aws-exports.jsのaws_user_pools_web_client_idを利用すると良いようです。

私の環境ではaws-exports.js は[プロジェクト名]/src/aws-exports.js というパスにありました。中身は以下のような形です。

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-northeast-1",
    "aws_appsync_graphqlEndpoint": "https://XXXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql",
    "aws_appsync_region": "ap-northeast-1",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_cognito_identity_pool_id": "ap-northeast-1:YYYYYYYYYY",
    "aws_cognito_region": "ap-northeast-1",
    "aws_user_pools_id": "ap-northeast-1_ZZZZZZZZZZ",
    "aws_user_pools_web_client_id": "WWWWWWWWWW",
    "oauth": {}
};


export default awsmobile;

このaws_user_pools_web_client_idの値を利用してログイン、クエリに再チャレンジしてみます。

無事に成功し、DynamoDBにもデータが入っていることが確認できました。

おわりに

AppSyncコンソールで利用する認証情報 ClientIdはaws-exports.jsのaws_user_pools_web_client_idから取得できることを知りました。

何かのお役に立てれば幸いです。