如何在AWS Amplify/AppSync React应用中正确处理未经身份验证的用户和请求? [英] How to properly handle unauthenticated users and requests in AWS Amplify/AppSync React apps?
问题描述
我很难弄清楚如何在使用AWS Amplify和AWS AppSync的React应用程序中处理未经身份验证的用户.似乎大多数文档建议使用 aws-amplify-react 中的 withAuthenticator HOC封装整个应用程序，但在现实世界中，这种情况很少见.
I am having a very hard time to figure out how to handle unauthenticated users in a React app which uses AWS Amplify and AWS AppSync. Seems like most docs suggest to wrap the whole app with withAuthenticator HOC from aws-amplify-react but in the real world it is a very rare case.
这就是我如何设置客户端与AppSync API对话
So here how I am setting a client to talk to the 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 组件使用Authenticator(App)导出默认值；
所有这些工作，用户点击了根URL并获得了登录视图.如前所述，在现实世界中这是非常罕见的情况.通常，根URL以及许多其他URL向未经身份验证的用户开放.如何使用AWS Amplify完成它?-没有文档，而不是tut:-(
All these works, a user hits the root URL and gets provided with a log in view. As it has been said above, it is a very rare case in the real world scenario. Usually, the root URL, as well as many others, is open to unauthenticated users. How to accomplish it with AWS Amplify? - no docs, not tuts :-(
我在此处，但仍没有完整的解释.
I found some hint how to make it work here, yet still no complete explanation.
推荐答案
-
请确保通过运行
amplify update auth并手动配置设置来更新身份验证设置，以启用经过身份验证的访问和未经身份验证的访问.
Make sure to update your authentication settings to enable both authenticated and unauthenticated access by running
amplify update authand configuring the settings manually.
在API请求中，您现在可以指定身份验证模式:
In an API request, you can now specify the auth mode:
const createdTodo = await API.graphql({
query: queries.createTodo,
variables: {input: todoDetails},
authMode: 'AWS_IAM'
});
这些步骤已过时，但仍然有效:
These steps are outdated but also still work:
使用以下步骤，您可以同时允许Authenticated&未经授权的对您的AWS AppSync API的访问:
Using the following steps, you can allow both Authenticated & Unauthenticated access to your AWS AppSync API:
- 创建一个放大项目
amplify init
- 使用自定义安全配置添加身份验证:
amplify add auth
您要使用默认的身份验证和安全性配置吗?否
选择要使用的身份验证/授权服务:(使用箭头键)与AWS IAM控件关联的用户注册，登录(启用图像或其他内容的每用户存储功能，Analytics(分析)等)
请为您的资源提供一个友好名称，该名称将用于在项目中标记此类别: YOURAPINAME
请输入您的身份库的名称. YOURIDPOOLNAME
允许未经身份验证的登录?(提供您可以通过AWS IAM控制的范围缩小权限)是
为其余问题选择默认值
- 添加api
amplify add api
选择 Amazon Cognito用户池作为授权类型.
- 创建API
amplify push
-
在AppSync API仪表板设置中，将身份验证类型更改为 AWS身份和访问管理(IAM)
在客户端应用程序的 aws.exports.js 中，将 aws_appsync_authenticationType 更改为 AWS_IAM
In aws.exports.js on the client app, change aws_appsync_authenticationType to AWS_IAM
在Cognito仪表板中，单击管理身份池"，然后单击确定".&点击您的身份池.
In the Cognito dashboard, click "Manage Identity Pools" & click on your identity pool.
点击编辑身份池"来查看您的未经身份验证的角色"；&认证角色"
Click "Edit Identity Pool" to see your "Unauthenticated role" & "Authenticated Role"
打开IAM控制台&找到未经身份验证的角色"；从第8步开始
Open the IAM console & find the "Unauthenticated role" from step 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步开始
Open the IAM console & find the "Authenticated role" from step 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))
- 您现在应该可以在注销后进行查询，&查询和登录时会创建突变.
这篇关于如何在AWS Amplify/AppSync React应用中正确处理未经身份验证的用户和请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
