AWS Amplify / AppSync Reactアプリで認証されていないユーザーとリクエストを適切に処理するにはどうすればよいですか？

debugcn 投稿 Dev

SaidAkh

AWSAmplifyとAWSAppSyncを使用するReactアプリで認証されていないユーザーを処理する方法を理解するのに非常に苦労しています。ほとんどのドキュメントがアプリ全体をwithAuthenticatorHOCでラップすることを提案しているようですaws-amplify-reactが、現実の世界では非常にまれなケースです。

だからここで私はAppSyncAPIと通信するようにクライアントを設定する方法

const client = new AWSAppSyncClient({
  url: AppSyncConfig.aws_appsync_graphqlEndpoint,
  region: AppSyncConfig.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken()
  }
});

次に、トップレベルのAppコンポーネントをラップしますexport default withAuthenticator(App);

これらはすべて機能し、ユーザーはルートURLにアクセスすると、ログインビューが提供されます。上で述べたように、これは実際のシナリオでは非常にまれなケースです。通常、ルートURLやその他の多くのURLは、認証されていないユーザーに公開されています。AWS Amplifyでそれを達成する方法は？-ドキュメントもタッツもありません:-(

ここでそれを機能させる方法のヒントをいくつか見つけましたが、それでも完全な説明はありません。

ネイダーは

amplify update auth設定を手動で実行および構成して、認証設定を更新し、認証済みアクセスと非認証アクセスの両方を有効にしてください。
APIリクエストで、認証モードを指定できるようになりました。

const createdTodo = await API.graphql({
  query: queries.createTodo,
  variables: {input: todoDetails},
  authMode: 'AWS_IAM'
});

ここにもっと詳細なドキュメントがあります

これらの手順は古くなっていますが、引き続き機能します。

次の手順を使用して、AWS AppSyncAPIへの認証済みアクセスと未認証アクセスの両方を許可できます。

Amplifyプロジェクトを作成する

amplify init

カスタムセキュリティ構成で認証を追加します。

amplify add auth

デフォルトの認証およびセキュリティ構成を使用しますか？番号

使用する認証/承認サービスを選択します:(矢印キーを使用）ユーザーサインアップ、サインイン、AWS IAMコントロールに接続（画像やその他のコンテンツのユーザーごとのストレージ機能、アナリティクスなどを有効にします）

プロジェクトでこのカテゴリにラベルを付けるために使用されるリソースのわかりやすい名前を入力してください：YOURAPINAME

IDプールの名前を入力してください。YOURIDPOOLNAME

認証されていないログインを許可しますか？（AWS IAMを介して制御できるスコープダウンパーミッションを提供します）はい

残りの質問にはデフォルトを選択してください

APIを追加します

amplify add api

承認タイプとしてAmazonCognito UserPoolを選択します。

APIを作成します

amplify push

AppSync APIダッシュボード設定で、認証タイプをAWS Identity and Access Management（IAM）に変更します
ではaws.exports.js、クライアントアプリ上、変更aws_appsync_authenticationTypeしますAWS_IAM
Cognitoダッシュボードで、[IDプールの管理]をクリックし、IDプールをクリックします。
「IDプールの編集」をクリックして、「認証されていない役割」と「認証された役割」を表示します
IAMコンソールを開き、手順8の「認証されていないロール」を見つけます
「インラインポリシーの追加」をクリックします

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos"
            ]
        }
    ]
}

IAMコンソールを開き、手順8の「認証されたロール」を見つけます
「インラインポリシーの追加」をクリックします

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos",
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/createTodo"
            ]
        }
    ]
}

index.jsに、次のコードを追加します。

import { Auth } from 'aws-amplify'
Auth.currentCredentials()
  .then(d => console.log('data: ', d))
  .catch(e => console.log('error: ', e))

これで、ログアウト時にクエリを実行し、ログイン時にミューテーションをクエリして作成できるようになります。

ログインしたユーザーの一意のIDにアクセスして、ユーザー認証ときめ細かいアクセス制御を行う場合は $context.identity.cognitoIdentityId 、リゾルバーでにアクセスできます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-8

コメントを追加

サインイン

Related 関連記事

記事