Tạo giao diện người dùng Amplify gọi Amazon API Gateway bằng Cognito
Mẫu này giải thích cách triển khai ứng dụng AWS SAM bao gồm giao diện người dùng AWS Amplify, Cognito, API Gateway và Lambda Function. Nó cũng đặt các biến môi trường sẽ được sử dụng bởi Amplify và Lambda Function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
AWSTemplateFormatVersion: '2010-09-09' Transform: AWS::Serverless-2016-10-31 Description: > Serverless Solution Cognito / Api Gateway / Lambda Function / Amplify Environmental Variables on Amplify Environmental Variables on Lambda Function #################### PARAMETERS ############################# Parameters: AmplifyFrontendRepository: Type: String Description: 'Amplify Frontend Repository in the format: https://<GitProviderDomain>/<user>/<repository>' Default: '' OauthToken: Type: String Description: 'Access token for git provider repository' NoEcho: true Default: '' ########################### RESOURCES ################################ Resources: ##################### API ####################### myAPI: Type: AWS::Serverless::Api Description: Main API Properties: StageName: dev Cors: AllowMethods: "'GET, OPTIONS'" AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'" AllowOrigin: "'*'" MaxAge: "'500'" Auth: AddDefaultAuthorizerToCorsPreflight: false DefaultAuthorizer: MyCognitoAuthorizer Authorizers: MyCognitoAuthorizer: UserPoolArn: !GetAtt rUserPool.Arn ##################### FUNCTIONS ################################ ################### LAMBDA ELASTICSEARCH ###################### myFunction: Type: AWS::Serverless::Function Properties: CodeUri: lambdaExample/ Handler: app.lambda_handler Runtime: python3.7 Events: EmyFunction: Type: Api Properties: Path: /lambdaExample Method: get RestApiId: Ref: myAPI Environment: Variables: cognito_region: !Ref AWS::Region user_pools_id: !Ref rUserPool user_pools_web_client_id: !Ref rAmplifyCognitoClient # INTEGRATION WITH FRONTEND ################################################################ ## COGNITO - USER POOL / USER POOL CLIENT rUserPool: Type: AWS::Cognito::UserPool Properties: AdminCreateUserConfig: AllowAdminCreateUserOnly: true AutoVerifiedAttributes: - email Schema: - AttributeDataType: String Mutable: true Name: given_name Required: true - AttributeDataType: String Mutable: true Name: family_name Required: true - AttributeDataType: String Mutable: false Name: email Required: true UsernameAttributes: - email UsernameConfiguration: CaseSensitive: false rAmplifyCognitoClient: Type: AWS::Cognito::UserPoolClient Properties: AccessTokenValidity: 1 AllowedOAuthFlows: - implicit AllowedOAuthFlowsUserPoolClient: true AllowedOAuthScopes: - email - openid - profile - aws.cognito.signin.user.admin CallbackURLs: - "http://localhost" EnableTokenRevocation: true ExplicitAuthFlows: - ALLOW_ADMIN_USER_PASSWORD_AUTH - ALLOW_CUSTOM_AUTH - ALLOW_USER_PASSWORD_AUTH - ALLOW_USER_SRP_AUTH - ALLOW_REFRESH_TOKEN_AUTH IdTokenValidity: 1 LogoutURLs: - "http://localhost" PreventUserExistenceErrors: ENABLED ReadAttributes: - given_name - family_name - email - email_verified RefreshTokenValidity: 1 SupportedIdentityProviders: - COGNITO TokenValidityUnits: AccessToken: hours IdToken: hours RefreshToken: days UserPoolId: !Ref rUserPool ################################################################# ################################################################# # AMPLIFY rAmplifyRole: Type: AWS::IAM::Role Properties: # RoleName: !Sub '${AWS::StackName}' AssumeRolePolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Principal: Service: - amplify.amazonaws.com Action: - sts:AssumeRole Policies: - PolicyName: Amplify PolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Action: - "amplify:*" Resource: "*" rAmplifyApp: Type: AWS::Amplify::App Properties: Name: !Sub '${AWS::StackName}' Description: Matching Tool CustomRules: - Source: '</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>' Target: '/index.html' Status: '200' EnvironmentVariables: # - Name: PROJECT_NAME # Value: !Ref pProjectName - Name: cognito_region Value: !Ref AWS::Region - Name: user_pools_id Value: !Ref rUserPool - Name: user_pools_web_client_id Value: !Ref rAmplifyCognitoClient - Name: APIURL Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev" Repository: !Ref AmplifyFrontendRepository OauthToken: !Ref OauthToken IAMServiceRole: !GetAtt rAmplifyRole.Arn rAmplifyBranch: Type: AWS::Amplify::Branch Properties: BranchName: 'main' AppId: !GetAtt rAmplifyApp.AppId Description: Branch EnableAutoBuild: true # OUTPUTS ################################################################# Outputs: CognitoRegion: Description: Cognito Region Value: !Ref AWS::Region Export: Name: CognitoRegion CognitoUserPool: Description: Cognito User Pool Value: !Ref rUserPool Export: Name: CognitoUserPool CognitoUserPoolClient: Description: Cognito User Pool Client Value: !Ref rAmplifyCognitoClient Export: Name: CognitoUserPoolClient APIurl: Description: API url Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev" Export: Name: APIurl |
Tích hợp Amplify Frontend, Cognito, API Gateway, Lambda
Mẫu này giải thích cách triển khai ứng dụng SAM bao gồm AWS Amplify Frontend, Cognito, API Gateway và Lambda Function và đặt các biến môi trường sẽ được Amplify và hàm Lambda sử dụng.
Tìm hiểu thêm về mô hình này tại Mô hình đất không máy chủ: https://serverlessland.com/patterns/amplify-apigw-lambda .
Quan trọng: ứng dụng này sử dụng các dịch vụ AWS khác nhau và có các chi phí liên quan đến các dịch vụ này sau khi sử dụng Bậc miễn phí – vui lòng xem trang Định giá AWS để biết chi tiết. Bạn chịu trách nhiệm cho mọi chi phí AWS phát sinh. Không có bảo hành nào được ngụ ý trong ví dụ này.
Yêu cầu
- Tạo tài khoản AWS nếu bạn chưa có và đăng nhập. Người dùng IAM mà bạn sử dụng phải có đủ quyền để thực hiện các cuộc gọi dịch vụ AWS cần thiết và quản lý tài nguyên AWS.
- AWS CLI đã được cài đặt và định cấu hình
- Git đã được cài đặt
- Đã cài đặt AWS Serverless Application Model (AWS SAM)
Hướng dẫn triển khai
- Tạo một thư mục mới, điều hướng đến thư mục đó trong một thiết bị đầu cuối và sao chép kho lưu trữ GitHub:
12git clone https://github.com/aws-samples/serverless-patterns - Thay đổi thư mục thành thư mục mẫu:
12cd _patterns-model - Từ dòng lệnh, sử dụng AWS SAM để triển khai tài nguyên AWS cho mẫu như được chỉ định trong tệp template.yml:
12sam deploy --guided - Trong lời nhắc:
- Nhập tên ngăn xếp
- Nhập Vùng AWS mong muốn
- Nhập URL của kho lưu trữ Frontend sẽ được AWS Amplify Frontend lưu trữ
- Nhập nhà cung cấp git OauthToken cho bạn
- Cho phép SAM CLI tạo vai trò IAM với các quyền cần thiết.
Sau khi bạn đã chạy chế độ
sam deploy --guided
một lần và lưu các đối số vào tệp cấu hình (samconfig.toml), bạn có thể sử dụngsam deploy
sung trong tương lai để sử dụng các giá trị mặc định này. - Lưu ý kết quả đầu ra từ quá trình triển khai SAM. Chúng chứa tên tài nguyên và / hoặc ARN được sử dụng để thử nghiệm.
Làm thế nào nó hoạt động
Mẫu này triển khai một ứng dụng đầy đủ trong đó ứng dụng giao diện người dùng Amplify và Chức năng Lambda sẽ có các biến môi trường như Vùng ẩn danh, ID nhóm người dùng nhận dạng và ID ứng dụng khách nhóm người dùng nhận dạng cho phép nhà phát triển nhanh chóng phát triển ứng dụng với Xác thực ở mặt trước và phụ trợ. Mẫu đặt nhận dạng làm trình ủy quyền cho API Gateway, yêu cầu ứng dụng giao diện người dùng phải chuyển mã thông báo web json (JWT) để gọi API
Thử nghiệm
Trên Dịch vụ khuếch đại AWS, nhấp vào tên ứng dụng (giống tên ngăn xếp SAM), nhấp vào môi trường khác biệt. Bạn sẽ có thể thấy 4 biến môi trường được tạo bởi mẫu.
Trên AWS Lambda Service, nhấp vào Ứng dụng, nhấp vào tên ứng dụng (giống tên ngăn xếp SAM), nhấp vào Tài nguyên được gọi là myFunction, nhấp vào cấu hình, nhấp vào Biến môi trường. Bạn sẽ có thể thấy 4 biến môi trường được tạo bởi mẫu. Thực thi hàm lambda và kiểm tra nhật ký. Bạn sẽ thấy kết quả như sau: Khu vực ẩn danh: us-East-1 Cognito User Pool Id: us-west-1_aYtONfZZZ Cognito User Pool ID Client: 1h2rrpldfqg8lhbgej2o5s2ZZZ
Dọn dẹp
- Xóa ngăn xếp
12aws cloudformation delete-stack --stack-name STACK_NAME - Xác nhận ngăn xếp đã bị xóa
1aws cloudformation list-stacks --query <span class="token string">"StackSummaries[?contains(StackName,'STACK_NAME')].StackStatus"</span>