Amazon Rekognition Liveness Detection in Angular

AWS recently launched the Amazon Rekognition Face Liveness feature. This new feature helps deter fraud in facial verification.

• With AWS Amplify you could easily plug Face liveness detection on your Android/IOS/Browser. It currently supports the below frameworks:

  1. Android
  2. React
  3. Swift

• This solution allows you to integrate Amazon Rekognition face liveness with your existing Angular Application. It uses the FaceLivenessDetector component from React and wraps it as an Angular Component.

• FaceLivenessDetector component is responsible from starting the liveness session. Once the results are ready it notifies us via callback functions.

To run the project, we need to have Node js 16 and angular cli installed.

Steps to run using AWS Amplify

1. Install Amplify CLI on your local machine

   npm install -g @aws-amplify/cli

2. Configure Amplify CLI

   amplify configure

3. Clone this project

   git clone <TODO add path>

4. Open a new terminal. From the root of the project, run:

   amplify init

5. Install Project dependencies. Fire the below command in a terminal from the root of your project foler

   npm install

6. Add Cognito Authentication. Fire the below command in a terminal from the root of your project folder

  amplify add auth

7. Push your changes

  amplify push

8. Verify if aws-exports.ts file has all the Auth details. We reference properties from this file when generating creadentials to communicate with Amazon Rekognition.

9. Update IAM permissions. Search for IAM role of type 'amplify-{your-app-name}-{environment}-{random-number}-authRole' generated by amplify and add the below inline policy that supports liveness detection features

   {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "rekognition:StartFaceLivenessSession",
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": "rekognition:CreateFaceLivenessSession",
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": "rekognition:GetFaceLivenessSessionResults",
            "Resource": "*"
        }
    ]
}

10. To run on local machine

   ng serve

11. To view the hosted application on Amplify

   amplify console

12. Once you create an account and login you should see the below screen

13. Click on Begin Check for automated liveness detection

14. Wait for verification. This service gives you a confidence score for face liveness.