AX3 OTP Auth

AX3 OTP Auth is a very simple Django library for generating and verifying one-time passwords using HTOP guidelines.

Installation

Axes is easy to install from the PyPI package:

$ pip install django-axes

After installing the package, the project settings need to be configured.

1. Add ax3_OTP to your INSTALLED_APPS::

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Axes app can be in any position in the INSTALLED_APPS list.
    'ax3_OTP_Auth',
]

2. Add ax3_OTP_Auth.backends.OTPAuthBackend to the top of AUTHENTICATION_BACKENDS:

AUTHENTICATION_BACKENDS = [
    'ax3_OTP_Auth.backends.OTPAuthBackend',

    # Django ModelBackend is the default authentication backend.
    'django.contrib.auth.backends.ModelBackend',
]

3. Add the following to your urls.py:

urlpatterns = [
    path('OTP-Auth/', include('ax3_OTP_Auth.urls', namespace='otp_auth')),
]

4. Create html button to your template:

<button class="js-otp-auth" type="button" otp-login="{% url 'otp_auth:start' %}" otp-redirect="{% url 'login' %}">
    Login
</button>

5. Create Javascript for open OTP window:

$(() => {
    $('.js-otp-auth').on('click', function () {
        let redirect = $(this).attr('otp-redirect');
        let OTPLoginUrl = $(this).attr('otp-login');

        let width = 420;
        let height = 470;
        let top = (screen.height / 2) - (height / 2);
        let left = (screen.width / 2) - (width / 2);

        window.open(`${window.origin}${OTPLoginUrl}?redirect=${redirect}`, '_blank', `location=yes, scrollbars=yes, status=yes, width=${width}, height=${height}, top=${top}, left=${left}`);
    });
});

Configuration

If your need pass any param for whole pipeline you can use OTP_AUTH_PARAMS:

`OTP_AUTH_PARAMS = ['param']`

If your need change life time cache value you can use OTP_AUTH_TTL:

`OTP_AUTH_TTL = 60 * 60 * 5  # 5 minutes`

If your need change sms message:

`OTP_AUTH_MESSAGE = 'Utiliza {} como código de inicio de sesión.`

Configure countries allowed list: COLOMBIA = 57 ARGENTINA = 54 BOLIVIA = 591 CHILE = 56 COSTA_RICA = 506 CUBA = 53 DOMINICAN_REPUBLIC = 809 ECUADOR = 593 GUATEMALA = 502 MEXICO = 52 PERU = 51

OTP_AUTH_COUNTRIES_CODES = [57, 54]

Change color, brand name and logo using this variables:

OTP_PRIMARY_COLOR = '#eb6806'
OTP_BACKGROUND_BTN = '#eb6806'
OTP_BACKGROUND_BTN_HOVER = '#000'
OTP_COLOR_TEXT_BTN = '#fff'
OTP_COLOR_TEXT_BTN_HOVER = '#fff'
OTP_BRAND_NAME = 'Axiacore'
OTP_BRAND_IMG = 'user-relative-path'

NSN Configuration

AX3 OTP use NSN AWS service for sending messages, please create a group and AIM user with the following policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "sns:Publish",
                "sns:SetSMSAttributes",
                "sns:GetSMSAttributes"
            ],
            "Resource": "*"
        }
    ]
}

Set AIM user credentials to your settings:

OTP_AUTH_AWS_ACCESS_KEY_ID = ''
OTP_AUTH_AWS_SECRET_ACCESS_KEY = ''
OTP_AUTH_AWS_DEFAULT_REGION = 'us-west-2'

Authentication and Authorization

Authenticated user requires an OTP, this OTP was sent by AWS SNS service, once the code is valid, the system returns a token that must then be used to obtain the phone number which was requested. for this purpose you can use 'get_phone_number':

hotp = HOTP(session_key=request.session.session_key)
phone_number = htop.get_phone_number(code='123')

Custom SMS Gateway

Set OTP_CUSTOM_SMS_GATEWAY to your settings with the path of your function and the function must be receive country_code, phone_number and message

OTP_CUSTOM_SMS_GATEWAY = 'app.utils.send_sms'

Style SASS

For development porpuse is necessary to compile the SASS files before you commit any change.

Install node from this link:

https://nodejs.org/en/

Then install sass

$ sudo npm install -g sass

It ask you for a password, write de password of the user of the computer.

Compile SASS

To change the styles of the web page you need to do edit the Sass's files and then run this command on the root folder of the project to compile it to CSS:

$ sass --watch ax3_OTP_Auth/static/otp_auth/sass/styles.sass ax3_OTP_Auth/static/otp_auth/css/styles.css