Implementing Google One Tap Sign-In for Django
This guide details the process for integrating Google's One Tap sign-in into your Django application, utilizing the Django development server alongside Google's JavaScript library to facilitate streamlined authentication. For comprehensive documentation and tutorials, refer to Google's Developer Guide on One Tap sign-in.
Setting Up the Django Development Server
Begin by ensuring your Django development server is up and running, particularly within our interview_db
project framework.
# Move into your project directory
cd interview_db/
# Activate your virtual environment
source venv/bin/activate
# Launch the Django development server
python manage.py runserver
Make sure the django-allauth python package and the socialaccount package are installed. If not, install them using the command below:
pip install django-allauth[socialaccount]
The output should confirm the server's active status. Should any problems arise, revisit the initial setup instructions or consult the project's GitHub repository for additional help.
Locating the Google One Tap JavaScript Library
Within the base.html
file, situated at the end of the JavaScript block, you'll encounter the code snippet below. This segment incorporates Google's One Tap sign-in JavaScript library into your application:
<!-- Include Google's One Tap sign-in JavaScript library -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
{% if not request.user.is_authenticated %}
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="{% url 'google_login_by_token' %}">
</div>
{% endif %}
Incorporating Google's One Tap sign-in feature requires you to replace YOUR_GOOGLE_CLIENT_ID
with your actual Google Client ID. You can acquire a client ID by visiting Google's guide on obtaining an API client ID. Alternatively, you can navigate to https://console.cloud.google.com/
, create a new project, and then proceed as follows to create a new OAuth 2.0 client ID:
Create a New OAuth 2.0 Client ID
- Head over to the
APIs & Services
section and click onCredentials
. - Select
CONFIGURE CONSENT SCREEN
and complete the necessary fields: - User Type: External
- Application Name: Enter the name of your application.
- Support Email: Specify your support email address.
- App Logo: Note: This step is optional, and it's advisable not to upload a logo at this stage. Uploading a logo can delay the verification process by up to a month. You can always add it later if needed.
- App Domain: Add your domain, such as
https://interviewdb.com
. - Authorized Domains: Enter your domain again, e.g.,
interviewdb.com
.
Following these steps will guide you through the process of setting up Google's One Tap sign-in, enhancing the user login experience for your Django application.
Scope & Test Users
There's no need to add any scopes or test users at this point. Simply click Save and Continue
through each step until you reach the end.
Ready for Credentials
Navigate to the Credentials
tab on the left side of the console, then click the Create Credentials
button and choose OAuth client ID
. You'll be prompted to select the type of application; choose Web application
and fill in the required fields:
-
For Authorized JavaScript origins:
-
Include both
http://localhost:8000
and your production domain, for example,https://interviewdb.com
. -
For Authorized redirect URIs:
-
Enter
http://localhost:8000/accounts/google/login/callback/
and your production domain callback URL, such ashttps://interviewdb.com/accounts/google/login/callback/
. Remember to add the trailing slash/
at the end of each URL.
Upon clicking Create
, you'll receive your client ID and secret key. Make sure to Download
the credentials and store them in a secure location outside of your project directory to prevent them from being accidentally committed to your git repository.
Google Cloud might take a while to reflect the changes made to your credentials. If you encounter any issues,
please allow a few minutes before trying again. Your client ID might resemble something like
1234567890-abc123def456.apps.googleusercontent.com
.
Install Google Secret
Access your admin page and log in with your superuser account. Head to the Social Applications
section to add a new application with the following information:
- Provider: Google
- Name: Google One Tap
- Client ID: YOUR_GOOGLE_CLIENT_ID
- Secret Key: YOUR_GOOGLE_SECRET_KEY
- Sites: Ensure your site (e.g.,
interviewdb.com
) is selected. Move it to theChosen sites
list using theright arrow
button. If your site isn't listed, create a new one via theSites
link in the left-side admin panel.
If you haven't yet created a superuser account, do so with the command below:
heroku run python manage.py createsuperuser
Complete the prompts to establish a superuser account on your server.
Once configured, return to the homepage. If using Chrome with a logged-in Google account, the Google One Tap sign-in prompt should appear.
If you're using Chrome's, the One Tap sign-in prompt may not appear, and it might take a while for the prompt to appear. If you encounter any issues, try clearing your browser's cache and cookies or using an incognito window.
##Conclusion By following these instructions, you'll successfully incorporate Google's One Tap sign-in into your Django application, offering users a seamless authentication experience. To see practical applications of this workflow, visit SQLPad or skills.ai.