Django es un marco web basado en Python que le permite crear rápidamente aplicaciones web eficientes. un panel de administración para administrar nuestro sitio web, cómo cargar archivos, etc. Django nos brinda componentes listos para usar fácilmente.
Si es nuevo en Django, puede consultar Introducción e instalación de Django .
Para verificar cómo crear un nuevo proyecto con django y firebase, verifique: ¿Cómo crear un nuevo proyecto en Django usando la base de datos de Firebase?
Aquí vamos a aprender cómo crear inicio de sesión y registro en Django usando Firebase como base de datos. En Firebase Authentication, debemos habilitar el método de inicio de sesión
Otorgar permisos en Firebase Dashboard –
Paso 1: Vaya a Autenticación -> Método de inicio de sesión -> Correo electrónico/Contraseña.
Paso 2: habilite el correo electrónico/contraseña y haga clic en Guardar .
Ahora, espero que ya hayas creado un proyecto en Django. Si no es así, consulte ¿Cómo crear un proyecto básico usando MVT en Django ?
Creación del proyecto de autenticación de Django –
Crear URLs, para mapear las requests en urls.py
Python3
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
# Here we are assigning the path of our url
path('', views.signIn),
path('postsignIn/', views.postsignIn),
path('signUp/', views.signUp, name="signup"),
path('logout/', views.logout, name="log"),
path('postsignUp/', views.postsignUp),
]
Vistas.py
Aquí, usaremos nuestras credenciales de Firebase para la autenticación.
Python3
from django.shortcuts import render
import pyrebase
config={
apiKey: "Use Your Api Key Here",
authDomain: "Use Your authDomain Here",
databaseURL: "Use Your databaseURL Here",
projectId: "Use Your projectId Here",
storageBucket: "Use Your storageBucket Here",
messagingSenderId: "Use Your messagingSenderId Here",
appId: "Use Your appId Here"
}
# Initialising database,auth and firebase for further use
firebase=pyrebase.initialize_app(config)
authe = firebase.auth()
database=firebase.database()
def signIn(request):
return render(request,"Login.html")
def home(request):
return render(request,"Home.html")
def postsignIn(request):
email=request.POST.get('email')
pasw=request.POST.get('pass')
try:
# if there is no error then signin the user with given email and password
user=authe.sign_in_with_email_and_password(email,pasw)
except:
message="Invalid Credentials!!Please ChecK your Data"
return render(request,"Login.html",{"message":message})
session_id=user['idToken']
request.session['uid']=str(session_id)
return render(request,"Home.html",{"email":email})
def logout(request):
try:
del request.session['uid']
except:
pass
return render(request,"Login.html")
def signUp(request):
return render(request,"Registration.html")
def postsignUp(request):
email = request.POST.get('email')
passs = request.POST.get('pass')
name = request.POST.get('name')
try:
# creating a user with the given email and password
user=authe.create_user_with_email_and_password(email,passs)
uid = user['localId']
idtoken = request.session['uid']
print(uid)
except:
return render(request, "Registration.html")
return render(request,"Login.html")
Iniciar sesión.html
HTML
{% if message %}
<script>
alert('{{ message }}');
</script>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign In</title>
<style>
body{
background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}
input{
margin-top:20px;
height: 30px;
padding: 12px 20px;
width: 150px;
margin: 8px 0;
border-radius: 5px;
}
input[type="submit"]{
background-color: rgba(7, 179, 185, 0.753);
color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
}
button{
background-color: rgba(7, 179, 185, 0.753);
color: white;
width: 150px;
height: 30px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<form action="/postsignIn/" method="post">
{% csrf_token %}
<br/>
<!-- Enter Your Email: -->
<label for="Email">Email</label>
<input type="email"id="Email" name="email"><br><br>
<!-- Enter Your Password: -->
<label for="Password">Password</label>
<input type="password" id="Password" name="pass"><br><br>
<input type="submit" value="SignIn"><br><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<button type="button" onclick="location.href='{% url 'signup' %} '">SignUp</button>
</form>
</body>
</html>
Registro.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<style>
body{
background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}
input{
margin-top:20px;
height: 30px;
width: 150px;
border-radius: 5px;
}
input[type="submit"]{
background-color: rgba(7, 179, 185, 0.753);
color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<form action="/postsignUp/" method="post">
{% csrf_token %}
<br/>
<h1>Sign Up</h1>
<p>Please fill in this form</p>
<label for="username">Username</label>
<input type="name" id="Username" name="name" placeholder="Your Name"><br><br>
<!-- Email: -->
<label for="Email" >Email</label>
<input type="email" id="Email" name="email" placeholder="Your Email Id"><br><br>
<!-- Password: -->
<label for="Password">Password/label>
<input type="password" id="Password" name="pass" placeholder="Password"><br><br>
<!-- RepeatPassword: -->
<label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="pass-repeat" placeholder=" Repeat Password"><br><br>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<input type="submit" value="SignUp"><br><br>
</form>
</body>
</html>
Inicio.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<style>
body{
background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}
div{
position:absolute;
right:10px;
top:5px;
}
p{
font-size: 32px;
}
button{
background-color: rgba(7, 179, 185, 0.753);
color: white;
width: 70px;
height: 40px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<br><br>
<div>
<button type="button" onclick="location.href='{% url 'log' %}' ">Logout</button>
</div>
</body>
</html>
Ahora muévase al directorio de su proyecto y ejecute nuestro proyecto usando el comando dado:
python manage.py runserver
Página de inicio de sesión
Página de registro
Página de inicio
Implementación de la función de restablecimiento de contraseña:
Aquí vamos a aprender cómo restablecer la contraseña en Django con una base de datos como Firebase. Como la mayoría de las veces, sucede que olvida su contraseña y desea restablecerla. Así que en este artículo vamos a aprender cómo hacer eso en Django.
Urls.py
Python3
path('reset/', views.reset),
path('postReset/', views.postReset),
Vistas.py
Aquí estamos básicamente mostrando la página Reset.html donde el usuario escribirá su identificación de correo electrónico registrada y recibirá un correo electrónico para restablecer la contraseña. send_password_reset_email es un método predefinido de firebase para restablecer la contraseña.
Python3
def reset(request):
return render(request, "Reset.html")
def postReset(request):
email = request.POST.get('email')
try:
authe.send_password_reset_email(email)
message = "A email to reset password is successfully sent"
return render(request, "Reset.html", {"msg":message})
except:
message = "Something went wrong, Please check the email you provided is registered or not"
return render(request, "Reset.html", {"msg":message})
Iniciar sesión.html
HTML
{% if message %}
<script>
alert('{{ message }}');
</script>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign In</title>
<style>
body{
background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}
input{
margin-top:20px;
height: 30px;
padding: 12px 20px;
width: 150px;
margin: 8px 0;
border-radius: 5px;
}
input[type="submit"]{
background-color: rgba(7, 179, 185, 0.753);
color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
}
button{
background-color: rgba(7, 179, 185, 0.753);
color: white;
width: 150px;
height: 30px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<form action="/postsignIn/" method="post">
{% csrf_token %}
<br/>
<!-- Enter Your Email: -->
<label for="Email">Email</label>
<input type="email"id="Email" name="email"><br><br>
<!-- Enter Your Password: -->
<label for="Password">Password</label>
<input type="password" id="Password" name="pass"><br><br>
<input type="submit" value="SignIn"><br><br>
<p style="color: black;padding: 10px 0;">Forgot Password? <a href="/reset/" style="color: black;">Click Here to Reset</a></p>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<button type="button" onclick="location.href='{% url 'signup' %} '">SignUp</button>
</form>
</body>
</html>
Restablecer.html
HTML
<!DOCTYPE html>
{% load static %}
{%if msg%}
<script>
window.alert('{{msg}}');
</script>
{% endif%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="{% static '/css/Reset.css/' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/footer.css/' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="back">
<a href="/"><i class='fas fa-arrow-left' style='font-size:22px'> </i>Back</a>
</div>
<div class="container">
<div class="inner">
<h1>Reset Your Password</h1><br>
<form action="/postReset/" method="POST">
{% csrf_token %}
<input type="email" name="email" id="email" placeholder="Enter Your email" required><br><br>
<input type="submit" value="Send Reset Link">
</form>
</div>
</div>
</body>
</html>
Ahora muévase al directorio de su proyecto y ejecute nuestro proyecto usando el comando dado:
python manage.py runserver
Haga clic en Haga clic aquí para restablecer y luego será redirigido a otra página.
Ingrese su correo electrónico y haga clic en Enviar enlace de restablecimiento y luego obtendrá un enlace en su correo electrónico para cambiar su contraseña.
Saldrá un cuadro de alerta confirmando que se ha enviado un correo.
Ahora, recibirás un correo como este
.haga clic en él para ver la descripción del correo.
Aquí, haga clic en el enlace dado para cambiar su contraseña.
Aquí, escriba una nueva contraseña y haga clic en Guardar .
Ahora, puede iniciar sesión con su nueva contraseña.
