2-step authentication with google authenticator has never been easier – P1

Tram Ho

1: Introduction

Security of personal information and account information on the internet is currently a painful issue and is of great concern. To avoid the leakage of personal information or the intrusion of bad actors on the internet, many different methods of information security are offered. The most notable of which is the information security method using two-factor authentication.

So what is this method, how it works. Let’s find out together

2: What is 2-Factor Authentication?

Two-Factor Authentication is a 2-step verification method, to verify that you, and not someone else, are logged into your account.

For example: You log into your gmail account, on your familiar devices, probably will not need verification. But in case you sign in with a strange device, gmail will send you an SMS message for verification, or you need to enter a secret code from the Authenticator app you registered before, to verify. you are the login

This security method can be a hassle sometimes, as it takes many steps. But it is very reliable, can protect your account from the risk of disclosure, or hijacked by bad guys.

3: How it works!

You will have to pay through 2 steps to be able to login to your account.

  • Step 1: Is normal login with your username (email) and password
  • Step 2: A security step to authenticate yourself as the person signing in

Step 2 usually has the following types

  • Answer your security question
  • The secret code is sent to the text message of the phone number you provided
  • Biometric data (fingerprint, face, iris or voice)
  • The security key is a small device, eg a USB
  • Applications that generate verification codes, eg google authenticator, authy … are installed on your phone

4: Why do you need to use 2-step authentication?

Needless to say, you also know the consequences of disclosing personal information in the current stormy internet era. Lightly losing accounts, bi used to spread unorthodox information. Severe, the money will lose the disability, the information about you, your family members, and close friends will be revealed

For example: Your gmail account has links to many other important accounts, stores partner information, or personal banking information. Then when the gmail information is leaked, you know the consequences, all the accounts you linked to, or banking information, customers are lost.

So the 2-step information security is very necessary, protecting you from unwanted risks

5: Build a 2-layer security method for your website

  • In this article, I will guide you to add 2-factor authentication to your website, to protect against disclosure of your users’ information.
  • The language uses Ruby on Rails
  • The 2-step authentication method I use is to use a secret code generated from the Google Authenticator app on your phone

5.1 Initialization

As you know when using Ruby on Rails, there is a library to assist you in fast and convenient login authentication, the gem "devise"

We will link devise and 2 other libraries for 2-step authentication

Let’s start ….
For simplicity, I just created a small demo application, which only has the login function, not any other function.

5.2 Config model

Which model is used to manage the login account information of the user, we will configure 2-step authentication in that model. Usually it will be the User Model . Run two factor devise initialization for the user model

OTP_SECRET_KEY is the environment variable that holds the application’s secret key base value.

Create a column to store the backup code when registering the two factor

And need to add two_factor_backupable into the devise in the User model to be able to support manipulating the backup code.

  • two_factor_authenticatable Support we can communicate with otp code from google authenticator app
  • two_factor_backupable Support us to perform actions related to the backup code, such as generating the backup codes, authenticating when logging in with the backup code.
  • otp_backup_code_length The length of the backup code when generated.
  • otp_number_of_backup_codes Number of backup code generated in 1 time

If the database_authenticatable config was not automatically deleted, then you must manually delete it.

Loading both :database_authenticatable and two_factor_authenticatable in the same model will allow the user to bypass the two-factor authentication feature. These are the Warden’s actions

5.3 Create QR Code

In this step, I will create a QR code that can be scanned on the google authenticator app. Create a controller for registration and two-factor operations, for example: TwoFactorSettingController

In this new screen, I will display the QR Code to scan on the app. So the new function I just tested is simple.

  • If the user has 2-step authentication enabled then we will redirect to the page that turns off 2-step authentication
  • If 2-step authentication is not enabled, we will display QR Code to scan
  • In addition to scanning by QR, we can enter the code to register manually. Each user will have a unique code to enter manually.

This statement is in the new function. So it will check if the user is missing the code manually entered, it will generate 1 code for the user to enter manually, if there is, it will be ignored.

Simple design view section to display QR Code

This QR Code scan will have 2 components
1: QR Code
2: In case your phone cannot scan the QR Code, we will manually enter the code into the google authenticator app.

How the QR Code is generated. Create a helper function used to generate the QR Code

This helper function generates 1 QR code, it has uri parameter, this uri parameter is 1 is the string used to link and register on google authenticator app.

In the User model, I will create a function to generate uri when creating a QR code

issuer = ENV['OTP_2FA_ISSUER_NAME'] This ENV is my app’s name Like this, when registering on the app, its display authenticator format looks like this

The URI after combining the user’s app name and email will show up like this

5.4 Verify OTP code after scanning QR Code

We only need 1 input to enter the OTP used to verify

In the controller add one more function to verify the otp code

This function is responsible for checking whether the OTP used to verify that you entered is correct. If correct, we create the backup code, save the code to db and save it to the session used to display the backup codes screen.

Why is it important to save the backup code in the session and not get it from the DB for display? Cause: When Devise two factor saves the backup codes in the db, it also encrypts it, the encryption mechanism is like encrypting the password. That is just doing the encryption, I can’t decode it. Purpose for more security to avoid disclosure of your backup code.

It is so to your convenience to display the backup codes and handy to check some cases to navigate the screen, you should save them in the session for convenience. When the user successfully turns on 2-step authentication, I will delete this session.

And this backup code code only shows the first time when scanning the QR code, after the user has turned on 2-step authentication, it will not display anymore.


This content is very long, so this part 1 only covers this step.

In part 2, I will do it

  • The screen displays the backup code and turns on 2-step authentication. Manipulate the backup code such as download, copy
  • Function that generates new backup code, in case you lose your old backup code

I will summarize the demo code and post it on git in the following section.

Share the news now

Source : Viblo