AWS AmplifyとAmazon Cognitoを連携しユーザープールグループごとに異なる権限を与えよう

amplify update auth
Please note that certain attributes may not be overwritten if you choose to use defaults settings.
Using service: Cognito, provided by: awscloudformation
 What do you want to do? Create or update Cognito user pool groups
#masterユーザープールグループの作成
? Provide a name for your user pool group: master
? Do you want to add another User Pool Group Yes
#crewユーザープールグループの作成
? Provide a name for your user pool group: crew
? Do you want to add another User Pool Group No
#ユーザープールグループの優先順を決める
√ Sort the user pool groups in order of preference · master, crew
✅ Successfully updated auth resource groupauthappe5886c81 locally

amplify push
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ userPoolGroups       │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ groupauthappe5886c81 │ Update    │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘
#userpoolはUpdateとuserPoolGroupsはCreate状態になっていることが分かります。
√ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack groupauthapp [ ======================================== ] 3/3
        amplify-groupauthapp-dev-1615... AWS::CloudFormation::Stack     UPDATE_COMPLETE                Thu Aug 24 2023 16:49:09...
        authgroupauthappe5886c81       AWS::CloudFormation::Stack     UPDATE_COMPLETE                Thu Aug 24 2023 16:48:19...
        authuserPoolGroups             AWS::CloudFormation::Stack     CREATE_COMPLETE                Thu Aug 24 2023 16:48:55...
Deployed auth groupauthappe5886c81 [ ======================================== ] 6/6
        IdentityPoolRoleMap            AWS::Cognito::IdentityPoolRol... UPDATE_IN_PROGRESS             Thu Aug 24 2023 16:48:13...
Deployed auth userPoolGroups [ ======================================== ] 4/4
        masterGroupRole                AWS::IAM::Role                 CREATE_COMPLETE                Thu Aug 24 2023 16:48:40...
        crewGroupRole                  AWS::IAM::Role                 CREATE_COMPLETE                Thu Aug 24 2023 16:48:41...
        masterGroup                    AWS::Cognito::UserPoolGroup    CREATE_COMPLETE                Thu Aug 24 2023 16:48:43...
        crewGroup                      AWS::Cognito::UserPoolGroup    CREATE_COMPLETE                Thu Aug 24 2023 16:48:43...

Deployment state saved successfully.

amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Authorization modes: API key (default, expiration time: 7 days from now)
? Choose the default authorization type for the API Amazon Cognito User Pool
Use a Cognito user pool configured as a part of this project.
? Configure additional auth types? No
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description)

⚠️  WARNING: Some types do not have authorization rules configured. That means all create, read, update, and delete operations are denied on these types:
         - Todo
Learn more about "@auth" authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
✅ GraphQL schema compiled successfully.

type Task @model @auth(
    rules: [
      { allow: groups,groups: ["master"],operations: [create, read, update, delete] },
      { allow: groups,groups: ["crew"],operations: [read] }
    ]
  ) {
  id: ID!
  taskName: String! 

amplify push   
| Fetching updates to backend environment: dev from the cloud.✅ GraphQL schema compiled successfully.

Edit your schema at ***\group-auth-app\amplify\backend\api\groupauthapp\schema.graphql or place .graphql files in a directory at ***\group-auth-app\amplify\backend\api\groupauthapp\schema
√ Successfully pulled backend environment dev from the cloud.
/ Building resource api/groupauthapp✅ GraphQL schema compiled successfully.

Edit your schema at ***\group-auth-app\amplify\backend\api\groupauthapp\schema.graphql or place .graphql files in a directory at ***\group-auth-app\amplify\backend\api\groupauthapp\schema

    Current Environment: dev
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Api      │ groupauthapp         │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ groupauthappe5886c81 │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ userPoolGroups       │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘
#Api CategoryがCreate状態になっていることが分かります。
√ Are you sure you want to continue? (Y/n) · yes

⚠️  WARNING: Global Sandbox Mode has been enabled, which requires a valid API key. If
you'd like to disable, remove "input AMPLIFY { globalAuthRule: AuthRule = { allow: public } }"
from your GraphQL schema and run 'amplify push' again. If you'd like to proceed with
sandbox mode disabled, do not create an API Key.

√ Would you like to create an API Key? (y/N) · no
✅ GraphQL schema compiled successfully.

Edit your schema at ***\group-auth-app\amplify\backend\api\groupauthapp\schema.graphql or place .graphql files in a directory at ***\group-auth-app\amplify\backend\api\groupauthapp\schema
/ Building resource api/groupauthapp✅ GraphQL schema compiled successfully.

Edit your schema at ***\group-auth-app\amplify\backend\api\groupauthapp\schema.graphql or place .graphql files in a directory at ***\group-auth-app\amplify\backend\api\groupauthapp\schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src\graphql\**\*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

Deployment completed. 

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import "@aws-amplify/ui-vue/styles.css";
import Amplify from '@aws-amplify/core';
import awsconfig from "./aws-exports";
// 日本語のimport
import { I18n } from 'aws-amplify';
import { translations } from '@aws-amplify/ui-vue';
I18n.putVocabularies(translations);
I18n.setLanguage('ja');

Amplify.configure(awsconfig);

const app = createApp(App);