{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/guest-post/implementing-registration-and-authentication-in-django-using-loginradius/","result":{"data":{"markdownRemark":{"id":"3398f7ed-99a0-500c-8c54-8c4a5d3b24be","excerpt":"Prerequisite You should be familiar with Python and Django, a Python framework. Overview First, we briefly introduce LoginRadius, what it is, and some benefits…","html":"

Prerequisite

\n

You should be familiar with Python and Django, a Python framework.

\n

Overview

\n

First, we briefly introduce LoginRadius, what it is, and some benefits of using it; then, will move over to see how to implement user registration and authentication in Django using LoginRadius.

\n

Introduction

\n

What is LoginRadius?

\n

LoginRadius is a SaaS-based CIAM platform. It offers simplified, robust features to manage customer identity, privacy, and access -- allowing developers and businesses to provide a seamless and secure digital experience for their customers.

\n

The developer-friendly CIAM provides a comprehensive set of APIs for registration, authentication, identity verification, single sign-on (SSO), and more.

\n

Why should we use LoginRadius?

\n\n

LoginRadius offers many more benefits than above. You can learn more here.

\n

Getting started

\n

To get started with LoginRadius, you have to first create a free developer account.

\n

If you already have an account, log into your LoginRadius dashboard\nYou will see a page like this:

\n

\"Dashboard\"

\n

When you create an account, LoginRadius sets up a free app for you. This is the app you are going to integrate with Django. Here my app name is \"tammibriggs\".

\n

Click on your app, and you will see a page like this:

\n

\"LoginRadius

\n

There is one more thing LoginRadius automatically creates for you: an Auth Page (IDX).

\n

At this point, you know what LoginRadius is, its benefits, and how to get started with LoginRadius. Let’s see how to integrate LoginRadius with a Django application.

\n

Integrating LoginRadius with a Django Application

\n

This section covers:

\n\n
\n

You must have python installed, and the minimum supported version is 2.7.

\n
\n

Getting API Credentials

\n

Before using any of the APIs that LoginRadius provides, you need to get your App Name, API Key, and API Secret.\nOn your LoginRadius app, navigate to Configuration > API Credentials

\n

\"API

\n

You will find your API key under the API Key and Secret subsection.

\n

\"API

\n

Whitelist your Domain

\n

For security reasons, LoginRadius processes the API calls that are received from the whitelisted domains.\nLocal domains (http://localhost and http://127.0.0.1) are whitelisted by default. This means you don't have to worry about whitelisting your domain if you are running your application on Django's development server. But in a production environment, you definitely have to whitelist our domain.\nTo whitelist your domain, in your LoginRadius Dashboard, navigate to Configuration > Whitelist Your Domain and add your domain name.

\n

\"Whitelist

\n

Installation of Dependencies

\n

You need to install the LoginRadius Python SDK. It provides functionalities that allow Python programs to communicate with LoginRadius APIs.\nOpen VS Code, PyCharm, or any other editor you use in general.\nIn the terminal, type:

\n
$ pip install LoginRadius-v2 requests cryptography pbkdf2
\n

These are the dependencies you need to integrate LoginRadius into your Django application.

\n

Setting up Django

\n
    \n
  1. Install Django.
    2. \n
  2. Create a new project.
    3. \n
  3. Create an app inside the project.
    4. \n
  4. Migrate your project.
    5. \n
  5. Create a urls.py file in your app.
    6. \n
\n

You can accomplish all this with the following commands in your terminal:

\n
$ python -m pip install django\n\n$ django-admin startproject radiusAuth\n\n$ cd radiusAuth\n\n$ python manage.py startapp radiusApp\n\n$ python manage.py migrate\n\n$ cd radiusApp\n\n$ type nul > urls.py
\n

Here, the project name is radiusAuth and the app radiusApp but you can use any name you want.\nYou now have a radiusAuth project and radiusApp app setup.

\n

Configure Project

\n

You need to tell Django about the app you created and the location of the app's urls.py file.\nFirst, let Django know the location of your app.\nIn your radiusAuth project navigate to radiusAuth/settings.py, modify the INSTALLED_APPS:

\n

radiusAuth/settings.py

\n
INSTALLED_APPS = [\n    "django.contrib.admin",\n    "django.contrib.auth",\n    "django.contrib.contenttypes",\n    "django.contrib.sessions",\n    "django.contrib.messages",\n    "django.contrib.staticfiles",\n    "radiusApp",\n]
\n

Once you have added it, go over to the urls.py file in the same directory, modify the urlpatterns and include the apps url location.

\n

radiusAuth/urls.py

\n
from django.contrib import admin\nfrom django.urls import path, include\n\nurlpatterns = [\n    path('admin/', admin.site.urls),\n    path('', include('radiusApp.urls'))\n]
\n

User Registration and Authentication

\n

Remember, we said that there is a webpage LoginRadius automatically created for you: an Auth Page (IDX), which already has registration and authentication implemented. You will utilize this web page to meet your registration and authentication needs.\nHow would you do that?

\n

You can access your registration and login page with the following URLs.

\n

Registration Page URL:

\n
https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url={RETURN_URL}
\n

Login Page URL:

\n
https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url={RETURN_URL}
\n\n

So, what you will do now is to create links or buttons that users can click to access these URLs.\nFirst, create a view that will be responsible for displaying your registration and login page.\nEdit the views.py file of the radiusApp application and add the following code:

\n

radiusApp/views.py

\n
from django.shortcuts import render\n\ndef register_n_login(request):\n    return render(request, 'index.html')
\n

All this view does is render an HTML page as a response. Now, you need to add the URL pattern for this view.

\n

In the urls.py file of your radiusApp application, add the following code:

\n

radiusApp/urls.py

\n
from django.urls import path\nfrom . import views\n\nurlpatterns = [\n    path('', views.register_n_login, name="access"),\n]
\n

The register_n_login view can now be accessed by a URL. It's time to create a template for your view. But before you do that, let me introduce some basic styling you will use in your application.

\n

Create a static directory and a style.css file in your app directory.\nOpen your terminal and type the following command:

\n

radiusAuth/radiusApp

\n
$ mkdir static\n$ cd static\n$ type nul > style.css
\n

Open the style.css file and the following CSS styles:

\n
*{\n    margin: 0;\n    border: 0;\n}\n\nbody{\n    background-color: hsl(210, 15%, 95%);\n}\n\n.wrapper{\n    width: 90%;\n    height: 100vh;\n    margin: 0 auto;\n    display: flex;\n    align-items: center; \n    flex-direction: column;\n    justify-content: center;\n}\n\n.choice{\n    text-align: center;\n    line-height: 30px;\n}\n\n.choice span{\n    color: hsl(207, 37%, 76%);\n}\n\n.choice span:nth-child(1){\n    font-size: 1.3rem;\n    color: hsl(210, 7%, 55%);\n}\n\n\n.access{\n    width: 100%;\n    max-width: 400px; \n    height:150px;\n    display: flex;\n    justify-content: space-evenly;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    margin-bottom: 20px;\n    font-size: 1.2rem;\n}\n\n.access button{\n    width: 90%;\n    padding: 0.7rem 0.4rem;\n    background-color: hsl(207, 73%, 30%);\n    color: white;\n}\n\n.profile{\n    width:100%; \n    max-width: 400px; \n    min-height: 300px;\n    background-color: white;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.profile__head{\n    width: inherit;\n    flex: 0.3;\n    background-color: hsl(207, 73%, 30%);\n    display:flex;\n    align-items:center;\n    justify-content: center;\n}\n\n.profile__head h4{\n    font-size: 36px;\n    font-weight: 400px;\n    color: white;\n}\n\n.profile__details{\n    width: 90%;\n    margin: 0 auto;\n    line-height: 35px;\n    flex: 0.5;\n}\n\n.profile__details span{\n    font-size: 1.2rem;\n}\n\n.label{\n    color: hsl(210, 7%, 55%);\n}
\n

Now, create the template for your register_n_login view.

\n

Create a templates directory and a index.html file in your app directory.

\n

Open your terminal and type the following command:

\n

radiusAuth/radiusApp

\n
$ mkdir templates\n$ cd templates\n$ type nul > index.html
\n

Open the index.html file and add the following HTML

\n

templates/index.html

\n
{% load static %}\n \n <!DOCTYPE html>\n <html>\n     <head>\n         <meta charset="utf-8">\n         <meta name="viewport" content="width=device-width, initial-scale=1.0">\n         <title>Registration and Login page</title>\n         <link rel="stylesheet" href="{% static 'style.css' %}">\n     </head>\n \n     <body>\n         <div class="wrapper">\n \n             <div class="access">\n                 <span>Open an account with us</span>\n                 <button onclick="window.location.href='https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url=http://127.0.0.1:8000/';">\n                     Register\n                 </button>\n             </div>\n             <div class="choice">\n                 <span>OR</span><br>\n                 <span>If you already have account</span>\n             </div>\n             <div class="access">\n                 <span>Log into your account</span>\n                 <button onclick="window.location.href='https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=http://127.0.0.1:8000/profile/';">\n                     Login\n                 </button>\n             </div>\n \n         </div>\n     </body>\n </html>
\n

We used an onclick event on both the register and login buttons, which when clicked changes the window's location to the Auth Page (IDX) register and login page respectively.

\n

NOTE: Don’t forget to replace the {APP_NAME} placeholder with your LoginRadius app name.

\n

Also, in the register and login link, we replaced the {RETURN_URL} parameter with http://127.0.0.1:8000/profile/, which is the user profile page you are going to create shortly.

\n

Run the development server and open http://127.0.0.1:8000/, you will see a page like this:

\n

\"Register

\n

Now, when you click the register or login button, you will see a page like this:

\n

\"Auth

\n
\n

When LoginRadius successfully authenticates a user, it attaches an access token in the query string as a token parameter to the REDIRECT_URL.

\n
\n

Retrieve User Data using Access Token

\n

In this section, you are going to retrieve the authenticated user data using access token. But first you need to initialize LoingRadius SDK with your APIKEY and APISECRET.

\n

Intializing LoginRadius SDK

\n

Create a new config.py file in your radiusApp directory.

\n

Open your terminal and type this command:

\n

radiusAuth/radiusApp

\n
$ type nul > config.py
\n

Open the config.py file and add the following lines of code:

\n

radiusApp/config.py

\n
from LoginRadius import LoginRadius as LR\n\nLR.API_KEY = "API_KEY"\nLR.API_SECRET = "API_SECRET"\nloginradius = LR()
\n

Replace APIKEY and APISECRET with your respective LoginRadius API credentials.

\n

Now, create the view that will be responsible for retrieving user data.

\n

Open the views.py file in your radiusApp directory and add the following lines of code:

\n

radiusApp/views.py

\n
from django.shortcuts import render, redirect\nfrom django.http.response import HttpResponse\nfrom .config import loginradius\n\ndef register_n_login(request):\n#...\n\ndef profile(request):\n\n    if request.GET.get('token'):    \n        try:\n            user_data = loginradius.authentication.get_profile_by_access_token(request.GET.get('token'))\n        except Exception as inst:\n            return HttpResponse(inst)\n    else:\n        return redirect('access')\n\n    return render(request, 'profile.html', {'user_data':user_data})
\n

In this code snippet, we imported the initialized LoginRadius class from the config.py file and also imported redirect and HttpResponse from there respective modules.

\n

We also introduced a new function called profile. In this function we did the following:

\n\n

Now, add the URL pattern and also create a template for your views.

\n

Modify the urls.py file in the radiusApp directory.

\n

radiusApp/urls.py

\n
urlpatterns = [\n    #...\n     path('profile/', views.profile, name="profile")\n ]
\n

Head over to the templates directory in the radiusApp directory and create a profile.html file.

\n

In the termainal type:

\n

radiusApp/templates

\n
$ type nul > profile.html
\n

Open your profile.html file and add the following HTML code:

\n

templates/profile.html

\n
{% load static %}\n \n <!DOCTYPE html>\n <html>\n     <head>\n         <meta charset="utf-8">\n         <meta name="viewport" content="width=device-width, initial-scale=1.0">\n         <link rel="stylesheet" href="{% static 'style.css'%}">\n         <title>Profile</title>\n     </head>\n \n     <body>\n \n         <div class="wrapper">\n             <div class="profile">\n                 <div class="profile__head">\n                     <h4>profile details</h4>\n                 </div>\n \n                 <div class="profile__details">\n                     <span>\n                     <span class="label">Provider: </span> {{user_data.Provider}}<br>\n                     {% for i in user_data.Email %}\n                         <span class="label">Email: </span>{{i.Value}}<br>\n                     {% endfor %}\n \n                     <span class="label">Number of login:</span> {{user_data.NoOfLogins}}\n                     </span>\n                 </div>\n             </div>            \n         </div>\n \n     </body>\n </html>
\n

Here we displayed the Provider, Email and NoOfLogins from the user_data. These are just some of the data present in the user_data.

\n

Now, if you run your development server, and then register and login a user, you should see a page like this:

\n

\"Profile

\n

To see the entire data present in the user_data, you can do something like this in your profile.html, file:

\n
{% load static %}\n\n<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1.0">\n        <link rel="stylesheet" href="{% static 'style.css'%}">\n        <title>Profile</title>\n    </head>\n\n    <body>\n\n        {{user_data}}\n\n    </body>\n</html>
\n

Conclusion

\n

In this tutorial, we discussed how to use LoginRadius for registration and authentication in Django. We started by introducing LoginRadius, what it is, its benefits, and how to get started with it. Then, we illustrated building a demo application with Django and implemented registration and authentication using LoginRadius.

\n

GitHub repo: radiusAuth

\n","headings":[{"value":"Prerequisite","depth":2},{"value":"Overview","depth":2},{"value":"Introduction","depth":2},{"value":"Getting started","depth":2},{"value":"Integrating LoginRadius with a Django Application","depth":2},{"value":"User Registration and Authentication","depth":2},{"value":"Retrieve User Data using Access Token","depth":2},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/guest-post/implementing-registration-and-authentication-in-django-using-loginradius/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"In this tutorial, you will learn how to implement user registration and authentication in Django using LoginRadius.","title":"How to Implement Registration and Authentication in Django?","canonical":null,"date":"July 30, 2021","updated_date":null,"tags":["Django","Authentication","User Registration"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/a36d9f6c867cda8a6951773c8c77de0d/03979/coverImage.png","srcSet":"/static/a36d9f6c867cda8a6951773c8c77de0d/f5f11/coverImage.png 200w,\n/static/a36d9f6c867cda8a6951773c8c77de0d/6d133/coverImage.png 400w,\n/static/a36d9f6c867cda8a6951773c8c77de0d/03979/coverImage.png 800w,\n/static/a36d9f6c867cda8a6951773c8c77de0d/aca38/coverImage.png 1200w,\n/static/a36d9f6c867cda8a6951773c8c77de0d/3741a/coverImage.png 1600w,\n/static/a36d9f6c867cda8a6951773c8c77de0d/da528/coverImage.png 4032w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Taminoturoko Briggs","github":"tammibriggs","bio":"An enthusiastic software developer conversant with Python and JavaScript.","avatar":null}}}},"pageContext":{"id":"3398f7ed-99a0-500c-8c54-8c4a5d3b24be","fields__slug":"/engineering/guest-post/implementing-registration-and-authentication-in-django-using-loginradius/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}