Integrate One Tap Sign In on your website - Django (Python)

Introduction

One Tap Sign In is a phone verification plugin that works on the frontend, similar to Gmail - One Tap Sign in. It simplifies global phone number verification by using OTP/pass code. Sign in with Phone eliminates the need for complex telecom registration and SMS API Gateway integration for each country.

Click here to try One Tap Sign in With Phone demo .

To seamlessly integrate the plugin into your website, follow the instructions provided below.

1. Admin Dashboard
2. Integrate One Tap Sign In button
3. Get verified phone number
4. Logout

1. Admin Dashboard

To integrate One Tap Sign In button on your website, get the CLIENT_ID from the Profile Details section by signing into the Admin Dashboard. You will need to update the Client ID in the code snippet as instructed in step 2.

Admin Dashboard link: https://admin.phone.email

2. Integrate One Tap Sign In button

To integrate One Tap Sign In button on all pages of your website, please add the following code snippet just before closing the <body> tag.

Note - To configure the plugin, you must modify the following parameters in the code snippet above :

client_id: Set client id which you obtained from Profile Details section of Admin Dashboard as explained in Step 1.
button_text: Set button text as per your requirement.
logout: Possible values are "enable" or "disable".
redirect_url: Do not change this variable, it will be updated in next step.

Django



<div id="pheIncludedContent"></div>
<script src="https://auth.phone.email/login_automated_v1_3.js"></script>
<script>
  var reqJson='{"client_id":"TYPE_YOUR_CLIENT_ID_HERE","button_text":"Sign in with Phone","email_icon_position":"left","logout":"enable","redirect_url":""}';
log_in_with_phone(reqJson);
</script>

Also configure cross origin policy in your views file


 # Set the Cross-Origin-Opener-Policy header in your views for handling popups as per the example below. 

 response = render(request, 'index.html')

 response['Cross-Origin-Opener-Policy'] = 'same-origin-allow-popups'

3. Get verified phone number

Create a login success page (Example: https://your-domain-name/loginsuccess) on your website where user will be redirected after successful phone verification and also set this URL in redirect_url variable used in Step 2.

We will supply access_token as query parameter to this page which is required to get verified phone number as per the code snippet below.

  pip install phone-email-auth

Note -

CLIENT_ID: Set client id which you obtained from Profile Details section of Admin Dashboard as explained in Step 1.

Django


from django.shortcuts import render
from django.http import JsonResponse
from phone_email_auth.utils import get_user_info

def index(request):
    try:

        if 'access_token' in request.GET:
            # To get verified phone number call get_user_info() function
            country_code,phone_number = get_user_info('TYPE_YOUR_CLIENT_ID',request.GET['access_token'])
            context = {
                'phone_number': phone_number,
                'country_code' : country_code
            }

	# Register User: If user corrosponding to this verified phone number does not exist in your user table then add the user in your user table here and continue to the next step. If user already exists then skip the next step.
        else:
            context = {
                'phone_number': '',
                'country_code' : ''
            }

        # Render the 'index.html' template with the data
        response = render(request, 'index.html', context)

        # Set the Cross-Origin-Opener-Policy header for handling popups
        response['Cross-Origin-Opener-Policy'] = 'same-origin-allow-popups'

        return response

    except Exception as error:
        # Return a JSON response for internal server error
        return JsonResponse({'message': 'Internal server error.'}, status=500)

4. Logout

To handle logout simply remove the cookie named ph_email_jwt as per your programming language. In addition to deleting the cookie you should also destroy any session you have created during login process. To disable logout button managed by one-tap integration simply change "logout" variable value from "enable" to "disable" in Step 2.

Should you encounter any technical challenges during the integration process, please don't hesitate to reach out to us for assistance.