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

2024-01-08

我很难弄清楚如何在使用 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 :-(

我发现了一些如何让它发挥作用的提示here https://github.com/aws-amplify/amplify-js/issues/711#issuecomment-414100476,但仍没有完整的解释。


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

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

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

这里有更详细的文档 https://docs.amplify.aws/lib/graphqlapi/authz/q/platform/js


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

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

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

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

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

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

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

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

为其余问题选择默认值

  1. 添加API
amplify add api

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

  1. 创建 API
amplify push
  1. 在 AppSync API 仪表板设置中,将身份验证类型更改为AWS 身份和访问管理 (IAM)

  2. In aws.exports.js在客户端应用程序上,更改aws_appsync_authenticationType to AWS_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. 您现在应该能够在注销时进行查询,在登录时查询和创建突变。
If you'd like to access the unique identity of the logged in user for user authorization & fine grained access control, you can access the $context.identity.cognitoIdentityId in the resolver.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 发生错误。", ExceptionMessage: "提供的 'HttpContent' 实例无效

    尝试将文件添加到 http 休息调用时出现此错误 responseJson 消息 发生错误 ExceptionMessage 提供了无效的 HttpContent 实例 它确实 正在使用 多部分 参数名称 内容 异常类型 System Ar
  • 每次在我的 AWS SQS 目标上推送通知时如何触发事件?

    我正在将 AWS SQS 用于 Amazon MWS 订单 API 每当有人从已将我添加为其开发人员的卖家帐户订购时 亚马逊都会将通知发送到我的 AWS SQS 应用程序 我可以从那里提取通知 但为此 我必须创建一个调度程序来提取通知 我是
  • 类型“never”上不存在属性“click”。 TS2339

    根据有关 TypeScript 此类错误的其他类似问题 关于问题 44147937 https stackoverflow com questions 44147937 property does not exist on type nev
  • 如何使用 jest 通过 Promise.all 设置多次提取测试

    我在测试中使用 jest 我正在使用 React 和 Redux 并且执行以下操作 function getData id notify return dispatch gt dispatch anotherFunction Promise
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • X-Amz-Expires 是向 AWS 发出的请求所需的标头/参数吗?

    Is X Amz Expires必需的标头 参数 官方文档不一致 用在一些例子 http docs aws amazon com AmazonS3 latest API sigv4 query string auth html 虽然不在ot
  • 将 sass 变量导入 gatsby 组件中引用的第二个 Sass 文件

    我正在使用 Gatsby 构建一个静态站点项目 我已经成功安装了 gatsby sass 插件并让 sass 正常工作 但是 我无法将自定义 sass 变量文件正确导入到其他组件 sass 文件中 下面是我的文件夹结构 src compon
  • 在社交媒体上分享 Reactjs 链接时,react-helmet 中的元标记不显示

    我有一个在客户端运行reactjs的项目 在后端运行nodejs express 我实现了react helmet来更新索引之外的路线的标题和元标记 例如 用户查看帖子 viewpost q POSTID 然后客户做了一个GET reque
  • AWS Lambda 提前结束(没有任何显式返回或回调)

    我在放入 AWS Lambda 中的一些 Node js 代码时遇到了一些问题 我需要进行几个异步调用 虽然第一个调用的行为符合我的预期 但 lambda 函数在第二个调用完成之前终止 返回值为 null 这让我认为 lambda 正在执行
  • 你如何在react-native中实现捏合缩放?

    我一直在研究 PanResponder 我当前的工作假设是 我将检测是否有两个触摸正在向外移动 如果是 则增加元素大小onPanResponderMove功能 这似乎是一种混乱的方法 有没有更顺畅的方法呢 如果您只需要简单的捏缩放功能 只需
  • 在 ec2 上托管 Rails

    我想将 Rails 部署到亚马逊 ec2 上 我看过 poolparty 和 ec2onrails 但似乎都不再维护了 人们用什么来做到这一点 都是自制的木偶和卡皮斯特拉诺 还是有一个项目可以让我继续下去 我可以推荐两个项目 如果您有一个
  • AWS Amazon - 登录循环卡住

    我已经使用 AWS 亚马逊几年了 但是 突然当我登录时 我进入了此验证部分 他们将验证码发送到我的电子邮件 我收到了该代码 因此 我输入收到的代码 最终返回登录页面 所以我登录后 同样的事情一遍又一遍地发生 我无法进入我的仪表板 它只是不断
  • 在 Azure 上运行 .NET 应用程序

    我拥有在 Amazon EC2 上运行应用程序的丰富经验 它需要一台低端服务器 我目前为该服务器支付大约 90 美元 月 是的 我知道我并不真正需要可扩展性 但我仍然使用 EC2 我想知道将这个纯粹的 NET 应用程序迁移到 Microso
  • React router v6 和路由内页面的相关链接

    您好 我正在尝试使用 React Router 将项目更新到 v6 我了解了基础知识 但在相关链接方面遇到了困难 我们有一个页面 通过 id 呈现给定项目的参考文档 该文档可以使用同级 ID 链接到其他 同级 材料 换句话说 用户可以在文档
  • 如何使用 React 获取查询字符串?

    我试图从网址获取 query 123 http localhost 3000 query 123 http localhost 3000 query 123 Tried App js const search this props loca
  • 使用无服务器访问 SSM 变量

    我想用无服务器变量中的 SSM 参数 https serverless com blog serverless v1 22 0 按照文档 我运行了以下命令 aws ssm put parameter name foo value bar t
  • 通过 boto3 承担 IAM 用户角色时访问被拒绝

    Issue 我有一个 IAM 用户和一个 IAM 角色 我正在尝试将 IAM 用户配置为有权使用 STS 承担 IAM 角色 我不确定为什么收到 访问被拒绝 错误 Details IAM 角色 arn aws iam 123456789 r
  • 有什么方法可以复制 div 的渲染 HTML 吗?

    我正在开发电子邮件签名生成器 我想通过按按钮复制最终签名 而不是手动选择签名并将其复制到剪贴板 这意味着我需要它们的图像 文本和样式 我尝试了几种变体 包括 w3schools 的变体 但没有成功 其中一些只是复制文本 但没有样式 例子 h
  • 如何包装内在组件,保留大部分 Props?

    我想用我自己的 React 功能组件包装一个标准按钮 但我希望新组件的用户能够设置 几乎所有底层按钮的道具 当然 我想保持正确的打字 所以如果 WrappedButton 包含一个button then

随机推荐