Khuếch đại đến API Gateway với Cognito

Thứ Bảy, 29/10/2022

Tram Ho

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.

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: &gt;
  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://&lt;GitProviderDomain&gt;/&lt;user&gt;/&lt;repository&gt;'
    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: '&lt;/^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/&gt;'
          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

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:
git clone https://github.com/aws-samples/serverless-patterns
1
2
git clone https://github.com/aws-samples/serverless-patterns
Thay đổi thư mục thành thư mục mẫu:
cd _patterns-model
1
2
cd _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:
sam deploy --guided
1
2
sam 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ụng sam 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
aws cloudformation delete-stack --stack-name STACK_NAME
1
2
aws cloudformation delete-stack --stack-name STACK_NAME
Xác nhận ngăn xếp đã bị xóa
aws cloudformation list-stacks --query <span class="token string">"StackSummaries[?contains(StackName,'STACK_NAME')].StackStatus"</span>
1
aws cloudformation list-stacks --query <span class="token string">"StackSummaries[?contains(StackName,'STACK_NAME')].StackStatus"</span>

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Khuếch đại đến API Gateway với Cognito

Tích hợp Amplify Frontend, Cognito, API Gateway, Lambda

Yêu cầu

Hướng dẫn triển khai

Làm thế nào nó hoạt động

Thử nghiệm

Dọn dẹp

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript