Introduction
We are excited to delve into another dimension of social authentication within Django: integrating Apple authentication into your applications. By expanding our array of authentication methods, we aim to offer users even smoother sign-in experiences. This initiative follows our successful implementation of Google and Facebook authentication using Django-Allauth, which notably enhanced user engagement.
Social login options like Apple authentication provide users with convenient access to your web application without the need to manage additional credentials. In this article, we’ll walk you through the process of setting up Apple authentication with Django-Allauth. We’ll cover essential configurations, customization techniques, data management best practices, testing strategies, and key security considerations to ensure a seamless and secure integration.
If you find value in our previous discussion on Google and Facebook authentication, you’ll appreciate the insights and techniques shared in this guide for integrating Apple authentication. Let’s continue our journey of empowering Django applications with versatile social authentication capabilities, this time focusing on seamlessly incorporating Apple authentication into your project!
Check out our latest comprehensive guides on enhancing your app’s security through social authentication:
Django + Google Authentication: Elevate Your App’s Security With This Comprehensive Guide
Django + Facebook Authentication: Elevate Your App’s Security With This Comprehensive Guide
Prerequisites
- Apple Developer Account
- One Server with a Domain name
Step 1: Setting Up Project Workflow
Initially, set up a new virtual environment, followed by creating a Django project and a Django App within it.
1.1 Create a virtual environment.
python3 -m venv env_social_login1.2 Active virtual environment in Linux.
source env_social_login/bin/activate1.3 To activate a virtual environment in Windows, run the below command.
env_social_login\Script\activate1.4 Install Django within your virtual environment to encapsulate its dependencies and version, ensuring compatibility with your project.
pip install django1.5 Create a new Django project using the following command.
django-admin startproject social_logincd social_login/1.6 Create a new App using the following command.
python manage.py startapp authappStep 2: Installing Requirements
Install the all-auth package within your Django project’s virtual environment, and configure its settings as necessary to meet requirements.
2.1 Install the all-auth package within your virtual environment by executing the following installation command.
pip install django-allauthpip install django-allauth[socialaccount]2.2 Configure the settings for all-auth according to your project’s requirements, ensuring proper integration and functionality within your Django application.
- Include the following configuration settings within the
settings.pyfile of your social_login project:
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.request',
],
},
},
]
AUTHENTICATION_BACKENDS = [
# Needed to login by username in Django admin, regardless of `allauth`
'django.contrib.auth.backends.ModelBackend',
# `allauth` specific authentication methods, such as login by email
'allauth.account.auth_backends.AuthenticationBackend',
]- Add the following entry to the
INSTALLED_APPSlist within the settings.py file of your project:
'authapp',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.apple, # for apple login- Add the following middleware configuration to the
MIDDLEWARElist within the settings.py file of your project:
'allauth.account.middleware.AccountMiddleware',- Add the following code snippet to the
urls.pyfile of your project:
from django.urls import path, includepath('accounts/', include('allauth.urls')),- Execute the following command to generate your database tables, create a superuser account, and gain access to the admin panel:
python manage.py migratepython manage.py createsuperuserpython manage.py runserverNow you can access the admin panel using the below link.
Step 3: Configure the Apple Developer account
- Navigate to the Certificates, Identifiers & Profiles page by accessing the following link:
- https://developer.apple.com/account/resources/certificates/list
- Once on the Certificates, Identifiers & Profiles page, click on “Identifiers” and then click the plus button to create new Identifiers for enabling Apple ID login. Note that administrative privileges are required to proceed with this step.
- Select “Services IDs” and click “Continue” to proceed with creating a new Identifier.
- Enter your project description and choose a unique identifier name related to your website (e.g., com.domain.service).
- Save the identifier and click “Register” to complete the creation process.
- After redirecting to the identifiers list, locate the newly created identifier and click on it to access the configuration page.
- Enable “Sign in with Apple” and click “Configure” to fill out the necessary details in the form, then proceed by clicking “Next.”
- Navigate to the “Keys” section and click the plus button to create a new key.
- Provide a name for the key, enable “Sign in with Apple,” and click “Configure” to set up the key.
- Select the Primary App ID associated with your project and click “Save.”
- Click “Continue,” review the information, then click “Register.”
- Download the key and click “Done” to complete the setup process.
Step 4: Configuring Client ID and Client Secret in Django
4.1 Include the following configuration in your settings.py file:
SOCIALACCOUNT_PROVIDERS = {
"apple": {
"APP": {
# Your service identifier.
"client_id": "<Your Service ID>",
# The Key ID (visible in the "View Key Details" page).
"secret": "<Your Key ID>",
# Member ID/App ID Prefix -- you can find it below your name
# at the top right corner of the page, or it’s your App ID
# Prefix in your App ID.
"key": "<Your Key>",
"settings": {
# The certificate you downloaded when generating the key.
"certificate_key": """<Your downloaded Key>"""
}
"scope": ["email","user"]
}
}
}
LOGIN_URL = 'login'
LOGOUT_URL = 'logout'
LOGIN_REDIRECT_URL = 'dashboard'
LOGOUT_REDIRECT_URL = 'login'
SOCIALACCOUNT_AUTO_SIGNUP = True
SOCIALACCOUNT_LOGIN_ON_GET = True4.2 Add the following code snippet to the views.py file of your Django app:
from django.shortcuts import render, redirect
# Create your views here.
from django.contrib.auth.decorators import login_required
from django.contrib.auth import logout
# Create your views here.
def userLogin(request):
return render(request,'login.html')
@login_required
def dashboard(request):
print(request)
return render(request,'dashboard.html')
def userlogout(request):
# Logout the user
logout(request)
return redirect('login')4.3 Create a urls.py file in your authapp and add the following code:
from django.urls import path
from .views import userLogin, dashboard, userlogout
urlpatterns = [
path('', userLogin, name='login'),
path('dashboard/', dashboard, name='dashboard'),
path('logout/', userlogout, name='logout'),
]4.4 Add the following code snippet to the urls.py file of your project:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('authapp.urls')),
path('accounts/', include('allauth.urls')),
]4.5 Create a “templates” folder at the project level of your Django project, and then add the login.html and dashboard.html templates into this folder.
login.html
{% load socialaccount %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center login-container">
<div class="col-md-6 col-sm-8 col-lg-4">
<div class="card">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<button type="submit" class="mt-2 btn btn-primary btn-block">Login</button>
<a href="{% provider_login_url 'apple' %}" class="btn btn-danger mt-2 fa fa-facebook"></a>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome to Dashboard</h1>
<a class="btn btn-danger" href="{% url 'logout' %}">Logout</a>
</body>
</html>Step 5: Running Django Project
To run your Django project with Apple login functionality, Restart your service:
Access the site using the your website Login URL
Conclusion
In conclusion, integrating an Apple social login offers a straightforward yet impactful method to enhance user convenience and engagement across your Django projects. Simplify registration processes, boost user interaction, and elevate your application’s overall user experience by adopting this seamless authentication solution.