Loading repository data…
Loading repository data…
aws-samples / repository
A simple/sample AngularV4-based web app that demonstrates different API authentication options using Amazon Cognito and API Gateway with an AWS Lambda and Amazon DynamoDB backend that stores user details in a complete end to end Serverless fashion.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A simple/sample AngularV4-based web app that demonstrates different API authentication options using Amazon Cognito and API Gateway with an AWS Lambda and Amazon DynamoDB backend that stores user details as part of the blog post https://aws.amazon.com/blogs/compute/secure-api-access-with-amazon-cognito-federated-identities-amazon-cognito-user-pools-and-amazon-api-gateway/ :
Get started by cloning the repository then editing some files described with more detail in steps 1-4:
Upload the file "sam/lambda.zip" to a S3 bucket of choice and add the bucket details to the "sam/sam.yaml" SAM Template (Resources->CognitoDemoFunction->Properties->CodeUri). The bucket should be in the same region as all resources.
Package the template with the following command and execute the resulting 'aws cloudformation deploy' output using the AWS CLI:
aws cloudformation package --template-file sam.yaml --output-template-file sam-output.yaml --s3-bucket <bucket>
The next command should be something similar to:
aws cloudformation deploy --template-file /Users/<username>/GitHub/aws-cognito-apigw-angular-auth/sam/sam-output.yaml --stack-name CognitoAPIGWDemo --capabilities CAPABILITY_IAM
CloudFormation will automatically create and configure the following resources in your account:
After the stack completes, the following command will show you the Outputs:
aws cloudformation describe-stacks --query 'Stacks[0].[Outputs[].[OutputKey,OutputValue]]|[]' --output text --stack-name CognitoAPIGWDemo
Generate a Google API ID following the instructions on http://docs.aws.amazon.com/cognito/latest/developerguide/google.html
Either refer to the output of the "describe-stacks" command above or go to the CloudFormation console, select the stack created on item 2 and open the OUTPUTS tab. All resources we'll need will be there. Use the information to fill up the details under RESOURCE IDENTIFIERS of the file "src/app/aws.service.ts" including the region.
Go to the Cognito Console, select the Identity Pool created by CloudFormation under FEDERATED IDENTITIES and click on EDIT IDENTITY POOL.
Go to the AUTENTICATION PROVIDERS section, select the tab GOOGLE+, click on the UNLOCK button and add the details on the Google API ID generated on step 4. Save the changes.
Click on EDIT IDENTITY POOL once more, go to the AUTENTICATION PROVIDERS section, select the COGNITO tab. Under AUTHENTICATED ROLE SELECTION select the option CHOSE ROLE FROM TOKEN and under ROLE RESOLUTION select DENY. Save the changes.
Create 2 users on your User Pool using a command similar to the AWS CLI command bellow for both of them then confirm the user in the Cognito User Pools console:
aws cognito-idp sign-up \
--client-id <<App Client ID>> \
--username jdoe \
--password P@ssw0rd \
--region <<region>> \
--user-attributes '[{"Name":"given_name","Value":"John"},{"Name":"family_name","Value":"Doe"},{"Name":"email","Value":"jdoe@myemail.com"},{"Name":"gender","Value":"Male"},{"Name":"phone_number","Value":"+61XXXXXXXXXX"}]'
Add one of the users to the group called "cip-group" in the Cognito User Pool
Create a new "aws-cognito-apigw-angular" project folder by executing the following commands from a terminal in a host on which you want to run the application:
npm install -g @angular/cli@1.0.0
ng new aws-cognito-apigw-angular
cd aws-cognito-apigw-angular
aws apigateway get-sdk --rest-api-id <RestApiId from CloudFormation OUTPUTS> --stage-name demo --sdk-type javascript apigwsdk.zip
unzip apigwsdk.zip
(If you are using Windows skip the last command and unzip the SDK file manually)
npm install
npm start
Access http://localhost:4200/ in a browser then log in with the user above
Authentication should now work as:
This sample code is made available under the MIT-0 license. See the LICENSE file.