前面对AWS Amplify进行一个基本的介绍，这篇文章介绍一下如何为React APP添加用户验证功能。
AWS Amplify系列教程：
- AWS Amplify系列之一：简介
- AWS Amplify系列之二：增加验证功能
- AWS Amplify系列之三：增加文件存储功能
- AWS Amplify系列之四：增加API功能
- AWS Amplify系列之五：自定制验证功能
- AWS Amplify教程之：Google OAuth登录
在Frontend项目中增加Amplify支持
安装/配置Amplify CLI
这一步的主要目的是打通Frontend APP和AWS资源的连接环节。
如果尚未安装Amplify，则运行以下命令进行安装和配置：
npm install -g @aws-amplify/cli
amplify configure关于后台backend的设置
进入AWS Amplify控制台，选择自己的APP，我这里是”amplify-demo”，单击”Backend environments” => “Get started”
就会看到AWS开始自动构建backend：
构建结束后可以看到这个提示：
单击“Local setup instructions”，复制相应的appID，然后回到前端APP对应的命令行并运行：
amplify init --appId YOUR_APP_ID (可以从Backend environemnt获取)基本上都选择默认值就可以（除认证方式选择Profile外）：
注意这里不要运行“Local setup instructions”建议的命令：
amplify pull --appId YOUR_APP_ID --envName staging增加认证功能
安装依赖包
yarn add aws-amplify @aws-amplify/ui-react增加认证功能
运行：
amplify add auth也选择默认配置就可以：
部署身份验证服务
运行以下命令创建所有AWS后台资源：
amplify push --y在React项目中支持身份验证
在index.js中添加：
import Amplify from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);更改App.js:
import './App.css';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
function App() {
return (
<div className="App">
<header>
<h1>已增加认证功能</h1>
</header>
<AmplifySignOut />
</div>
);
}
export default withAuthenticator(App);可以看到，最为关键的是withAuthenticator这个高阶组件(High Order Component - HOC)，它提供了用户注册，登录，密码重置等核心功能。
在本地测试一下：
yarn start访问本地3000端口就能看到App：
接下来可以注册用户并登录。可以在Cognito User Pool中查看并管理注册的用户。除此之外，我们还可以使用Auth类来自定义和实现管理用户的各种功能，包括signUp, signIn, signOut, confirmSignUp, forgotPassword和resendSignUp等操作。手工操作的方式就是灵活，你可以自由设计自己的UI，只需要在适当的时候调用Auth的相应方法就可以。
部署到AWS中：
git add .
git commit -m "added auth to react app"
git push origin master一个构建的问题及解决方案
需要注意，默认情况下构建会失败，这是因为aws-exports.js被添加到.gitignore因此不会被提交到GH。更多的讨论在这里：https://github.com/aws-amplify/docs/issues/503
有人提到一个最简单的解决方法：在.gitignore中删掉aws-exports.js。尽管aws-exports.js中不包含敏感信息，但个人不推荐这种方法。
确认一致的Amplify CLI版本
第一步：确保自己客户端的Amplify CLI和构建时Docker中使用的是同一个版本。最好都用最新版本。
首先，进入Amplify控制台 => Amplify APP，
然后选择Build settings => Build image settings，然后单击”Edit”
然后确保Amplify CLI为最新版本：
Amplify设置
进入Amplify控制台，取消选中：”Enable full-stack continuous deployments (CI/CI)”
关于Amplify使用的Role
同时还需要创建一个Role。进入IAM：
- Roles
- Create role
- 在选择Choose a use case时，选择Amplify -> Amplify-Backend Deployment
- 选择默认权限（AdministratorAccess-Amplify)
- Role name: 随便起一个，比如：Amplify-test-role
- Create role
然后在Ampliy App应用设置中使用这个Role：
终于部署成功了！
可以通过以下命令查看通过Amplify使用的服务/资源：
amplify status
查看项目中增加/更新的文件：
如何定制自己的Sign Out按钮
首先增加函数：
const signOut = async () => {
try {
await Auth.signOut();
} catch (err) {
console.log(err);
}
}然后在UI组件中，比如使用Material UI的按钮样式：
<Button variant="contained" color="primary" onClick={signOut}>
Sign Out
</Button>
