在 React Native 中使用 AWS

2018 年 3 月 5 日 ·阅读时长 10 分钟

AWS Mobile 高级技术产品经理

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) 代码与电子邮件或短信一起使用。目前支持的类别有：

Auth：提供凭证自动化。开箱即用的实现使用 AWS 凭证进行签名，并使用 Amazon Cognito 的 OIDC JWT token。支持 MFA 等常见功能。
Analytics：只需一行代码，即可在 Amazon Pinpoint 中跟踪已认证或未认证的用户。您可以根据需要扩展此功能，以获取自定义指标或属性。
API：利用 AWS Signature Version 4 以安全的方式提供与 RESTful API 的交互。API 模块在与 Amazon API Gateway 配合使用的无服务器基础设施上表现出色。
Storage：简化在 Amazon S3 中上传、下载和列出内容的命令。您还可以轻松地按用户将数据分组为公共或私有内容。
Caching：跨 Web 应用和 React Native 的 LRU 缓存接口，使用特定实现的持久化方式。
i18n 和 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 用户池进行用户注册和登录。此服务实现了 Secure Remote Password 协议，以此在认证尝试期间保护用户。如果您有兴趣阅读该协议的数学原理，您会注意到在计算密码验证器时必须使用大素数对原根进行运算才能生成一个群。在 React Native 环境中，JIT 是禁用的。这使得像这样的安全操作中的 BigInteger 计算性能较低。为了解决这个问题，我们在 Android 和 iOS 中发布了原生桥接，您可以链接到您的项目中。

npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js

我们也很高兴看到 Expo 团队已在其最新 SDK 中包含了此功能，这样您就可以在不 eject 的情况下使用 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 密钥快速入门。但是，当您部署到生产环境时，可以转换为使用 AWS Identity and Access Management (IAM) 或来自 Amazon Cognito 用户池的 OIDC token。您可以在解析器级别通过对类型设置策略来控制访问。您甚至可以在运行时使用逻辑检查进行细粒度访问控制检查，例如检测用户是否是特定数据库资源的所有者。还提供围绕检查组 membership 以执行解析器或访问单个数据库记录的功能。

为了帮助 React Native 开发者进一步了解这些技术，AWS AppSync 控制台首页提供了一个内置的 GraphQL 示例架构供您启动。此示例将部署 GraphQL 架构，配置数据库表，并自动为您连接查询、变更和订阅。还有一个可用的用于 AWS AppSync 的 React Native 示例，它利用了这个内置架构（以及一个 React 示例），使您能够在几分钟内启动客户端和云组件。

使用 Apollo Client 的 AWSAppSyncClient 可以轻松入门。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 的交互，还包括数据分页（包括加密 token）以及 Events 和 Comments 之间的类型关系。由于应用是使用 AWSAppSyncClient 配置的，数据会自动离线持久化，并在设备重新连接时同步。

您可以在此视频中深入了解其背后的客户端技术并观看 React Native 演示：这个视频。

反馈

这些库背后的团队渴望了解这些库和服务如何为您工作。他们也想听听我们还能做些什么来使您使用云服务进行 React 和 React Native 开发更加轻松。请在 GitHub 上联系 AWS Mobile 团队，获取 AWS Amplify 或 AWS AppSync 的支持。

AWS Amplify​

AWS AppSync​

反馈​

AWS Amplify

AWS AppSync

反馈