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

Sai*_*Akh 2 amazon-web-services reactjs aws-appsync aws-amplify

我很难弄清楚如何在使用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()
  }
});
Run Code Online (Sandbox Code Playgroud)

然后包装顶级App组件export default withAuthenticator(App);

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

我发现了一些使它在这里工作的提示,但仍然没有完整的解释。

Nad*_*bit 7

我们正在努力在更新版本的Amplify CLI中轻松实现此自动化。

同时,使用以下步骤:

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

  1. 创建一个放大项目
amplify init
Run Code Online (Sandbox Code Playgroud)
  1. 使用自定义安全配置添加身份验证:
amplify add auth
Run Code Online (Sandbox Code Playgroud)

您是否要使用默认的身份验证和安全配置?没有

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

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

请输入您的身份池的名称。YOURIDPOOLNAME

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

选择其余问题的默认值

  1. 添加API
amplify add api
Run Code Online (Sandbox Code Playgroud)

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

  1. 创建API
amplify push
Run Code Online (Sandbox Code Playgroud)
  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"
            ]
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)
  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"
            ]
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)
  1. 在index.js中,添加以下代码:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos"
            ]
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)
  1. 现在,您应该能够在注销时查询,并在登录时查询并创建突变。
如果您想访问登录用户的唯一身份以进行用户授权和精细的访问控制,则可以访问$context.identity.cognitoIdentityId解析器。

  • 从 Amplify 4.18.1 开始不起作用。```错误:没有为未经身份验证的访问提供 Cognito 身份池 App.vue:35 [警告] 10:21.110 AWSAppSyncRealTimeProvider - 确保凭证错误 没有为未经身份验证的访问提供 Cognito 身份池 2 ConsoleLogger.js:107 [警告] 10:21.111 AWSAppSyncRealTimeProvider - 确保凭证错误没有为未经身份验证的访问提供 Cognito 身份池 ConsoleLogger.js:107 错误:没有凭证 3vendor.js 第 347 行 &gt; eval:842:35``` ​ (2认同)