AWS Amplify
AWS Amplify 是面向前端和移动开发人员构建支持云的应用程序的 JavaScript 库。
AWS Amplify提供跨不同类别云操作的声明性且易于使用的界面。 AWS Amplify适用于任何基于JavaScript的前端工作流程，以及适用于移动开发人员的React Native。
我们的默认实施适用于Amazon Web Services（AWS），但AWS Amplify旨在为任何自定义后端或服务开放和插拔。
注意：
Amplify@3.x.x 有突破性的变化。请看下面的突破性变化：
AWS.credentials和AWS.config不再存在于Amplify JS的任何地方。- 这两个选项在第3版中将无法使用。您将无法使用和设置自己的凭证。关于 "如何迁移到使用Amplify提供的凭证" 的迁移计划将在GA推出后的未来几周内跟进。
如果你不能迁移到 aws-sdk-js-v3 或依赖 aws-sdk@2.x, ，你将需要单独导入它。
-
如果您在Amplify JS应用程序中使用导出的路径，(例如：
import from "@aws-amplify/analytics/lib/Analytics")，现在这将打破，不再支持。你将需要改用命名导入。:import { Analytics } from 'aws-amplify'; -
如果您使用类别作为
Amplify.<Category>，这将不再工作，我们建议导入您需要使用的类别：import { Auth } from 'aws-amplify';- 唯一的例外是使用
aws-amplify-angular包，我们仍然提供所有实例化的category。这在以后的版本中可能会发生变化。
- 唯一的例外是使用
- 对于
aws-amplify-react的Authenticator组件，你需要在你的应用程序中导入样式：import `@aws-amplify/ui/dist/style.css`;
特性 / APIs
- 身份验证 ：面向想要创建的开发人员的API和构建块用户认证体验。
- Analytics ：轻松收集应用的分析数据。 Google Analytics 数据包括您要在应用中跟踪的用户会话和其他自定义事件。
- API ：提出HTTP请求时提供简单的解决方案。它提供符合AWS Signature Version 4的自动轻量级签名过程。
- GraphQL客户端 ：互动使用您的GraphQL服务器或AWS AppSync API，易于使用和使用配置GraphQL客户端。
- 存储 ：提供一种简单的机制来管理您的用户内容应用程序在公共，受保护或私人存储桶中。
- 推送通知 ：允许您在应用中集成推送通知使用Amazon Pinpoint定位和广告系列管理支持。
- 互动 ：使用深度学习技术创建对话机器人。
- PubSub ：提供与基于云的面向消息的中间件的连接。
- 国际化 ：轻量级国际化解决方案。
- 缓存 ：为JavaScript开发人员提供通用LRU缓存以存储具有优先级和到期设置的数据。
访问我们的网站，了解有关AWS Amplify的更多信息。
安装
AWS Amplify可在 npm 上以 aws-amplify 包的形式提供
$ npm install aws-amplify --save
或者您可以单独安装要使用的模块：
$ npm install @aws-amplify/auth --saveReact
如果您正在开发 React 应用，则可以安装其他软件包 aws-amplify-react 包含高阶组件：
$ npm install aws-amplify --save $ npm install aws-amplify-react --saveAngular
如果您正在开发 Angular 应用，则可以安装其他软件包 aws-amplify-angular 。此软件包包含 Angular模块，其中包含提供商和组件：
$ npm install aws-amplify --save $ npm install aws-amplify-angular --save
访问我们的Web安装指南，开始构建您的网络应用。
Vue如果您正在开发 Vue 应用，则可以安装其他软件包 aws-amplify-vue 。此软件包包含Amplify库的 Vue插件以及Vue 组件：
$ npm install aws-amplify --save $ npm install aws-amplify-vue --save
访问我们的网络安装指南，开始构建您的Vue应用。
React Native对于React Native开发，请安装 aws-amplify
$ npm install aws-amplify --save
如果您正在开发 React Native 应用，则可以安装其他软件包 aws-amplify-react -native 包含高阶组件：
$ npm install aws-amplify-react-native --save
访问我们的 React Native安装指南，开始构建您的Web应用。
配置
在您的应用中的某个位置，最好是在根级别，使用您的资源配置Amplify。
使用AWS资源import Amplify from 'aws-amplify'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); // 或者您不想安装所有类别 import Amplify from '@aws-amplify/core'; import Auth from '@aws-amplify/auth'; import aws_exports from './aws-exports'; // 以这种方式，您只导入Auth并进行配置。 Amplify.configure(aws_exports);没有AWS
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});
例子
AWS Amplify支持许多类别方案，例如开发人员指南。下面是几个样本：
1.收集用户会话指标
默认情况下，AWS Amplify可以使用几行代码收集用户会话跟踪数据：
import Analytics from '@aws-amplify/analytics';
Analytics.record('myCustomEvent');
有关详细信息，请参阅我们的 Analytics开发人员指南。
2.将身份验证添加到您的应用
添加用户注册并使用 Auth class 可用的众多方法中的两种方法登录：
import Auth from '@aws-amplify/auth';
Auth.signUp({
username: 'AmandaB',
password: 'MyCoolPassword1!',
attributes: {
email: 'someemail@example.com',
},
});
Auth.signIn(username, password)
.then(success => console.log('successful sign in'))
.catch(err => console.log(err));
有关详细信息，请参阅我们的身份验证开发人员指南。
React / React Native
向React或React Native应用程序添加身份验证就像使用我们的 withAuthenticator 更高阶组件包装应用程序的主要组件一样简单。 AWS Amplify将为用户注册和登录等常见用例提供可自定义的UI。
//对于React
import { withAuthenticator } from 'aws-amplify-react';
// 对于 React Native
import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);
Angular
要向Angular应用添加身份验证，您还可以使用内置服务提供商和组件：
// app.component.ts
import { AmplifyService } from 'aws-amplify-angular';
...
constructor( public amplify:AmplifyService ) {
// handle auth state changes
this.amplify.authStateChange$
.subscribe(authState => {
this.authenticated = authState.state === 'signedIn';
if (!authState.user) {
this.user = null;
} else {
this.user = authState.user;
}
});
}
// app.component.html
<amplify-authenticator></amplify-authenticator>
有关Angular设置和使用的更多详细信息，请参阅我们的 Angular Guide 。
3.签署HTTP请求
当使用API模块时，AWS Amplify使用 AWS签名版本4 自动签署您的REST请求：
import API from '@aws-amplify/api';
let apiName = 'MyApiName';
let path = '/path';
let options = {
headers: {...} // OPTIONAL
}
API.get(apiName, path, options).then(response => {
// Add your code here
});
有关详细信息，请参阅我们的 API开发人员指南。
4.GraphQL API操作
要使用您的应用访问GraphQL API，您需要确保在应用配置中配置端点URL。
// configure a custom GraphQL endpoint
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});
// Or configure an AWS AppSync endpoint.
let myAppConfig = {
// ...
aws_appsync_graphqlEndpoint:
'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
aws_appsync_region: 'us-east-1',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
// ...
};
Amplify.configure(myAppConfig);
查询
import API, { graphqlOperation } from '@aws-amplify/api';
const ListEvents = `query ListEvents {
listEvents {
items {
id
where
description
}
}
}`;
const allEvents = await API.graphql(graphqlOperation(ListEvents));
突变
import API, { graphqlOperation } from '@aws-amplify/api';
const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where: String!, $description: String!) {
createEvent(name: $name, when: $when, where: $where, description: $description) {
id
name
where
when
description
}
}`;
const eventDetails = {
name: 'Party tonight!',
when: '8:00pm',
where: 'Ballroom',
description: 'Coming together as a team!',
};
const newEvent = await API.graphql(graphqlOperation(CreateEvent, eventDetails));
订阅
import API, { graphqlOperation } from '@aws-amplify/api';
const SubscribeToEventComments = `subscription subscribeToComments {
subscribeToComments {
commentId
content
}
}`;
const subscription = API.graphql(
graphqlOperation(SubscribeToEventComments)
).subscribe({
next: eventData => console.log(eventData),
});
有关详细信息，请参阅我们的 GraphQL API开发人员指南。
5.上传和下载公共或私人内容
AWS Amplify提供了一个易于使用的API，用于存储和从公共或私人存储文件夹中获取内容：
Storage.put(key, fileObj, { level: 'private' })
.then(result => console.log(result))
.catch(err => console.log(err));
// Store data with specifying its MIME type
Storage.put(key, fileObj, {
level: 'private',
contentType: 'text/plain',
})
.then(result => console.log(result))
.catch(err => console.log(err));
有关详细信息，请参阅我们的存储开发人员指南。