{"id":39116,"date":"2023-01-27T18:39:56","date_gmt":"2024-02-20T02:10:24","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/"},"modified":"2024-04-29T11:46:02","modified_gmt":"2024-04-29T03:46:02","slug":"%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/","title":{"rendered":"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01"},"content":{"rendered":"<p>\u6211\u60f3\u5c1d\u8bd5\u4f7f\u7528\u8ba4\u8bc1\u670d\u52a1AWS Cognito\uff0c\u4f46\u662f\u6211\u4e0d\u592a\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\uff0c\u4e0d\u77e5\u9053\u8be5\u5982\u4f55\u5165\u624b&#8230;<br \/>\n\u9488\u5bf9\u8fd9\u79cd\u60c5\u51b5\uff0c\u6211\u63d0\u4f9b\u4e86\u4e00\u4e2a\u4f7f\u7528Angular\u4e3a\u57fa\u7840\u7684\u539f\u578b\u5e94\u7528\uff0c\u8ba9\u5927\u5bb6\u53ef\u4ee5\u5148\u8bd5\u8bd5\u770b\u4e00\u4e0b\uff01<\/p>\n<p>\u65e2\u7136\u6211\u4eec\u6709\u673a\u4f1a\uff0c\u5c31\u5c3d\u91cf\u4f7f\u7528\u6700\u65b0\u7248\u672c\uff0c\u5e76\u5c1d\u8bd5\u5c06PackageManager\u8f6c\u6362\u4e3ayarn\uff01<\/p>\n<h2>\u51c6\u5907<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">AWS\u30a2\u30ab\u30a6\u30f3\u30c8<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Node.js\u306fnodebrew\u3067\u7ba1\u7406<\/ul>\n<h2>\u5b89\u88c5 yarn<\/h2>\n<p>\u4f7f\u7528Homebrew\u8fdb\u884c\u5b89\u88c5<br \/>\n\u8fd9\u65f6\u5019\uff0c\u5982\u679c\u6ca1\u6709\u4f7f\u7528&#8211;ignore-dependencies\u9009\u9879\uff0cyarn\u5c06\u5b89\u88c5node\uff0c\u8fd9\u5c06\u5bfc\u81f4\u65e0\u6cd5\u4f7f\u7528\u7531nodebrew\u7ba1\u7406\u7684node\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>brew <span class=\"nb\">install <\/span>yarn <span class=\"nt\">--ignore-dependencies<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn <span class=\"nt\">-v<\/span>\r\n1.15.2\r\n<\/code><\/pre>\n<h2>\u53ef\u4ee5\u5b89\u88c5Node.js\u3002<\/h2>\n<p>\u6211\u4eec\u5c06\u4f7f\u7528nodebrew\u8fdb\u884c\u5b89\u88c5\u3002<br \/>\n\u8fd9\u6b21\u5c06\u4f7f\u7528v12.3.1\u7248\u672c\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>nodebrew install-binary v12.3.1\r\nFetching: https:\/\/nodejs.org\/dist\/v12.3.1\/node-v12.3.1-darwin-x64.tar.gz\r\n<span class=\"c\">######################################################################## 100.0%<\/span>\r\nInstalled successfully\r\n\r\n<span class=\"nv\">$ <\/span>nodebrew use v12.3.1\r\nuse v12.3.1\r\n<\/code><\/pre>\n<h2>\u5b89\u88c5Angular CLI<\/h2>\n<p>\u4f7f\u7528Yarn\u5b89\u88c5Angular CLI\u65f6\uff0c\u5c06\u5176\u6307\u5b9a\u4e3a\u6700\u65b0\u7248\u672c\uff0c\u53738.0.0\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn global add @angular\/cli@latest\r\nyarn global v1.15.2\r\n<span class=\"o\">[<\/span>1\/4] ?  Resolving packages...\r\n<span class=\"o\">[<\/span>2\/4] ?  Fetching packages...\r\n<span class=\"o\">[<\/span>3\/4] ?  Linking dependencies...\r\n<span class=\"o\">[<\/span>4\/4] ?  Building fresh packages...\r\nsuccess Installed <span class=\"s2\">\"@angular\/cli@8.0.0\"<\/span> with binaries:\r\n      - ng\r\n\u2728  Done <span class=\"k\">in <\/span>6.27s.\r\n<\/code><\/pre>\n<h3>\u5c06\u8f6f\u4ef6\u5305\u7ba1\u7406\u5668\u66f4\u6539\u4e3ayarn\u3002<\/h3>\n<p>\u5c06Angular CLI\u7684\u8f6f\u4ef6\u5305\u7ba1\u7406\u5668\u5207\u6362\u5230yarn\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>ng config <span class=\"nt\">-g<\/span> cli.packageManager yarn\r\n<\/code><\/pre>\n<h2>\u521b\u5efaAngular\u9879\u76ee<\/h2>\n<p>\u6211\u8981\u521b\u5efa\u4e00\u4e2a\u6837\u4f8b\u9879\u76ee\uff0c\u6240\u4ee5\u8bf7\u79fb\u52a8\u5230\u9879\u76ee\u76ee\u5f55\u4e0b\u5e76\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<br \/>\n\u4f60\u60f3\u8981\u4f7f\u7528\u54ea\u79cd\u6837\u5f0f\u8868\u683c\u5f0f\uff1f\u5728\u9009\u62e9\u6837\u5f0f\u8868\u683c\u5f0f\u65f6\uff0c\u4f60\u53ef\u4ee5\u9009\u62e9CSS\u7684\u7c7b\u578b\uff0c\u8fd9\u6b21\u6211\u4eec\u9009\u62e9Sass\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>ng new angular-amplify-auth <span class=\"nt\">--routing<\/span>\r\n? Which stylesheet format would you like to use? Sass   <span class=\"o\">[<\/span> http:\/\/sass-lang.com\/documentation\/file.INDENTED_SYNTAX.html       <span class=\"o\">]<\/span>\r\nCREATE angular-amplify-auth\/README.md <span class=\"o\">(<\/span>1035 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/.editorconfig <span class=\"o\">(<\/span>246 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/.gitignore <span class=\"o\">(<\/span>629 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/angular.json <span class=\"o\">(<\/span>3599 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/package.json <span class=\"o\">(<\/span>1293 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/tsconfig.json <span class=\"o\">(<\/span>438 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/tslint.json <span class=\"o\">(<\/span>1985 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/browserslist <span class=\"o\">(<\/span>429 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/karma.conf.js <span class=\"o\">(<\/span>1032 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/tsconfig.app.json <span class=\"o\">(<\/span>210 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/tsconfig.spec.json <span class=\"o\">(<\/span>270 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/favicon.ico <span class=\"o\">(<\/span>5430 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/index.html <span class=\"o\">(<\/span>305 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/main.ts <span class=\"o\">(<\/span>372 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/polyfills.ts <span class=\"o\">(<\/span>2838 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/styles.sass <span class=\"o\">(<\/span>80 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/test.ts <span class=\"o\">(<\/span>642 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/assets\/.gitkeep <span class=\"o\">(<\/span>0 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/environments\/environment.prod.ts <span class=\"o\">(<\/span>51 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/environments\/environment.ts <span class=\"o\">(<\/span>662 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app-routing.module.ts <span class=\"o\">(<\/span>245 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app.module.ts <span class=\"o\">(<\/span>393 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app.component.sass <span class=\"o\">(<\/span>0 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app.component.html <span class=\"o\">(<\/span>1152 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app.component.spec.ts <span class=\"o\">(<\/span>1137 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/src\/app\/app.component.ts <span class=\"o\">(<\/span>225 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/e2e\/protractor.conf.js <span class=\"o\">(<\/span>810 bytes<span class=\"o\">)<\/span>\r\nCREATE angular-amplify-auth\/e2e\/tsconfig.json <span class=\"o\">(<\/span>214 bytes<span class=\"o\">)<\/span>\r\n    Successfully initialized git.    \r\n<\/code><\/pre>\n<p>\u5728\u9879\u76ee\u4e2d\u786e\u8ba4Angular\u7684\u7248\u672c<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn ng v\r\nyarn run v1.15.2\r\n<span class=\"nv\">$ <\/span>ng v\r\n\r\n     _                      _                 ____ _     ___\r\n    \/ <span class=\"se\">\\ <\/span>  _ __   __ _ _   _| | __ _ _ __     \/ ___| |   |_ _|\r\n   \/ \u25b3 <span class=\"se\">\\ <\/span>| <span class=\"s1\">'_ \\ \/ _` | | | | |\/ _` | '<\/span>__|   | |   | |    | |\r\n  \/ ___ <span class=\"se\">\\|<\/span> | | | <span class=\"o\">(<\/span>_| | |_| | | <span class=\"o\">(<\/span>_| | |      | |___| |___ | |\r\n \/_\/   <span class=\"se\">\\_\\_<\/span>| |_|<span class=\"se\">\\_<\/span>_, |<span class=\"se\">\\_<\/span>_,_|_|<span class=\"se\">\\_<\/span>_,_|_|       <span class=\"se\">\\_<\/span>___|_____|___|\r\n                |___\/\r\n\r\n\r\nAngular CLI: 8.0.0\r\nNode: 12.3.1\r\nOS: darwin x64\r\nAngular: 8.0.0\r\n... animations, cli, common, compiler, compiler-cli, core, forms\r\n... language-service, platform-browser, platform-browser-dynamic\r\n... router\r\n\r\nPackage                           Version\r\n<span class=\"nt\">-----------------------------------------------------------<\/span>\r\n@angular-devkit\/architect         0.800.0\r\n@angular-devkit\/build-angular     0.800.0\r\n@angular-devkit\/build-optimizer   0.800.0\r\n@angular-devkit\/build-webpack     0.800.0\r\n@angular-devkit\/core              8.0.0\r\n@angular-devkit\/schematics        8.0.0\r\n@ngtools\/webpack                  8.0.0\r\n@schematics\/angular               8.0.0\r\n@schematics\/update                0.800.0\r\nrxjs                              6.4.0\r\ntypescript                        3.4.5\r\nwebpack                           4.30.0\r\n\r\n\u2728  Done <span class=\"k\">in <\/span>0.75s.\r\n<\/code><\/pre>\n<h2>\u5b89\u88c5 Amplify CLI\u3002<\/h2>\n<p>\u867d\u7136\u53ef\u4ee5\u5168\u5c40\u5b89\u88c5Amplify CLI\uff0c\u4f46\u662f\u8003\u8651\u5230\u6ca1\u6709\u9879\u76ee\u7684\u60c5\u51b5\u4e0b\u4f7f\u7528\u5b83\u7684\u673a\u4f1a\u6bd4\u8f83\u5c11\uff0c\u6240\u4ee5\u6211\u4eec\u5c06\u5176\u5b89\u88c5\u5728\u9879\u76ee\u5185\u3002<br \/>\n\u56e0\u6b64\uff0c\u6211\u4eec\u8981\u4f7f\u7528\u9879\u76ee\u5185\u7684yarn\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn add @aws-amplify\/cli\r\n<span class=\"o\">[<\/span>1\/4] ?  Resolving packages...\r\nwarning @aws-amplify\/cli <span class=\"o\">&gt;<\/span> amplify-category-function <span class=\"o\">&gt;<\/span> grunt-aws-lambda <span class=\"o\">&gt;<\/span> glob <span class=\"o\">&gt;<\/span> minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue\r\n\r\n\u3000~~~~~~~~~~[\u9577\u3044\u306e\u3067\u5272\u611b]\r\n\r\n<span class=\"o\">[<\/span>2\/4] ?  Fetching packages...\r\n<span class=\"o\">[<\/span>3\/4] ?  Linking dependencies...\r\n<span class=\"o\">[<\/span>4\/4] ?  Building fresh packages...\r\n\r\nsuccess Saved lockfile.\r\nsuccess Saved 447 new dependencies.\r\ninfo Direct dependencies\r\n\u2514\u2500 @aws-amplify\/cli@1.6.11\r\ninfo All dependencies\r\n\r\n\u3000~~~~~~~~~~[\u9577\u3044\u306e\u3067\u5272\u611b]\r\n\r\n\u2728  Done <span class=\"k\">in <\/span>45.19s.\r\n<\/code><\/pre>\n<p>\u7531\u4e8e\u51fa\u73b0\u4e86\u51e0\u884c\u8b66\u544a\u548c\u5927\u91cf\u7684\u4f9d\u8d56\u9879\uff0c\u6b64\u5904\u7701\u7565\u663e\u793a\u3002<\/p>\n<h3>\u5c06yarn\u811a\u672c\u6dfb\u52a0<\/h3>\n<p>\u5c06amplify\u7684\u8c03\u7528\u547d\u4ee4\u6dfb\u52a0\u5230package.json<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"angular-amplify-auth\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"version\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"0.0.0\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"ng\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng serve\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"build\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng build\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"test\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng test\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"lint\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng lint\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"e2e\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng e2e\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"amplify\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"amplify\"<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<h2>\u5b89\u88ddAmplify<\/h2>\n<p>\u5b89\u88c5Amplify\u7684Package\u548c\u4e0eAngular\u914d\u5408\u4f7f\u7528\u7684Package\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn add aws-amplify aws-amplify-angular\r\nyarn add v1.15.2\r\n<span class=\"o\">[<\/span>1\/4] ?  Resolving packages...\r\n<span class=\"o\">[<\/span>2\/4] ?  Fetching packages...\r\nwarning Pattern <span class=\"o\">[<\/span><span class=\"s2\">\"proxy-agent@latest\"<\/span><span class=\"o\">]<\/span> is trying to unpack <span class=\"k\">in <\/span>the same destination <span class=\"s2\">\"\/Users\/hisayuki\/Library\/Caches\/Yarn\/v4\/npm-proxy-agent-3.1.0-3cf86ee911c94874de4359f37efd9de25157c113\/node_modules\/proxy-agent\"<\/span> as pattern <span class=\"o\">[<\/span><span class=\"s2\">\"proxy-agent@^3.0.3\"<\/span><span class=\"o\">]<\/span><span class=\"nb\">.<\/span> This could result <span class=\"k\">in <\/span>non-deterministic behavior, skipping.\r\n<span class=\"o\">[<\/span>3\/4] ?  Linking dependencies...\r\n<span class=\"o\">[<\/span>4\/4] ?  Building fresh packages...\r\nsuccess Saved lockfile.\r\nsuccess Saved 13 new dependencies.\r\ninfo Direct dependencies\r\n\u251c\u2500 aws-amplify-angular@3.0.3\r\n\u2514\u2500 aws-amplify@1.1.28\r\ninfo All dependencies\r\n\u251c\u2500 @aws-amplify\/analytics@1.2.16\r\n\u251c\u2500 @aws-amplify\/api@1.0.35\r\n\u251c\u2500 @aws-amplify\/interactions@1.0.30\r\n\u251c\u2500 @aws-amplify\/pubsub@1.0.28\r\n\u251c\u2500 @aws-amplify\/storage@1.0.30\r\n\u251c\u2500 @aws-amplify\/xr@0.1.17\r\n\u251c\u2500 @types\/lodash@4.14.132\r\n\u251c\u2500 amazon-cognito-identity-js@3.0.12\r\n\u251c\u2500 aws-amplify-angular@3.0.3\r\n\u251c\u2500 aws-amplify@1.1.28\r\n\u251c\u2500 axios@0.17.1\r\n\u251c\u2500 js-cookie@2.2.0\r\n\u2514\u2500 rxjs-compat@6.5.2\r\n\u2728  Done <span class=\"k\">in <\/span>16.64s.\r\n<\/code><\/pre>\n<p>\u6700\u7ec8\u7684package.json\u5728\u8fd9\u91cc\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"angular-amplify-auth\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"version\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"0.0.0\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"ng\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng serve\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"build\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng build\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"test\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng test\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"lint\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng lint\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"e2e\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"ng e2e\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"amplify\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"amplify\"<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"private\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"dependencies\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"@angular\/animations\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/common\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/compiler\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/core\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/forms\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/platform-browser\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/platform-browser-dynamic\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/router\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@aws-amplify\/cli\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^1.6.11\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"aws-amplify\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^1.1.28\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"aws-amplify-angular\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^3.0.3\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"rxjs\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~6.4.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"tslib\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^1.9.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"zone.js\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~0.9.1\"<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"devDependencies\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"@angular-devkit\/build-angular\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~0.800.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/cli\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/compiler-cli\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@angular\/language-service\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@types\/jasmine\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~3.3.8\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@types\/jasminewd2\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~2.0.3\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@types\/node\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~8.9.4\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"codelyzer\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^5.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"jasmine-core\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~3.4.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"jasmine-spec-reporter\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~4.2.1\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"karma\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~4.1.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"karma-chrome-launcher\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~2.2.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"karma-coverage-istanbul-reporter\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~2.0.1\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"karma-jasmine\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~2.0.1\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"karma-jasmine-html-reporter\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^1.4.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"protractor\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~5.4.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"ts-node\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~7.0.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"tslint\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~5.15.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"typescript\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"~3.4.3\"<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u5c06Amplify CLI\u914d\u7f6e\u4e3a\u8bbf\u95eeAWS<\/h2>\n<p>\u6211\u5c06\u521b\u5efa\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8eAmplify CLI\u7684IAM\u7528\u6237\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn amplify configure\r\nyarn run v1.15.2\r\n<span class=\"nv\">$ <\/span>amplify configure\r\nFollow these steps to <span class=\"nb\">set <\/span>up access to your AWS account:\r\n\r\nSign <span class=\"k\">in <\/span>to your AWS administrator account:\r\nhttps:\/\/console.aws.amazon.com\/\r\nPress Enter to <span class=\"k\">continue<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u6b64\u6b65\u9aa4\uff0c\u60a8\u5c06\u8fdb\u5165AWS\u63a7\u5236\u53f0\u767b\u5f55\u754c\u9762\uff0c\u5e76\u767b\u5f55\u5230\u60a8\u60f3\u5728\u672c\u6b21\u4f7f\u7528Amplify\u7684\u4e2a\u4eba\u8d26\u6237\u3002<br \/>\n\u987a\u4fbf\u63d0\u4e00\u4e0b\uff0c\u5982\u679c\u60a8\u5728\u767b\u5f55\u540e\u5207\u6362\u5230\u53e6\u4e00\u4e2a\u8d26\u6237\uff0c\u5c06\u5e94\u7528\u5207\u6362\u540e\u7684\u8d26\u6237\u3002<\/p>\n<p>\u5f53\u4f60\u5728Amplify\u4e0a\u60f3\u4f7f\u7528\u7279\u5b9a\u8d26\u53f7\u7684\u63a7\u5236\u53f0\u754c\u9762\u65f6\uff0c\u5728CLI\u754c\u9762\u4e0a\u6309\u4e0b\u56de\u8f66\u3002<\/p>\n<pre class=\"post-pre\"><code>Specify the AWS Region\r\n? region:  ap-northeast-1\r\nSpecify the username of the new IAM user:\r\n? user name:  amplify-D30bS\r\nComplete the user creation using the AWS console\r\nhttps:\/\/console.aws.amazon.com\/iam\/home?region<span class=\"o\">=<\/span>undefined#\/users<span class=\"nv\">$new<\/span>?step<span class=\"o\">=<\/span>final&amp;accessKey&amp;userNames<span class=\"o\">=<\/span>amplify-D30bS&amp;permissionType<span class=\"o\">=<\/span>policies&amp;policies<span class=\"o\">=<\/span>arn:aws:iam::aws:policy%2FAdministratorAccess\r\nPress Enter to <span class=\"k\">continue<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u6b21\u88ab\u95ee\u53ca\u7684\u662f\u533a\u57df\u95ee\u9898\uff0c\u9009\u62e9ap-northeast-1\u3002\u63a5\u4e0b\u6765\u4f1a\u8be2\u95ee\u8981\u521b\u5efa\u7684IAM\u7528\u6237\u7684\u540d\u79f0\uff0c\u5982\u679c\u9ed8\u8ba4\u8bbe\u7f6e\u53ef\u4ee5\uff0c\u76f4\u63a5\u6309\u4e0b\u56de\u8f66\u952e\u5373\u53ef\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 17.11.08.png\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38a637434c4406c76be0\/41-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 17.11.08.png\" \/><\/div>\n<p>\u7531\u4e8e\u8fd9\u90e8\u5206\u662f\u5173\u4e8eIAM\u7528\u6237\u7684\u521b\u5efa\uff0c\u6240\u4ee5\u6211\u4f1a\u7701\u7565\u3002<\/p>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cIAM\u7528\u6237\u4f1a\u81ea\u52a8\u521b\u5efa\u5e76\u9644\u5e26AdministratorAccess\u7b56\u7565\u3002<\/p>\n<p>\u7b49\u4f60\u51fa\u6765\u4ee5\u540e\u518d\u5728CLI\u754c\u9762\u6309\u56de\u8f66\u3002<\/p>\n<pre class=\"post-pre\"><code>Enter the access key of the newly created user:\r\n? accessKeyId: <span class=\"k\">**********<\/span>\r\n? secretAccessKey: <span class=\"k\">********************<\/span>\r\nThis would update\/create the AWS Profile <span class=\"k\">in <\/span>your <span class=\"nb\">local <\/span>machine\r\n? Profile Name:  amplify_sample\r\n\r\nSuccessfully <span class=\"nb\">set <\/span>up the new user.\r\n\u2728  Done <span class=\"k\">in <\/span>559.81s.\r\n<\/code><\/pre>\n<p>\u8bf7\u63d0\u4f9b\u60a8\u4e4b\u524d\u521b\u5efa\u7684IAM\u7528\u6237\u7684accessKeyId\u548csecretAccessKey\uff0c\u7136\u540e\u8bbe\u7f6eProfile\u3002<br \/>\n\u9ed8\u8ba4\uff08default\uff09\u540d\u79f0\u4e5f\u53ef\u4ee5\uff0c\u4f46\u662f\u5982\u679c\u60a8\u5728\u672c\u5730\u673a\u5668\u4e0a\u5df2\u7ecf\u4f7f\u7528AWS CLI\u521b\u5efa\u4e86default\u914d\u7f6e\u6587\u4ef6\uff0c\u8fd9\u6837\u4f1a\u8986\u76d6\u539f\u6709\u7684\u914d\u7f6e\uff0c\u5e76\u4e14\u6211\u5efa\u8bae\u4f7f\u7528\u5176\u4ed6\u540d\u79f0\u3002<\/p>\n<h2>\u653e\u5927\u521d\u59cb\u5316<\/h2>\n<p>\u5728\u4f7f\u7528Amplify\u7684\u9879\u76ee\u4e2d\u8fdb\u884c\u521d\u59cb\u5316\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn amplify init\r\nyarn run v1.15.2\r\n<span class=\"nv\">$ <\/span>amplify init\r\nNote: It is recommended to run this <span class=\"nb\">command <\/span>from the root of your app directory\r\n? Enter a name <span class=\"k\">for <\/span>the project angular-amplify-auth\r\n? Enter a name <span class=\"k\">for <\/span>the environment sample\r\n? Choose your default editor: Visual Studio Code\r\n? Choose the <span class=\"nb\">type <\/span>of app that you<span class=\"s1\">'re building javascript\r\nPlease tell us about your project\r\n? What javascript framework are you using angular\r\n? Source Directory Path:  src\r\n? Distribution Directory Path: dist\r\n? Build Command:  yarn build\r\n? Start Command: yarn start\r\nUsing default provider  awscloudformation\r\n\r\nFor more information on AWS Profiles, see:\r\nhttps:\/\/docs.aws.amazon.com\/cli\/latest\/userguide\/cli-multiple-profiles.html\r\n\r\n? Do you want to use an AWS profile? Yes\r\n? Please choose the profile you want to use amplify_sample\r\n<\/span><\/code><\/pre>\n<div>\n<div class=\"post-table\">\u8cea\u554f\u5185\u5bb9Enter a name for the project\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\uff08Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\uff09Enter a name for the environment\u4f55\u74b0\u5883\u304bChoose your default editor\u30a8\u30c7\u30a3\u30bf\u3069\u308c\u3067\u3059\u304b\uff1fChoose the type of app that you&#8217;re buildingAndroid or ios or JS\u3069\u308c\u3067\u3059\u304b\uff1fWhat javascript framework are you usingJSFramework\u3069\u308c\u3067\u3059\u304b\uff1fSource Directory Pathsource\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u30d1\u30b9Distribution Directory Pathbuild\u7d50\u679c\u5148\u306e\u30d1\u30b9Build Command\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9tart Command\u30b9\u30bf\u30fc\u30c8\u30b3\u30de\u30f3\u30c9Do you want to use an AWS profile?\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u4f7f\u3044\u307e\u3059\u304b\uff1f<\/div>\n<\/div>\n<p>\u5f53\u5168\u90e8\u7b54\u590d\u5b8c\uff0cCloudFormation\u5c06\u5728\u540e\u53f0\u8fd0\u884c\u3002<\/p>\n<pre class=\"post-pre\"><code>\u2826 Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_IN_PROGRESS DeploymentBucket                           AWS::S3::Bucket            Wed May 29 2019 17:23:17 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>               \r\nCREATE_IN_PROGRESS AuthRole                                   AWS::IAM::Role             Wed May 29 2019 17:23:17 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>               \r\nCREATE_IN_PROGRESS angular-amplify-auth-sample-20190529172311 AWS::CloudFormation::Stack Wed May 29 2019 17:23:12 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> User Initiated\r\n\u280b Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Wed May 29 2019 17:23:17 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2827 Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Wed May 29 2019 17:23:19 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS UnauthRole       AWS::IAM::Role  Wed May 29 2019 17:23:19 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS AuthRole         AWS::IAM::Role  Wed May 29 2019 17:23:18 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2827 Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_COMPLETE UnauthRole AWS::IAM::Role Wed May 29 2019 17:23:30 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\nCREATE_COMPLETE AuthRole   AWS::IAM::Role Wed May 29 2019 17:23:29 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2807 Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Wed May 29 2019 17:23:40 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u280f Initializing project <span class=\"k\">in <\/span>the cloud...\r\n\r\nCREATE_COMPLETE angular-amplify-auth-sample-20190529172311 AWS::CloudFormation::Stack Wed May 29 2019 17:23:44 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2714 Successfully created initial AWS cloud resources <span class=\"k\">for <\/span>deployments.\r\n\u2714 Initialized provider successfully.\r\nInitialized your environment successfully.\r\n\r\nYour project has been successfully initialized and connected to the cloud!\r\n\r\nSome next steps:\r\n<span class=\"s2\">\"amplify status\"<\/span> will show you what you<span class=\"s1\">'ve added already and if it'<\/span>s locally configured or deployed\r\n<span class=\"s2\">\"amplify &lt;category&gt; add\"<\/span> will allow you to add features like user login or a backend API\r\n<span class=\"s2\">\"amplify push\"<\/span> will build all your <span class=\"nb\">local <\/span>backend resources and provision it <span class=\"k\">in <\/span>the cloud\r\n<span class=\"s2\">\"amplify publish\"<\/span> will build all your <span class=\"nb\">local <\/span>backend and frontend resources <span class=\"o\">(<\/span><span class=\"k\">if <\/span>you have hosting category added<span class=\"o\">)<\/span> and provision it <span class=\"k\">in <\/span>the cloud\r\n\r\nPro tip:\r\nTry <span class=\"s2\">\"amplify add api\"<\/span> to create a backend API and <span class=\"k\">then<\/span> <span class=\"s2\">\"amplify publish\"<\/span> to deploy everything\r\n\r\n\u2728  Done <span class=\"k\">in <\/span>119.19s.\r\n<\/code><\/pre>\n<p>\u76ee\u524d\u4e3a\u6b62\uff0c\u5df2\u7ecf\u521b\u5efa\u4e86\u4e24\u4e2a IAM \u89d2\u8272\u548c\u4e00\u4e2a S3 \u5b58\u50a8\u6876\u3002<\/p>\n<h2>\u6dfb\u52a0Auth<\/h2>\n<p>\u4e0b\u4e00\u6b65\uff0c\u5728Amplify\u7684\u547d\u4ee4\u4e2d\u6dfb\u52a0Auth\u3002<br \/>\n\u901a\u8fc7\u6dfb\u52a0Auth\uff0ctemplate.yml\u5c06\u53ef\u4ee5\u5c06Cognito\u521b\u5efa\u6dfb\u52a0\u5230CloudFormation\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn amplify add auth\r\nyarn run v1.15.2\r\n<span class=\"nv\">$ <\/span>amplify add auth\r\nUsing service: Cognito, provided by: awscloudformation\r\n\r\n The current configured provider is Amazon Cognito. \r\n\r\n Do you want to use the default authentication and security configuration? Default configuration\r\n Warning: you will not be able to edit these selections. \r\n How <span class=\"k\">do <\/span>you want <span class=\"nb\">users <\/span>to be able to sign <span class=\"k\">in <\/span>when using your Cognito User Pool? Username\r\n Warning: you will not be able to edit these selections. \r\n What attributes are required <span class=\"k\">for <\/span>signing up? <span class=\"o\">(<\/span>Press &lt;space&gt; to <span class=\"k\">select<\/span>, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection<span class=\"o\">)<\/span>Email\r\nSuccessfully added resource angularamplifyauth8d729781 locally\r\n\r\nSome next steps:\r\n<span class=\"s2\">\"amplify push\"<\/span> will build all your <span class=\"nb\">local <\/span>backend resources and provision it <span class=\"k\">in <\/span>the cloud\r\n<span class=\"s2\">\"amplify publish\"<\/span> will build all your <span class=\"nb\">local <\/span>backend and frontend resources <span class=\"o\">(<\/span><span class=\"k\">if <\/span>you have hosting category added<span class=\"o\">)<\/span> and provision it <span class=\"k\">in <\/span>the cloud\r\n\r\n\u2728  Done <span class=\"k\">in <\/span>26.57s.\r\n<\/code><\/pre>\n<div>\n<div class=\"post-table\">\u8cea\u554f\u5185\u5bb9Do you want to use the default authentication and security configuration?\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a8d\u8a3c\u3068\u8a2d\u5b9a\u3069\u3046\u3057\u307e\u3059\u304b\uff1f\uff08\u3068\u308a\u3042\u3048\u305a\u30c7\u30d5\u30a9\u30eb\u30c8\u9078\u629e\uff09How do you want users to be able to sign in when using your Cognito User Pool?Cognito\u306e\u30e6\u30fc\u30b6\u30fc\u30d7\u30fc\u30eb\u3067\u30ed\u30b0\u30a4\u30f3\u6642\u306b\u4f55\u3092\u4f7f\u3046\uff1f\uff08\u3068\u308a\u3042\u3048\u305a\u30e6\u30fc\u30b6\u30fc\u540d\uff09What attributes are required for signing up? (Press to select, <a> to toggle all, <i> to invert selection<\/i><\/a>\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u6642\u306b\u767b\u9332\u3057\u3066\u3082\u3089\u3046\u60c5\u5831\uff08\u4eca\u56de\u306fEmail\u306e\u307f\u9078\u629e\uff09<\/div>\n<\/div>\n<p>\u9996\u5148\uff0c\u53ea\u662f\u5148\u8bd5\u7740\u5236\u4f5c\u4e00\u4e0b\uff0c\u6240\u4ee5\u6211\u7b80\u5355\u8bbe\u7f6e\u4e86\u4e00\u4e0b\u3002<br \/>\n\u6682\u4e14\u4ee5\u540e\u8fd8\u53ef\u4ee5\u901a\u8fc7\u63a7\u5236\u53f0\u6216CLI\u8fdb\u884c\u4fee\u6539\u3002<br \/>\n\u8fd9\u6837\u5c31\u5b8c\u6210\u4e86template.yml\u7684\u5236\u4f5c\u3002<\/p>\n<h3>\u66f4\u65b0CloudFormation<\/h3>\n<p>\u5c06template.yml\u7684\u5185\u5bb9\u66f4\u65b0\u5230CloudFormation\u3002<\/p>\n<pre class=\"post-pre\"><code>i<span class=\"nv\">$ <\/span>yarn amplify push\r\nyarn run v1.15.2\r\n<span class=\"nv\">$ <\/span>amplify push\r\n\r\n\r\nCurrent Environment: sample\r\n\r\n| Category | Resource name              | Operation | Provider plugin   |\r\n| <span class=\"nt\">--------<\/span> | <span class=\"nt\">--------------------------<\/span> | <span class=\"nt\">---------<\/span> | <span class=\"nt\">-----------------<\/span> |\r\n| Auth     | angularamplifyauth8d729781 | Create    | awscloudformation |\r\n? Are you sure you want to <span class=\"k\">continue<\/span>? Yes\r\n\u280f Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nUPDATE_IN_PROGRESS angular-amplify-auth-sample-20190529172311 AWS::CloudFormation::Stack Wed May 29 2019 17:47:49 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> User Initiated\r\n\u280f Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS authangularamplifyauth8d729781 AWS::CloudFormation::Stack Wed May 29 2019 17:48:00 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS authangularamplifyauth8d729781 AWS::CloudFormation::Stack Wed May 29 2019 17:47:58 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u2839 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS angular-amplify-auth-sample-20190529172311-authangularamplifyauth8d729781-17R83R3RQ8087 AWS::CloudFormation::Stack Wed May 29 2019 17:47:59 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> User Initiated\r\n\u2838 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS SNSRole AWS::IAM::Role Wed May 29 2019 17:48:09 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS SNSRole AWS::IAM::Role Wed May 29 2019 17:48:08 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u2838 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE SNSRole AWS::IAM::Role Wed May 29 2019 17:48:21 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2838 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPool AWS::Cognito::UserPool Wed May 29 2019 17:48:28 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u283c Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    UserPool AWS::Cognito::UserPool Wed May 29 2019 17:48:32 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS UserPool AWS::Cognito::UserPool Wed May 29 2019 17:48:32 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2838 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientWeb AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:40 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS UserPoolClient    AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:38 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS UserPoolClientWeb AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:38 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u2807 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE UserPoolClientWeb AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:41 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2834 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    UserPoolClient AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:41 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS UserPoolClient AWS::Cognito::UserPoolClient Wed May 29 2019 17:48:41 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2826 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientRole AWS::IAM::Role Wed May 29 2019 17:48:49 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS UserPoolClientRole AWS::IAM::Role Wed May 29 2019 17:48:47 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u2826 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE UserPoolClientRole AWS::IAM::Role Wed May 29 2019 17:48:59 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2827 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientLambda AWS::Lambda::Function Wed May 29 2019 17:49:05 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2827 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    UserPoolClientLambda AWS::Lambda::Function Wed May 29 2019 17:49:06 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS UserPoolClientLambda AWS::Lambda::Function Wed May 29 2019 17:49:06 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2807 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientLambdaPolicy AWS::IAM::Policy Wed May 29 2019 17:49:13 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS UserPoolClientLambdaPolicy AWS::IAM::Policy Wed May 29 2019 17:49:12 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u280f Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE UserPoolClientLambdaPolicy AWS::IAM::Policy Wed May 29 2019 17:49:23 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2807 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientLogPolicy AWS::IAM::Policy Wed May 29 2019 17:49:29 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS UserPoolClientLogPolicy AWS::IAM::Policy Wed May 29 2019 17:49:28 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u280f Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE UserPoolClientLogPolicy AWS::IAM::Policy Wed May 29 2019 17:49:39 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u280b Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS UserPoolClientInputs Custom::LambdaCallout Wed May 29 2019 17:49:44 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2826 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    UserPoolClientInputs Custom::LambdaCallout Wed May 29 2019 17:49:50 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS UserPoolClientInputs Custom::LambdaCallout Wed May 29 2019 17:49:49 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2834 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_IN_PROGRESS IdentityPool AWS::Cognito::IdentityPool Wed May 29 2019 17:49:55 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2839 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    IdentityPool AWS::Cognito::IdentityPool Wed May 29 2019 17:49:59 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS IdentityPool AWS::Cognito::IdentityPool Wed May 29 2019 17:49:58 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\n\u2839 Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE    IdentityPoolRoleMap AWS::Cognito::IdentityPoolRoleAttachment Wed May 29 2019 17:50:09 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\nCREATE_IN_PROGRESS IdentityPoolRoleMap AWS::Cognito::IdentityPoolRoleAttachment Wed May 29 2019 17:50:09 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> Resource creation Initiated\r\nCREATE_IN_PROGRESS IdentityPoolRoleMap AWS::Cognito::IdentityPoolRoleAttachment Wed May 29 2019 17:50:06 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span>                            \r\n\u283c Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE angular-amplify-auth-sample-20190529172311-authangularamplifyauth8d729781-17R83R3RQ8087 AWS::CloudFormation::Stack Wed May 29 2019 17:50:13 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u280f Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nCREATE_COMPLETE authangularamplifyauth8d729781 AWS::CloudFormation::Stack Wed May 29 2019 17:50:18 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u280b Updating resources <span class=\"k\">in <\/span>the cloud. This may take a few minutes...\r\n\r\nUPDATE_COMPLETE                     angular-amplify-auth-sample-20190529172311 AWS::CloudFormation::Stack Wed May 29 2019 17:50:23 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\nUPDATE_COMPLETE_CLEANUP_IN_PROGRESS angular-amplify-auth-sample-20190529172311 AWS::CloudFormation::Stack Wed May 29 2019 17:50:22 GMT+0900 <span class=\"o\">(<\/span>GMT+09:00<span class=\"o\">)<\/span> \r\n\u2714 All resources are updated <span class=\"k\">in <\/span>the cloud\r\n\r\n\r\n\u2728  Done <span class=\"k\">in <\/span>191.15s.\r\n<\/code><\/pre>\n<p>\u5b8c\u6210\u540e\uff0c\u5c06\u521b\u5efaCognito\u7528\u6237\u6c60\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 17.52.48.png\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38a637434c4406c76be0\/62-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 17.52.48.png\" \/><\/div>\n<p>\u8fd9\u6837\u4e00\u6765\uff0cAmplify\u7684\u8bbe\u7f6e\u6682\u65f6\u5b8c\u6210\u4e86\u3002<\/p>\n<h2>Angular\u9879\u76ee\u7684\u914d\u7f6e<\/h2>\n<p>\u5728Angular\u4e2d\u8fdb\u884c\u914d\u7f6e\u4ee5\u4f7f\u7528\u5df2\u5b8c\u6210\u7684Cognito\u3002<\/p>\n<h3>\u5bfc\u5165Amplify\u7684\u914d\u7f6e\u6587\u4ef6<\/h3>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">enableProdMode<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">platformBrowserDynamic<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser-dynamic<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app\/app.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">environment<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/environments\/environment<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u3053\u3053\u304b\u3089<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Amplify<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">amplify<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/aws-exports<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"nx\">Amplify<\/span><span class=\"p\">.<\/span><span class=\"nx\">configure<\/span><span class=\"p\">(<\/span><span class=\"nx\">amplify<\/span><span class=\"p\">);<\/span>\r\n<span class=\"c1\">\/\/ \u3053\u3053\u307e\u3067<\/span>\r\n\r\n<span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">enableProdMode<\/span><span class=\"p\">();<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nx\">platformBrowserDynamic<\/span><span class=\"p\">().<\/span><span class=\"nx\">bootstrapModule<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppModule<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>\r\n\r\n<\/code><\/pre>\n<h3>\u52a0\u8f7d AmplifyModule \u548c AmplifyService<\/h3>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRoutingModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app-routing.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AmplifyAngularModule<\/span><span class=\"p\">,<\/span> <span class=\"nx\">AmplifyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify-angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span><span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">AppComponent<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">AppRoutingModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">AmplifyAngularModule<\/span><span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">AmplifyService<\/span><span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/ \u8ffd\u52a0<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">bootstrap<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u5728\u7f16\u8bd1\u65f6\u8bfb\u53d6 nodepackage\u3002<\/h3>\n<p>\u5728types\u4e2d\u6307\u5b9a\u8282\u70b9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"extends\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\".\/tsconfig.json\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"outDir\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\".\/out-tsc\/app\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"types\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"s2\">\"node\"<\/span><span class=\"p\">]<\/span> \r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"include\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\"src\/**\/*.ts\"<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"nl\">\"exclude\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\"src\/test.ts\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"s2\">\"src\/**\/*.spec.ts\"<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<h3>Angular6\u53ca\u4ee5\u4e0a\u7684\u517c\u5bb9\u6027<\/h3>\n<p>\u5728 src\/polyfills.ts \u6587\u4ef6\u7684\u6700\u540e\u4e00\u884c\u6dfb\u52a0 (window as any).global = window;<br \/>\n\u8fd9\u4e2a\u95ee\u9898\u4e0e Amplify \u65e0\u5173\uff0c\u662f\u5728 Angular \u548c Node.js \u66f4\u65b0\u4e2d\u51fa\u73b0\u7684\u95ee\u9898\u3002<br \/>\n\u8be6\u7ec6\u4fe1\u606f\u8bf7\u67e5\u770b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cm\">\/***\r\n\r\n\u3000~~~~~~~~~~[\u9577\u3044\u306e\u3067\u5272\u611b]\r\n\r\n\/***************************************************************************************************\r\n * APPLICATION IMPORTS\r\n *\/<\/span>\r\n<span class=\"p\">(<\/span><span class=\"nb\">window<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nb\">global<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h3>\u5b9e\u9645\u663e\u793a\u5c4f\u5e55\u7684\u66f4\u6539<\/h3>\n<p>\u6309\u7167app.component.html\u7684\u663e\u793a\u8981\u6c42\uff0c\u8fdb\u884cHTML\u6807\u7b7e\u7684\u66ff\u6362\u548cCSS\u7684\u52a0\u8f7d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\">&lt;!--\u3059\u3079\u3066\u6d88\u3057\u3066\u4ee5\u4e0b\u306e\u30bf\u30b0\u306e\u307f\u306b--&gt;<\/span>\r\n<span class=\"nt\">&lt;amplify-authenticator&gt;&lt;\/amplify-authenticator&gt;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"cm\">\/* You can add global styles to this file, and also import other style files *\/\r\n<\/span><span class=\"k\">@import<\/span> <span class=\"s\">'~aws-amplify-angular\/Theme.css';<\/span>\r\n<\/code><\/pre>\n<h2>\u786e\u8ba4\u52a8\u4f5c<\/h2>\n<p>\u6211\u4f1a\u786e\u8ba4\u5b9e\u9645\u8fd0\u884c\u7684\u5730\u65b9\u3002<br \/>\n\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u540e\uff0c\u6253\u5f00http:\/\/localhost:4200\/\u3002<\/p>\n<pre class=\"post-pre\"><code>yarn start\r\n<\/code><\/pre>\n<p>\u4e00\u65e6\u51fa\u73b0\u6b64\u753b\u9762\u5373\u8868\u793a\u5b8c\u6210\uff01<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 18.36.18.png\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38a637434c4406c76be0\/84-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-05-29 18.36.18.png\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6211\u60f3\u5c1d\u8bd5\u4f7f\u7528\u8ba4\u8bc1\u670d\u52a1AWS Cognito\uff0c\u4f46\u662f\u6211\u4e0d\u592a\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\uff0c\u4e0d\u77e5\u9053\u8be5\u5982\u4f55\u5165\u624b&#8230; \u9488\u5bf9\u8fd9\u79cd\u60c5 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39116","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010aws\u3011\u5c1d\u8bd5\u4f7f\u7528angular-amplify\u4f7f\u7528cognito\uff01\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01\" \/>\n<meta property=\"og:description\" content=\"\u6211\u60f3\u5c1d\u8bd5\u4f7f\u7528\u8ba4\u8bc1\u670d\u52a1AWS Cognito\uff0c\u4f46\u662f\u6211\u4e0d\u592a\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\uff0c\u4e0d\u77e5\u9053\u8be5\u5982\u4f55\u5165\u624b&#8230; \u9488\u5bf9\u8fd9\u79cd\u60c5 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010aws\u3011\u5c1d\u8bd5\u4f7f\u7528angular-amplify\u4f7f\u7528cognito\uff01\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-20T02:10:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T03:46:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38a637434c4406c76be0\/41-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u626c\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u626c\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/\",\"name\":\"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2024-02-20T02:10:24+00:00\",\"dateModified\":\"2024-04-29T03:46:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\",\"name\":\"\u6e05, \u626c\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u626c\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010aws\u3011\u5c1d\u8bd5\u4f7f\u7528angular-amplify\u4f7f\u7528cognito\uff01\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01","og_description":"\u6211\u60f3\u5c1d\u8bd5\u4f7f\u7528\u8ba4\u8bc1\u670d\u52a1AWS Cognito\uff0c\u4f46\u662f\u6211\u4e0d\u592a\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\uff0c\u4e0d\u77e5\u9053\u8be5\u5982\u4f55\u5165\u624b&#8230; \u9488\u5bf9\u8fd9\u79cd\u60c5 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010aws\u3011\u5c1d\u8bd5\u4f7f\u7528angular-amplify\u4f7f\u7528cognito\uff01\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2024-02-20T02:10:24+00:00","article_modified_time":"2024-04-29T03:46:02+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d38a637434c4406c76be0\/41-0.png"}],"author":"\u6e05, \u626c","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u626c","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"12 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/","name":"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2024-02-20T02:10:24+00:00","dateModified":"2024-04-29T03:46:02+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010AWS\u3011\u5c1d\u8bd5\u4f7f\u7528Angular + Amplify\u4f7f\u7528Cognito\uff01"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461","name":"\u6e05, \u626c","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","caption":"\u6e05, \u626c"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90aws%e3%80%91%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8angular-amplify%e4%bd%bf%e7%94%a8cognito%ef%bc%81\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39116"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39116\/revisions"}],"predecessor-version":[{"id":85084,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39116\/revisions\/85084"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}