This text will reveal how one can add MetaMask authentication with Django. Additionally, we’ll discover how to take action in solely 5 steps. In doing so, we’ll create a full-stack Django app the place customers can check in and authenticate themselves with their Web3 pockets. If you don’t want to learn your complete information and as a substitute leap proper into the code, take a look at the next GitHub repo:
Full Add MetaMask Authentication with Django Documentation – https://github.com/MoralisWeb3/demo-apps/tree/important/django_moralis_auth/web3_auth
Web3 authentication is an important mechanism of the decentralized net. Moreover, permitting customers to authenticate with their Web3 wallets makes enterprise providers extra accessible. Additionally, it offers a extra compelling person expertise. This means {that a} unified identification layer positively influences companies and their shoppers concurrently. Furthermore, it’s doable to implement varied authentication mechanisms, and a well-liked choice is MetaMask. So, since Web3 authentication is a crucial performance of Web3 improvement and MetaMask is among the hottest Web3 wallets, this text will deal with that topic. Particularly, we’ll present you the right way to add MetaMask authentication with Django!
Moreover, to allow a extra seamless Web3 authentication stream, we’ll use the Moralis Auth API. In flip, we will create a full-stack Django app the place customers can authenticate with MetaMask in solely 5 easy steps. Nevertheless, in case you are extra snug working with NextJS, take a look at our information on the right way to combine backend Web3 authentication performance! So, if you wish to add authentication mechanisms to your future initiatives or just need to develop into a blockchain developer, enroll with Moralis now. What’s extra, creating an account is freed from cost, and you’ll start creating your first challenge instantly!
Though, earlier than transferring on, let’s go over some fundamentals. Therefore, we’ll begin by taking a look at Django. After that, we’ll dive into the code!
What’s Django?
Earlier than we proceed with the tutorial on the right way to add MetaMask authentication with Django, it may be a good suggestion to discover the intricacies of Django. Therefore, we’ll take this part to elucidate what Django is and the way it helps builders construct their initiatives markedly faster. So, with out additional ado, let’s reply the query, “what’s Django?”.
Briefly, Django is a high-level net framework for Python. Moreover, the framework permits builders to construct initiatives with clear and pragmatic design. Additionally, Django was constructed by builders for builders. Consequently, the framework takes care of many of the heavy lifting related to net improvement. Accordingly, in case you use the framework, you’ll be able to deal with writing purposes. What’s extra, you’ll be able to keep away from the necessity to reinvent the wheel.
Furthermore, Django is solely free and open supply, and listed here are some outstanding options of the framework:
Excessive Safety – Django focuses on reliability by serving to builders hold a excessive stage of safety when creating web sites or purposes. Accordingly, when working with Django, you’ll be able to keep away from a few of the frequent safety errors. Quick – As builders need initiatives to maneuver rapidly to market, Django designed its framework to prioritize pace.Scalability – Django offers the chance to scale rapidly and flexibly.
With a greater understanding of Django, we will transfer on to the primary matter of this text. Accordingly, we’ll illustrate the right way to add MetaMask authentication with Django in solely 5 steps!
Add MetaMask Authentication with Django in 5 Steps with Moralis
On this tutorial, we’ll look nearer on the intricacies of Moralis Web3 authentication by making a full-stack Django app. Furthermore, app customers will be capable to log in with their Web3 wallets and confirm their Web3 identification. Then, as soon as the customers have authenticated themselves, they will view details about themselves. For instance, they will see an ID, tackle, chain ID, and so on. So, for instance what we’re working in the direction of, listed here are two print screens of the login and person pages:
Login Web page:
Consumer Web page:
As talked about, since we’re opting to work with Moralis, it is possible for you to so as to add MetaMask authentication with Django in solely 5 easy steps:
Including Conditions Putting in DependenciesCreating a Django Undertaking and ApplicationEdit ”moralis_auth” SettingsCreating the Important “web3_auth” Software and Templates
So, with no additional ado, let’s leap straight into step one and have a look at the required stipulations we have to care for earlier than we begin creating the applying itself and add MetaMask authentication with Django!
Step 1 – Including Conditions
As with every tutorial, there are particular stipulations required. So, for this tutorial, a Moralis account is the primary prerequisite you have to if you wish to add MetaMask authentication with Django. Therefore, in case you haven’t already, we advise you enroll with Moralis instantly! Furthermore, creating an account is free and solely takes a few seconds.
Moreover, with a Moralis account at your disposal, the second prerequisite is Python 3. So, if you don’t have already got it, you have to set up Python 3. In our case, we’re utilizing Python 3.10 for instance the method.
Lastly, we advise you purchase primary information about Django to make the tutorial extra understandable. Though it isn’t required, in doing so, you’ll profit from it if you wish to comply with alongside throughout this tutorial. Thus, you’ll be able to take a look at the official documentation right here to be taught extra about Django.
That’s it for the stipulations and step one of this tutorial! So, with all of the preparations full, we will transfer on to the second step of the information to indicate you the right way to set up the required dependencies.
Step 2 – Putting in Dependencies
Whether it is wanted, the very first thing you have to to do is create a digital setting. Nevertheless, why so? Briefly, digital environments present a number of advantages as they’ve their very own website directories. Additionally, they are often remoted from different system website directories. Moreover, this implies they will have their very own set of packages. What’s extra, making a digital setting is comparatively easy, and all you want is the next command:
python3 -m venv django_web3_auth_env
With a digital setting at your disposal, we will transfer on. To take action, we’ll set up varied dependencies. Therefore, you have to set up “django” and “requests” dependencies. For this tutorial, we used Django model 3.1, and you should use the next instructions to put in each dependencies:
django_web3_auth_envScripts>pip3.10.exe set up django
django_web3_auth_envScripts>pip3.10.exe set up requests
Nevertheless, guarantee these instructions execute within the explicit scripts folder for the native setting you beforehand created. Furthermore, that is specified within the instructions above since we set the trail to our native setting.
So, with each dependencies put in, the second step on this tutorial is full. Therefore, let’s transfer on and check out how one can create a Django challenge and utility!
Step 3 – Making a Django Undertaking and Software
To provoke the third step, you have to create a Django challenge. So, to create a challenge, you should use the next command:
django_web3_auth_envScriptsdjango-admin startproject moralis_auth
When you run this command and the challenge establishes, it is possible for you to to search out “django-admin” within the “Scripts” folder with the next path “django_web3_auth_envScriptsdjango-admin.exe“.
Subsequent up, you have to additionally create a Django utility, and to make the app, use this command:
django_web3_auth_envScriptspython.exe handle.py startapp web3_auth
Furthermore, ensure that “web3_auth” is situated in the identical folder the place you discover “handle.py”. Nevertheless, this shouldn’t be an issue if the earlier command was run within the folder the place “handle.py” is discovered. As well as, you then must run database migrations. That is comparatively easy, and you should use the next command:
django_web3_auth_envScriptspython.exe handle.py migrate
Moreover, throughout this stage, you have to use the entire path pointing to Python executable within the digital setting created within the second step. Moreover, for the ultimate step, you’ll be able to create a “superuser”; nevertheless, that is non-compulsory. So, to create the superuser, you should use the next code (as soon as once more, you have to level to Python executable in your digital setting):
django_web3_auth_envScriptspython.exe handle.py createsuperuser
Step 4 – Edit ”moralis_auth” Settings
We’ve now arrived on the fourth step of this information. So, on this part, you have to so as to add the newly created app referred to as “web3_auth” to the listing of apps in “settings.py”. Moreover, you have to add the app on the finish of the “INSTALLED_APPS” listing. Furthermore, it’s going to look one thing like this within the code:
INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘web3_auth’
]
Additionally, you have to embrace URLs within the “urls.py” file for the brand new app within the challenge. You also needs to embrace URLs from “django.contrib.auth.urls“, as this lets you use log-out performance. Furthermore, it ought to appear like this within the code:
from django.contrib import admin
from django.urls import path, embrace
urlpatterns = [
path(‘admin/’, admin.site.urls),
path(‘web3_auth/’, include(‘web3_auth.urls’)),
path(‘auth/’, include(‘django.contrib.auth.urls’)),
]
That’s it for the fourth step; nevertheless, we’ve bought yet one more factor to do. So, on this transient information’s fifth and ultimate step, we’ll create the primary “web3_auth” utility. Moreover, this consists of” urls.py”, “views.py”, and two templates. However, with no additional ado, allow us to take a better have a look at the ultimate step!
Step 5 – Creating the Important “web3_auth” Software and Templates
Subsequent up, you have to to create a brand new file referred to as ”urls.py” with the next content material:
from django.urls import path
from . import views
urlpatterns = [
path(‘moralis_auth’, views.moralis_auth, name=’moralis_auth’),
path(‘request_message’, views.request_message, name=’request_message’),
path(‘my_profile’, views.my_profile, name=’my_profile’),
path(‘verify_message’, views.verify_message, name=’verify_message’)
]
Furthermore, as soon as you’re completed including the contents to “urls.py”, you have to create a brand new “views.py” file and add the next:
import json
import requests
from django.shortcuts import render, redirect
from django.http import HttpResponse, JsonResponse
from django.contrib.auth import authenticate, login
from django.contrib.auth.fashions import Consumer
API_KEY = ‘WEB3_API_KEY_HERE’
if API_KEY == ‘WEB3_API_KEY_HERE’:
print(“API key isn’t set”)
elevate SystemExit
def moralis_auth(request):
return render(request, ‘login.html’, {})
def my_profile(request):
return render(request, ‘profile.html’, {})
def request_message(request):
knowledge = json.masses(request.physique)
print(knowledge)
REQUEST_URL = ‘https://authapi.moralis.io/problem/request/evm’
request_object = {
“area”: “defi.finance”,
“chainId”: 1,
“tackle”: knowledge[‘address’],
“assertion”: “Please affirm”,
“uri”: “https://defi.finance/”,
“expirationTime”: “2023-01-01T00:00:00.000Z”,
“notBefore”: “2020-01-01T00:00:00.000Z”,
“timeout”: 15
}
x = requests.publish(
REQUEST_URL,
json=request_object,
headers={‘X-API-KEY’: API_KEY})
return JsonResponse(json.masses(x.textual content))
def verify_message(request):
knowledge = json.masses(request.physique)
print(knowledge)
REQUEST_URL = ‘https://authapi.moralis.io/problem/confirm/evm’
x = requests.publish(
REQUEST_URL,
json=knowledge,
headers={‘X-API-KEY’: API_KEY})
print(json.masses(x.textual content))
print(x.status_code)
if x.status_code == 201:
# person can authenticate
eth_address=json.masses(x.textual content).get(‘tackle’)
print(“eth tackle”, eth_address)
strive:
person = Consumer.objects.get(username=eth_address)
besides Consumer.DoesNotExist:
person = Consumer(username=eth_address)
person.is_staff = False
person.is_superuser = False
person.save()
if person isn’t None:
if person.is_active:
login(request, person)
request.session[‘auth_info’] = knowledge
request.session[‘verified_data’] = json.masses(x.textual content)
return JsonResponse({‘person’: person.username})
else:
return JsonResponse({‘error’: ‘account disabled’})
else:
return JsonResponse(json.masses(x.textual content))
Web3 API Key and Moralis Auth
So, from wanting on the above code, an important factor you have to care for is including an API key on the ninth line. Moreover, you have to exchange “WEB3_API_KEY_HERE” with an actual API key. Furthermore, this code offers a view for the first authentication “moralis_auth“, a view to show profile data “my_profile“, and two views particulate to authentication “request_message” and “verify_message“.
Moreover, “verify_message” is chargeable for requesting messages from the Moralis Auth API to be signed with MetaMask. Additionally, it’s going to validate the returned signature and arrange a person at any time when the validation course of succeeds. Therefore, as soon as the validation is profitable, we create a session for that person and add additional information.
Including the Templates
Lastly, to prime every part off, we have to add two templates. Nevertheless, earlier than doing so, you have to create a brand new folder referred to as “templates”. Subsequent up, you’ll be able to create a brand new “login.html” file with the next content material:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Suitable” content material=”IE=edge”>
<meta identify=”viewport” content material=”width=device-width, initial-scale=1.0″>
<title>Moralis Auth Django Demo</title>
</head>
<physique>
<div>
{% if person.is_authenticated %}
<h1>Welcome Moralis Web3 Consumer, {{ person.username }} !</h1>
<a href=”{% url ‘logout’ %}?subsequent={% url ‘moralis_auth’ %}”>Logout</a>
<br/>
<a href=”{% url ‘my_profile’ %}”> My profile </a>
{% else %}
<h1>Moralis Web3 Login Django demo</h1>
<button class=”btn” id=”auth-metamask”>Login with Moralis Web3 API</button>
{% endif %}
</div>
<script src=”https://cdn.jsdelivr.web/npm/axios/dist/axios.min.js”></script>
<script src=”https://cdn.ethers.io/lib/ethers-5.2.umd.min.js” kind=”utility/javascript”></script>
{% if person.is_authenticated %}
{% else %}
<script>
const elBtnMetamask = doc.getElementById(‘auth-metamask’);
const handleApiPost = async (endpoint, params) => {
const consequence = await axios.publish(`${endpoint}`, params, {
headers: {
‘content-type’: ‘utility/json’,
“X-CSRFToken”: ‘{{ csrf_token }}’
},
});
return consequence.knowledge;
};
const requestMessage = (account, chain) =>
handleApiPost(‘{% url ‘request_message’ %}’, {
tackle: account,
chain: chain,
community: ‘evm’,
});
const verifyMessage = (message, signature) =>
handleApiPost(‘{% url ‘verify_message’ %}’, {
message,
signature,
community: ‘evm’,
});
const connectToMetamask = async () => {
const supplier = new ethers.suppliers.Web3Provider(window.ethereum, ‘any’);
const [accounts, chainId] = await Promise.all([
provider.send(‘eth_requestAccounts’, []),
supplier.ship(‘eth_chainId’, []),
]);
const signer = supplier.getSigner();
return { signer, chain: chainId, account: accounts[0] };
};
const handleAuth = async () => {
// Hook up with Metamask
const { signer, chain, account } = await connectToMetamask();
console.log(“account”, account, “chain”, chain)
if (!account) {
throw new Error(‘No account discovered’);
}
if (!chain) {
throw new Error(‘No chain discovered’);
}
const { message } = await requestMessage(account, chain);
const signature = await signer.signMessage(message);
const { person } = await verifyMessage(message, signature);
console.log(person)
if (person) {
location.reload();
}
else{
alert(“authentication error”)
}
};
operate init() {
elBtnMetamask.addEventListener(‘click on’, async () => {
handleAuth().catch((error) => console.log(error));
});
}
window.addEventListener(‘load’, () => {
init();
});
</script>
{% endif %}
</physique>
</html>
This file additionally accommodates the JavaScript code required to signal messages with MetaMask. Furthermore, you’ll be able to then create a file referred to as “profile.html”, which is the template that reveals present data with reference to an authenticated person. Accordingly, you’ll be able to add the next code to this file:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Suitable” content material=”IE=edge”>
<meta identify=”viewport” content material=”width=device-width, initial-scale=1.0″>
<title>Moralis Auth Django Profile Web page Demo</title>
</head>
<physique>
<div>
{% if person.is_authenticated %}
<h1>Eth tackle: {{ person.username }}</h1>
<h3>Session auth data</h3>
<desk width=”200px” border=”0px” padding=”5px”>
{% for key,worth in request.session.auth_info.objects %}
<tr><td>{{key}}</td><td><pre>{{ worth }}</pre></td></tr>
{% endfor %}
</desk>
<desk width=”200px” border=”0px” padding=”0px”>
<h3>Verified person data</h3>
{% for key,worth in request.session.verified_data.objects %}
<tr><td>{{key}}</td><td>{{ worth }}</td></tr>
{% endfor %}
</desk>
<br/>
<a href=”{% url ‘logout’ %}?subsequent={% url ‘moralis_auth’ %}”>Logout</a>
{% else %}
<a href=”{% url ‘moralis_auth’ %}”> Login web page </a>
{% endif %}
</div>
</physique>
</html>
So, that’s it; congratulations! At this level, you understand how so as to add MetaMask authentication with Django to your future initiatives! Furthermore, in case you loved this tutorial, you’ll be able to be taught extra about different authentication alternate options with Moralis. For instance, discover ways to add sign-in with RainbowKit or add a sign-in with Magic.Hyperlink.
Add MetaMask Authentication with Django – Beginning and Testing the Software
Now that the applying is finalized, the very last thing you have to do is check the applying to verify it really works as meant. So, the very first thing you have to do is begin an area server on port “1000” with the next command:
django_web3_auth_envScriptspython.exe handle.py runserver 1000
Furthermore, after getting began the applying, you must be capable to entry the login web page by way of the next hyperlink: http://127.0.0.1:1000/web3_auth/moralis_auth.
So, from there you’ll be able to check the applying by clicking on the “Login with Moralis Web3 API” button:
This could immediate your MetaMask pockets and let you signal a message:
As quickly as you signal the message and the authentication is profitable, you can be directed to the person web page, which can look one thing like this:
If in case you have additional questions relating to the method of including MetaMask authentication with Django, take a look at the GitHub repository we initially linked to within the introduction. Additionally, you’ll be able to examine Moralis’ official documentation for additional info on the method.
Add MetaMask Authentication with Django – Abstract
Should you adopted alongside on this article, you now know the right way to add MetaMask authentication with Django. In doing so, you created a easy full-stack Django utility the place customers may check in with their MetaMask wallets. Additionally, as soon as authenticated, the applying would show info relating to the customers. Furthermore, because of Moralis’ authentication stream, you have been in a position to create this utility following the 5 steps beneath:
Including Conditions Putting in DependenciesCreating a Django Undertaking and ApplicationEdit ”moralis_auth” SettingsCreating the Important “web3_auth” Software and Templates
Nevertheless, Web3 authentication is simply one of many areas during which Moralis turns out to be useful. For instance, the platform lets you create Web3 webhooks simply or implement Web3 syncs in a heartbeat!
As well as, if you wish to develop into more adept in Web3 improvement, take a look at Moralis’ Web3 weblog. Briefly, the weblog gives premium content material with day by day updates. For instance, be taught extra concerning the EIP-4361 commonplace, and blockchain syncs. Moreover, you’ll be able to study several types of DAOs. Additionally, we extremely advocate trying out Moralis Workshops the place you’ll be able to dive into hands-on challenges aimed towards Web3 improvement. As an example, you’ll be able to discover ways to clone well-liked Web2 apps and switch them into Web3 purposes. What’s extra, a few of these examples embrace cloning Sim Metropolis and an Elden Ring Web3 recreation. Furthermore, you’ll be able to discover ways to construct a Web3 Twitter or a Web3 Offended Birds recreation! So, by collaborating in these challenges, you’ll be able to develop into a more adept Web3 developer very quickly!
So, in case you are planning on moving into blockchain improvement or need to add MetaMask authentication with Django, enroll with Moralis now! Moreover, creating an account solely takes seconds, which can give you a extra accessible developer expertise!
