如何正确处理 AWS Amplify/AppSync React 应用程序中未经身份验证的用户和请求？

Question

我很难弄清楚如何在使用 AWS Amplify 和 AWS AppSync 的 React 应用程序中处理未经身份验证的用户。似乎大多数文档建议用 aws-amplify-react 中的 withAuthenticator HOC 包装整个应用程序，但在现实世界中这种情况非常罕见。

所以在这里我如何设置客户端与 AppSync 对话 API

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);

所有这些都有效，用户点击 root URL 并获得登录视图。正如上面所说，这在现实世界中是非常罕见的情况。通常，根目录 URL 以及许多其他目录对未经身份验证的用户开放。如何使用 AWS Amplify 完成它？ - 没有文档，不是 tuts :-(

我找到了一些如何让它工作的提示here，但仍然没有完整的解释。

Answer 1

我猜测用例是向 unauth 和 auth 用户授予对你的 graphql api 的访问权限，赋予他们不同的权限（例如，auth 用户可以进行突变，而 unauth 用户只能进行一些查询）。如果是这种情况，您需要在 AppSync API 上将 AWS IAM 配置为身份验证类型，您还需要一个具有 unauth 和 auth 访问权限的 Amazon Cognito IdentityPool，并根据您的要求为这些角色配置 IAM 角色.

您可以找到更详细的答案here

Answer 2

确保更新您的身份验证设置以通过运行 amplify update auth 启用经过身份验证和未经身份验证的访问并手动配置设置。
在API请求中，您现在可以指定授权模式：

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

Here are more detailed docs

这些步骤已过时但仍然有效：

使用以下步骤，您可以允许对您的 AWS AppSync 进行经过身份验证和未经身份验证的访问 API：

创建一个 Amplify 项目

amplify init

使用自定义安全配置添加身份验证：

amplify add auth

Do you want to use the default authentication and security configuration? NO

Select the authentication/authorization services that you want to use: (Use arrow keys) User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)

Please provide a friendly name for your resource that will be used to label this category in the project: YOURAPINAME

Please enter a name for your identity pool. YOURIDPOOLNAME

Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) Yes

Choose defaults for the rest of the questions

添加api

amplify add api

Choose Amazon Cognito User Pool as the authorization type.

创建 API

amplify push

在 AppSync API 仪表板设置中，将身份验证类型更改为 AWS Identity and Access Management (IAM)
在客户端应用程序的 aws.exports.js 中，将 aws_appsync_authenticationType 更改为 AWS_IAM
在 Cognito 仪表板中，单击“管理身份池”并单击您的身份池。
单击“编辑身份池”以查看您的“未验证角色”和“已验证角色”
打开 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))

您现在应该能够在注销时查询，以及在登录时查询和创建突变。

如果您想访问登录用户的唯一身份以进行用户授权和细粒度访问控制，您可以在解析器中访问 $context.identity.cognitoIdentityId。

Answer 3

对遭受未经授权（您的问题与 AppSync 有关）或 401（您的问题与 IAM/Unauth 角色设置有关）的任何人的一点额外帮助。

我们将 COGNITO POOLS 作为默认授权方。为了使用 AWS_IAM，您需要将其添加到 AppSync 中，然后调整身份池的 UNAUTH 角色（如上所述）。但还有最后一个问题 --

在匿名交易中涉及的 query/mutation/model 上添加 @aws_iam 指令，这应该会停止放大返回未授权错误，但是如果您没有返回，您可能会看到更多错误指令也允许对象的字段。

希望这对您有所帮助。在此处查看文档以获取正确的设置指令。

https://aws.amazon.com/blogs/mobile/using-multiple-authorization-types-with-aws-appsync-graphql-apis/

如何正确处理 AWS Amplify/AppSync React 应用程序中未经身份验证的用户和请求？

How to properly handle unauthenticated users and requests in AWS Amplify/AppSync React apps?

amazon-web-services

reactjs

aws-appsync

aws-amplify