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

IT技术 reactjs amazon-web-services aws-appsync aws-amplify
2021-05-04 16:17:13

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

所以在这里我如何设置客户端与 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);

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

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

3个回答
  1. 确保通过amplify update auth手动运行和配置设置来更新您的身份验证设置以启用经过身份验证和未经身份验证的访问

  2. 在 API 请求中,您现在可以指定身份验证模式:

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

这里有更详细的文档


这些步骤已经过时,但仍然有效:

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

  1. 创建放大项目
amplify init
  1. 使用自定义安全配置添加身份验证:
amplify add auth

您想使用默认的身份验证和安全配置吗?

选择您要使用的身份验证/授权服务:(使用箭头键) 用户注册、登录、连接 AWS IAM 控件(启用图像或其他内容的每用户存储功能、分析等)

请为您的资源提供一个友好名称,用于在项目中标记此类别:YOURAPINAME

请输入您的身份池的名称。你的ID池名

允许未经身份验证的登录?(提供您可以通过 AWS IAM 控制的范围缩小的权限)

为其余问题选择默认值

  1. 添加api
amplify add api

选择Amazon Cognito 用户池作为授权类型。

  1. 创建 API
amplify push
  1. 在 AppSync API 控制面板设置中,将身份验证类型更改为AWS Identity and Access Management (IAM)

  2. aws.exports.js客户端应用程序中,更改aws_appsync_authenticationTypeAWS_IAM

  3. 在 Cognito 仪表板中,单击“管理身份池”并单击您的身份池。

  4. 单击“编辑身份池”以查看您的“未经身份验证的角色”和“经过身份验证的角色”

  5. 打开 IAM 控制台并找到步骤 8 中的“未经身份验证的角色”

  6. 单击“添加内联策略”

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos"
            ]
        }
    ]
}
  1. 打开 IAM 控制台并找到步骤 8 中的“经过身份验证的角色”

  2. 单击“添加内联策略”

{
    "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"
            ]
        }
    ]
}
  1. 在 index.js 中,添加以下代码:
import { Auth } from 'aws-amplify'
Auth.currentCredentials()
  .then(d => console.log('data: ', d))
  .catch(e => console.log('error: ', e))
  1. 您现在应该能够在注销时进行查询,并在登录时查询和创建变更。
如果您想访问登录用户的唯一身份以进行用户授权和细粒度访问控制,您可以$context.identity.cognitoIdentityId在解析器中访问

对任何遭受未授权(您的问题在于 AppSync)或 401(您的问题在于 IAM/Unauth 角色设置)的人的额外帮助。

我们将 COGNITO POOLS 作为我们的默认授权方。为了使用 AWS_IAM,您需要在 AppSync 中添加它,然后调整身份池的 UNAUTH 角色(如上所述)。但还有最后一个问题——

在匿名事务中涉及的查询/变异/模型上添加 @aws_iam 指令,这应该停止放大返回未授权错误,但是如果您也没有允许使用该指令的对象字段,您可能会看到更多错误返回.

希望这可以帮助。检查此处的文档以获取适合您的设置的正确指令。

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

我猜这个用例是让 unauth 和 auth 用户访问你的 graphql api,给他们不同的权限(例如 auth 用户可以进行更改,而 unauth 用户只是一些查询)。如果是这种情况,您需要在 AppSync API 上将 AWS IAM 配置为身份验证类型,还需要一个具有未授权和授权访问权限的 Amazon Cognito IdentityPool,并根据您的要求为这些角色配置 IAM 角色。

你可以在这里找到更详细的答案