在 React Native 中使用 AWS
AWS 在技术行业中以云服务提供商而闻名。这些服务包括计算、存储和数据库技术，以及完全托管的无服务器产品。AWS Mobile 团队一直与客户和 JavaScript 生态系统的成员密切合作，以使云连接的移动和 Web 应用程序更安全、可扩展且更易于开发和部署。我们从一个 完整的入门套件 开始，但最近又有一些新的进展。
这篇博文讨论了一些对 React 和 React Native 开发者有趣的事情
- AWS Amplify，一个用于使用云服务的 JavaScript 应用程序的声明式库
- AWS AppSync，一个具有离线和实时功能的完全托管 GraphQL 服务
AWS Amplify
使用 Create React Native App 和 Expo 等工具可以非常容易地引导 React Native 应用程序。但是，当您尝试将用例与基础设施服务匹配时，将它们连接到云端可能会充满挑战。例如，您的 React Native 应用程序可能需要上传照片。这些照片是否应该按用户进行保护？这可能意味着您需要某种注册或登录过程。您想要使用自己的用户目录还是使用社交媒体提供商？也许您的应用程序还需要在用户登录后调用具有自定义业务逻辑的 API。
为了帮助 JavaScript 开发者解决这些问题，我们发布了一个名为 AWS Amplify 的库。该设计被分解为“类别”的任务，而不是 AWS 特定的实现。例如，如果您希望用户注册、登录，然后上传私人照片，您只需将 Auth 和 Storage 类别引入您的应用程序即可
import { Auth } from 'aws-amplify';
Auth.signIn(username, password)
.then(user => console.log(user))
.catch(err => console.log(err));
Auth.confirmSignIn(user, code)
.then(data => console.log(data))
.catch(err => console.log(err));
在上面的代码中，您可以看到 Amplify 帮助您完成的一些常见任务的示例，例如将多因素身份验证 (MFA) 代码与电子邮件或 SMS 一起使用。今天支持的类别有
- Auth：提供凭证自动化。开箱即用的实现使用 AWS 凭证进行签名，以及来自 Amazon Cognito 的 OIDC JWT 令牌。支持常见的功能，例如 MFA 功能。
- Analytics：只需一行代码，即可在 Amazon Pinpoint 中获取经过身份验证或未经身份验证的用户的跟踪信息。根据您的喜好，扩展此功能以实现自定义指标或属性。
- API：以安全的方式提供与 RESTful API 的交互，利用 AWS Signature Version 4。API 模块非常适合使用 Amazon API Gateway 的无服务器基础设施。
- Storage：简化的命令，用于在 Amazon S3 中上传、下载和列出内容。您还可以轻松地按用户将数据分组到公共或私有内容中。
- Caching：跨 Web 应用和 React Native 的 LRU 缓存接口，使用特定于实现的持久性。
- i18n and Logging：提供国际化和本地化功能，以及调试和日志记录功能。
Amplify 的优点之一是它在设计中编码了针对您的特定编程环境的“最佳实践”。例如，我们与客户和 React Native 开发者合作发现的一件事是，在开发过程中为快速完成工作而采取的捷径会一直延续到生产堆栈中。这些可能会损害可扩展性或安全性，并迫使基础设施重新架构和代码重构。
我们如何帮助开发者避免这种情况的一个例子是 使用 AWS Lambda 的无服务器参考架构。这些架构向您展示了在使用 Amazon API Gateway 和 AWS Lambda 一起构建后端时的最佳实践。此模式被编码到 Amplify 的 API 类别中。您可以使用此模式与多个不同的 REST 端点进行交互，并将标头一直传递到您的 Lambda 函数以实现自定义业务逻辑。我们还发布了一个 AWS Mobile CLI，用于使用这些功能引导新的或现有的 React Native 项目。要开始使用，只需通过 npm 安装，然后按照配置提示进行操作即可
npm install --global awsmobile-cli
awsmobile configure
特定于移动生态系统的编码最佳实践的另一个示例是密码安全。默认的 Auth 类别实现利用 Amazon Cognito 用户池进行用户注册和登录。此服务实现了 安全远程密码协议，作为在身份验证尝试期间保护用户的一种方式。如果您有兴趣通读 协议的数学原理，您会注意到在通过原始根计算密码验证器以生成组时，必须使用一个大的素数。在 React Native 环境中，JIT 已禁用。这使得用于此类安全操作的 BigInteger 计算性能较低。为了解决这个问题，我们在 Android 和 iOS 中发布了原生桥接，您可以在项目中链接这些桥接
npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js
我们也很高兴看到 Expo 团队已将此功能 包含在其最新的 SDK 中，以便您可以在不弹出的情况下使用 Amplify。
最后，针对 React Native（和 React）开发，Amplify 包含 高阶组件 (HOC)，用于轻松包装诸如注册和登录到您的应用程序的功能
import Amplify, { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
class App extends React.Component {
...
}
export default withAuthenticator(App);
底层组件也以 <Authenticator /> 的形式提供，这使您可以完全控制自定义 UI。它还为您提供了一些关于管理用户状态的属性，例如用户是否已登录或正在等待 MFA 确认，以及您可以在状态更改时触发的回调。
同样，您会找到通用的 React 组件，您可以将其用于不同的用例。您可以根据您的需求自定义这些组件，例如，在 Storage 模块中显示来自 Amazon S3 的所有私人图像
<S3Album
level="private"
path={path}
filter={(item) => /jpg/i.test(item.path)}/>
您可以通过 props 控制组件的许多功能，如前所示，包括公共或私有存储选项。甚至还有在用户与某些 UI 组件交互时自动收集分析的功能
return <S3Album track/>
AWS Amplify 倾向于约定优于配置的开发风格，在全局初始化例程或类别级别进行初始化。最快的入门方法是使用 aws-exports 文件。但是，开发者也可以使用具有现有资源的库。
要深入了解其理念并观看完整演示，请查看来自 AWS re:Invent 的视频。
AWS AppSync
在 AWS Amplify 发布后不久，我们还发布了 AWS AppSync。这是一个完全托管的 GraphQL 服务，具有离线和实时功能。虽然您可以在不同的客户端编程语言（包括原生 Android 和 iOS）中使用 GraphQL，但它在 React Native 开发者中非常受欢迎。这是因为数据模型非常适合单向数据流和组件层次结构。
AWS AppSync 使您能够连接到您自己的 AWS 账户中的资源，这意味着您拥有并控制您的数据。这是通过使用数据源来完成的，该服务支持 Amazon DynamoDB、Amazon Elasticsearch 和 AWS Lambda。这使您能够将功能（例如 NoSQL 和全文搜索）组合到单个 GraphQL API 中作为模式。这使您可以混合和匹配数据源。AppSync 服务还可以 从模式进行配置，因此如果您不熟悉 AWS 服务，您可以编写 GraphQL SDL，单击一个按钮，您就可以自动启动并运行。
AWS AppSync 中的实时功能通过 GraphQL 订阅和众所周知的基于事件的模式 进行控制。由于 AWS AppSync 中的订阅是 在模式上通过 GraphQL 指令进行控制 的，并且模式可以使用任何数据源，这意味着您可以从 Amazon DynamoDB 和 Amazon Elasticsearch Service 的数据库操作或来自 AWS Lambda 的基础设施的其他部分触发通知。
以类似于 AWS Amplify 的方式，您可以在 AWS AppSync 中对您的 GraphQL API 使用 企业安全功能。该服务让您可以使用 API 密钥快速入门。但是，当您推出到生产环境时，它可以转换为使用来自 Amazon Cognito 用户池的 AWS Identity and Access Management (IAM) 或 OIDC 令牌。您可以使用类型策略在解析器级别控制访问。您甚至可以使用逻辑检查来进行 细粒度访问控制 运行时检查，例如检测用户是否是特定数据库资源的所有者。还有一些关于检查组成员身份以执行解析器或单个数据库记录访问的功能。
为了帮助 React Native 开发者了解有关这些技术的更多信息，AWS AppSync 控制台主页上提供了一个 内置的 GraphQL 示例模式，您可以启动它。此示例部署了一个 GraphQL 模式，配置了数据库表，并自动为您连接查询、mutation 和订阅。还有一个正在运行的 AWS AppSync 的 React Native 示例，它利用了这个内置模式（以及一个 React 示例），使您可以在几分钟内运行您的客户端和云组件。
当您使用 AWSAppSyncClient 时，入门非常简单，它可以插入到 Apollo Client 中。AWSAppSyncClient 处理 GraphQL API 的安全性和签名、离线功能以及订阅握手和协商过程
import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
const client = new AWSAppSyncClient({
url: awsconfig.graphqlEndpoint,
region: awsconfig.region,
auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey}
});
AppSync 控制台提供了一个配置文件供下载，其中包含您的 GraphQL 端点、AWS 区域和 API 密钥。然后，您可以将客户端与 React Apollo 一起使用
const WithProvider = () => (
<ApolloProvider client={client}>
<Rehydrated>
<App />
</Rehydrated>
</ApolloProvider>
);
此时，您可以使用标准的 GraphQL 查询
query ListEvents {
listEvents{
items{
__typename
id
name
where
when
description
comments{
__typename
items{
__typename
eventId
commentId
content
createdAt
}
nextToken
}
}
}
}
上面的示例展示了一个使用 AppSync 提供的示例应用模式的查询。它不仅展示了与 DynamoDB 的交互，还包括数据分页（包括加密令牌）以及 Events 和 Comments 之间的类型关系。由于该应用配置了 AWSAppSyncClient，因此数据会自动离线持久化，并在设备重新连接时同步。
您可以在 此视频中 深入了解此背后的客户端技术以及 React Native 演示。
反馈
这些库背后的团队渴望听到这些库和服务如何为您工作。他们还想了解我们还能做些什么来使 React 和 React Native 与云服务的开发对您来说更容易。在 GitHub 上联系 AWS Mobile 团队，获取 AWS Amplify 或 AWS AppSync 的信息。
