LOGIN

--- title: Strapping Django & Android Application published: true description: Using Django Server as Backend for communicating with Android App. tags: #Api,#Android,#django,#Backend ---

Have you developed an web application using Django and Thinking of extending it to android application?

Then you are at perfect place.

Let's get Started!!

Our Plan:

1] Creating the Django Web Application: We will be creating basic user profile mechanism in django web application.

2] Creating API to Communicate with Android: We will be creating the Controllers(Django Views) which will return JSON response (will act as API) Which we will catch in android application.

3] Developing Android Networking Application: We will be creating android networking app which will be communicating with Django API's.

____

NOTE:- You must Deploy Your web application Online such that the site must be publically Accessible(i.e It must be accessible from other devices).

____

Now Let's Execute Our Plan:

1] Developing Basic Student Profile Application in Django: * Start by creating the Django Project(basic_app) by typing following command in to the terminal: `django-admin startproject basic_app` * Create new app StudentProfile in your project: ``` cd basic_app python manage.py startapp StudentProfile python manage.py createsuperuser ``` 1st command will take terminal into current project directory. 2nd command is used to create StudentProfile app. 3rd command creates superuser(admin) for admin site.This command ask for username,email and password. * We are sort of extending basic User auth model to store the other information specific to student by providing one-to-one relation between StudentProfile and User: ```python #CODE SNIPPET 1 from django.db import models #Create your models here. from django.db import models from django.contrib.auth.models import User class StudentProfile(models.Model): user = models.OneToOneField(User,on_delete=models.CASCADE,primary_key=True) student_id = models.CharField(max_length=7,null=False,unique=True,default='') profile_pic = models.ImageField(upload_to='profilepic/',null=False,default='') mobile_number=models.BigIntegerField(blank=True,default=9999999999) def __str__(self): return "{}".format(self.student_id) ``` The Above code goes in to models.py in StudentProfile App. * As from code snippet 1 we are storing profile picture of the student so we must define MEDIA_URL & MEDIA_ROOT in settings & also some other settings for serving Static Files: ```python #CODE SNIPPET 2 #add this lines in settings.py STATIC_URL = '/static/' MEDIA_URL = '/media/' STATICFILES_DIRS = [os.path.join(BASE_DIR,'assets/static/'),''] MEDIA_ROOT = os.path.join(BASE_DIR,'assets/') ``` Also in DIRS field in TEMPLATE dict in settings.py add path:`['assets/static/',]` Also add 'StudentProfile' in Django Settings.py in INSTALLED_APPS at end this helps the server detecting new apps in project: ``` INSTALLED_APPS=[ ..., ..., 'StudentProfile',] ``` * Create folder assets in project directory and inside assets create 2 folder static and profilepic (static will serve template,css,js & profilepic will store profile picture of student). * Once we have created model we should register the model in admin site so we can add remove edit the model instances from admin site: ```python #CODE SNIPPET 3 from .models import StudentProfile from django.contrib import admin admin.site.register(StudentProfile) ``` * Now we will define controller (Django Views) for how to render login form and how to render student information after successfull login(we are creating very basic form because our main purpose is to create api which will communicate with android): ```python #CODE SNIPPET 4 from django.shortcuts import render,HttpResponse,redirect from django.contrib.auth import logout,login,authenticate from .models import StudentProfile from django.core import serializers from django.contrib.auth.models import User # Create your views here. def Login(request): if request.method == 'POST': user=authenticate(request,username=request.POST.get('username'),password=request.POST.get('password')) if user is not None: login(request,user) return redirect('/display') else: return HttpResponse("Credentials are Incorrect") else: return render(request,'html/login.html',{}) def display(request): if request.method == 'GET': user = User.objects.filter(pk = request.user.pk)[0] profile = StudentProfile.objects.filter(user = request.user.pk)[0] return render(request,'html/display.html',{'user':user,'profile':profile}) def Logout(request): if request.user.is_authenticated: logout(request) return redirect('/') else: return HttpResponse("ERROR:Error Logging Out") ``` This code goes Into views.py in StudentProfile. Explanation:- 1]Login:-this defination checks whether the request is 'POST' or 'GET' if It is 'GET', Then It will render the form for Signin.Else,if request is 'POST' then it will use data received from form and will try to authenticate user.If credentials are correct then user is LoggedIn else Error message is displayed. 2]display:- Once User is Successfully loggedin he is redirected to dispaly page which displays his information by rendering the html. 3]Logout:-This defination logs the user out. ___

NOTE:- We will just require to change our views to create the API's for communicating with android application.

___ * Now we will create Urls (Routers) which will route us to different controller which will render pages for us: ```python #CODE SNIPPET 5 from django.contrib import admin from django.urls import path,include from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('',include('StudentProfile.urls')), ] urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` This code must be contained by basic_app urls.py file. Explanation:- 1]urlpatterns define url for invoking different controllers which either renders or redirects. 2]include is used to include all urls of apps. 3]We are adding urlpatterns for MEDIA_ROOT ('assets/') URL will be MEDIA_URL ('/media/').This will expose Media files from project directory. ```python #CODE SNIPPET 6 from django.contrib import admin from django.urls import path,include from .views import Login,display,Logout urlpatterns = [ path('',Login),#Calls Login View(Homepage) path('display/',display),#Calls display View(After Successful Login ) path('logout/',Logout),#Controller for logging out ] ``` This code must be contained by StudentProfile's urls.py. * Now we Need to Create Template's which will be render by Views: ```html LOGIN ``` This Templates should be stored in assets/static/html as login.html ```html {% load static %}

username:{{user.username}}

firstname:{{user.first_name}}

lastname:{{user.last_name}}

email:{{user.email}}

student_ID:{{profile.student_id}}

mobile number:{{profile.mobile_number}}

``` This Templates should be stored in assets/static/html as display.html

Now We are Done with our Web App

2] Creating API's for Android Application:-As in one of the Note, I told it's very easy to create the API's.We will use same controller as created before for web application just we will have some small changes. * Start New Project Called api:`python manage.py startapp api` * Form & Login API: ```python from django.shortcuts import render,HttpResponse,redirect from django.contrib.auth import logout,login,authenticate from StudentProfile.models import StudentProfile from django.core import serializers from django.contrib.auth.models import User from django.middleware.csrf import * # Create your views here. def Login(request): if request.method == 'POST': user=authenticate(request,username=request.POST.get('username'),password=request.POST.get('password')) if user is not None: login(request,user) return redirect('/api/display/') else: return HttpResponse("ERROR:-Credentials are Incorrect") else: if request.session.is_empty(): return render(request,'html/api_login_workThrough.html',{}) authenticate(request) print('-------------------') print(request.user) return redirect('/api/display/') def display(request): if request.method == 'GET': user = User.objects.filter(pk = request.user.pk)[0] profile = StudentProfile.objects.filter(user = request.user.pk)[0] return HttpResponse(serializers.serialize('json',[user,profile])) def Logout(request): if request.user.is_authenticated: logout(request) return redirect('/') else: return HttpResponse("ERROR:-Error Logging Out") ``` This code should be placed in file api/views.py Explanation:- 1]Login:-there are some minor changes in url '/api' is appended this is because now we are referring different set of controllers which we will use to communicate with application. If the request method is 'GET' then there is significant changes in the code as compared to what we have in web app.This is because once we are logged in to the app and we close app with out logging out it must open profile page for us rither than a form. we are checking request.session exist or not, If it exist then we will redirect to profile page directly and if it not then we will return the form containing csrf token(what is csrf and how it works we will discuss it later). 2]display:-rither than rendering the display page we are simply return JSON as HttpResponse to the apllication(i.e making controller work as REST API).we have serialize django model to JSON using serializers library provided by django itself for serializing models. ___

NOTE:-when request method is 'GET' and there is no session object associated with request we are rendering the page called api_login_workThrough.html,This was the work Through of which I thought of to use csrf mechanism of django to work with my android application.There may be better way,but I came up with this simple Idea.We will see how this work Through works in detail later in the article.

___ * The api_login_workThrough.html resides in assets/static/html and contains:- ```html ``` * Now we will create URLS(Routers) for API: ```python from django.contrib import admin from django.urls import path,include from django.conf import settings from django.conf.urls.static import static from .views import * urlpatterns = [ path('login/',Login), path('display/',display), path('logout/',Logout) ] ``` This code is contain by api/urls.py. It looks same as that of StudentProfile urls.py,Actually Its Same the difference will be made by urls.py of basic_app. In urls.py of basic_app(Main project app) add url pattern at end:- ``` urlpatterns =[ ..., ..., path('api/',include('api')), ] ```

We Created API for the User Student Profile.

Now Let's get Started with Android

* OverView of Android Apllication ![Andoid Activity and Classes](https://thepracticaldev.s3.amazonaws.com/i/gfst71tm4awyqlkk807f.png)

AsyncRequest:-Request Response Handler

```java package com.example.workstation.basic; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.util.Log; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.IOException; import java.net.CookieStore; import java.net.HttpCookie; import java.net.HttpURLConnection; import java.net.URI; import java.net.URISyntaxException; import java.net.URL; import java.util.List; import java.util.Map; import javax.net.ssl.HttpsURLConnection; public class AsyncRequest extends Thread /* Thread is used to make the request response cycle asynchronous to help preventing the UI from being Unresponsive*/ { final String TAG = AsyncRequest.class.getSimpleName(); final String domain_name; BasicCookieStore store; /*Basic Cookie Store is Persistent Cookie Store implementation for Android used to store Cookie */ String ResponseMsg = new String(); //Response message received from (Django)server int ResponseCode; //Response code received from server (Code: (2xx for OK),(3xx for Redirects),(4xx for ClientError),(5xx for InternalSerer Error) String ResponseBody = new String(); //It is Data Received from Server(HTTP response or File response or JSON response) Map> ResponseHeader;//Response Header Received from Server String Url = new String(); //Url to which to send request and response String RequestBody = new String(); //Request Body means Data to be sent to Server final String RequestType; //Type of Request(GET,POST) AsyncRequest(String requestType,Context context) /* Context is accepted for CookieStore to initialize for the Application*/ { RequestType = requestType; store=new BasicCookieStore(context); domain_name=context.getResources().getString(R.string.domain_name); } @TargetApi(Build.VERSION_CODES.N) @Override public void run() { try { URL url = new URL(Url); URI uri = new URI(Url); HttpURLConnection httpconn = (HttpURLConnection) url.openConnection(); /*HttpURLConnection is the class which establish the connection between client and server and exchange data * using HTTP request response cycle. * url.openConnection() establishes the connection between client and server */ httpconn.setInstanceFollowRedirects(false); /*Sets whether HTTP redirects (requests with response code 3xx) should be automatically followed by this HttpURLConnection instance*/ HttpsURLConnection.setFollowRedirects(false); /*Sets whether HTTP redirects (requests with response code 3xx) should be automatically followed by this class*/ httpconn.setRequestMethod(RequestType);//set Types of Request String S=""; for(HttpCookie H:store.get(new URI(domain_name))) S+=H+"; "; httpconn.setRequestProperty("Cookie",S); /*retriving the cookie from cookie store and sending back to the server(session_id,csrf_token,etc)*/ if(RequestType=="POST") { DataOutputStream output=new DataOutputStream(httpconn.getOutputStream()); output.writeBytes(RequestBody); output.flush(); output.close(); } /* if the request is POST then we send data to the server this using output stream received from connection*/ boolean redirect = false; // normally, 3xx is redirect int status = httpconn.getResponseCode(); if (status != HttpURLConnection.HTTP_OK) { //if request succeds then skip if (status == HttpURLConnection.HTTP_MOVED_TEMP || status == HttpURLConnection.HTTP_MOVED_PERM || status == HttpURLConnection.HTTP_SEE_OTHER)//if response code is 3xx then it is redirect request redirect = true; //set redirect to true } System.out.println("Response Code ... " + status); if(redirect) { // when response code 3xx then we receive redirect url in header field called "location" String newUrl = httpconn.getHeaderField("Location"); // get the cookie if need, for login List cookiesL =httpconn.getHeaderFields().get("set-cookie"); Log.i(TAG, "run: "+httpconn.getHeaderFields()); if(cookiesL != null) for(String x:cookiesL) store.add(new URI(domain_name),HttpCookie.parse(x).get(0)); // open the new connnection again on url recived from location header url = new URL(domain_name+newUrl); uri = new URI(domain_name+newUrl); Log.i(TAG, "run: "+url); httpconn.disconnect(); httpconn = (HttpURLConnection) url.openConnection(); httpconn.setInstanceFollowRedirects(false); HttpURLConnection.setFollowRedirects(false); httpconn.setRequestMethod("GET"); //considered that redirect url will be GET request only S=""; for(HttpCookie H:store.get(new URI(domain_name))) S+=H+"; "; httpconn.setRequestProperty("Cookie",S); Log.i(TAG, "CookiesSession--: "+S); /*same as processed for first request*/ } Log.i(TAG, "run: " + httpconn); this.ResponseMsg = httpconn.getResponseMessage(); //retriving response message from httpconn object this.ResponseCode = httpconn.getResponseCode();//response code is retrived this.ResponseHeader = httpconn.getHeaderFields(); //getting header fields byte[] b = new byte[1024 * 1024]; // reserving the memory for responsebody int len; len = (new DataInputStream(httpconn.getInputStream())).read(b); //reads complete response body from httpconn object Log.i(TAG, "run: "+b.toString()); this.ResponseBody = new String(b, 0, len); //stores in responsebody httpconn.disconnect(); } catch(IOException e) { Log.e(TAG, "run: ",e ); } catch (URISyntaxException e) { Log.e(TAG, "run: ",e ); } } /*Getters and Setters*/ void setUrl(String Url) { this.Url=Url; } void setRequestBody(String RequestBody) { this.RequestBody=RequestBody; } String getResponseMsg() { return ResponseMsg; } String getResponseBody() { return ResponseBody; } Map> getResponseHeader() { return ResponseHeader; } } ```

BitmapD:-Loads the image asynchronously using url

```java package com.example.workstation.basic; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.util.Log; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; public class BitmapD extends Thread { Bitmap B; String Url; public void setUrl(String Url) { this.Url=Url; } //Url from which to fetch image public void run() { try { Log.e("src",Url); URL url = new URL(Url); // converts string url to URL object HttpURLConnection connection = (HttpURLConnection) url.openConnection(); //establishes connection between client and server connection.setDoInput(true); connection.connect();//connection is established InputStream input = connection.getInputStream();//retriving input stream to retrive image data B= BitmapFactory.decodeStream(input);//convert input received to proper image format depending on header Log.e("Bitmap","returned"); } catch (IOException e) { e.printStackTrace(); Log.e("Exception",e.getMessage()); } } public Bitmap getBitmap() { return B; }//getter for fetching bitmap } ```

BasicCookieStore:-Persistent Cookie store implementation

The Implementation can be found at:[Gist Repo for cookie store](https://gist.github.com/franmontiel/ed12a2295566b7076161) This git repo contains two classes from our application viz. BasicCookieStore and SeriallizableHttpCookie,2nd class supports the first class to serialize the httpcookie object to string and store in the cookie store.

MainActivity:-Provides the Login Page for User Login

```java package com.example.workstation.basic; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; import java.net.CookieStore; import java.net.HttpCookie; import java.net.MalformedURLException; import java.net.URI; import java.net.URISyntaxException; public class MainActivity extends AppCompatActivity { String domain_name; BasicCookieStore store; String csrf_token=new String(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); domain_name=getResources().getString(R.string.domain_name); //server domain store = new BasicCookieStore(this); //Creating CookieStore for Application AsyncRequest P=new AsyncRequest("GET",this); //AsyncRequest object to snrd request P.setUrl(domain_name+this.getResources().getString(R.string.Login)); //url to which to send request P.start(); //starting asynchronous process try { P.join(); //procced after process P is completed } catch (InterruptedException e) { e.printStackTrace(); } Log.i("FORM:---", "onCreate: "+P.getResponseBody()); /*remember of csrf work through i told of explaining in android once we receive the workthrough file from server we are checking for substring at index 1 to 4 if it is word "form" then we are retriving the csrf token from form generated by {%csrf_token%} tag in template and store it in a variable In response header there is field called "set-cookie" which contains cookie to be set we retrive the data and store it in this store */ if(P.getResponseBody().substring(1,5).equals("form")) { csrf_token = P.getResponseBody().substring(61, 61 + 64); Log.i("csrf_token:--", "onCreate: "+csrf_token); try { store.add(new URI(domain_name), HttpCookie.parse(P.getResponseHeader().get("set-cookie").get(0)).get(0)); } catch (URISyntaxException e) { e.printStackTrace(); } } /*then we check if it returns error substring if so then something has went wrong and we recreate the activity else if workthrough form and also error is not returned then it implies that the user session was saved in cookie store and hence we directly authenticate user to the user data preview */ else { if(P.getResponseBody().substring(0,5).equals("Error")) { this.recreate(); } else { Intent dashBoard = new Intent(this,DashBoard.class); //Explicit intent creation this.finish(); dashBoard.putExtra("displayData",P.getResponseBody());//sending response data to new intent i.e dashboard Log.i("JSON:::", "onCreate: "+P.getResponseBody()); store.loadAllCookies(); Log.i("VC", "SignIN: "+store.getCookies()); startActivity(dashBoard);//starting the intent(control goes to dashboard activity) } } } // create an action bar button @Override public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); } /* this is function which is triggered when user click on login button*/ void SignIN(View B) throws MalformedURLException, URISyntaxException, InterruptedException { Button b = (Button)B; EditText usernameView = (EditText) findViewById(R.id.Email); EditText passwordView = (EditText) findViewById(R.id.Password); String username = usernameView.getText().toString(); //retriving username from username field String password = passwordView.getText().toString(); //retriving password from password field if(!username.isEmpty() && !password.isEmpty()) //username and password validations { b.setClickable(false); AsyncRequest P = new AsyncRequest("POST",this); //creating the login request P.setUrl(domain_name+this.getResources().getString(R.string.Login));//setting login url P.setRequestBody("username="+username+"&password="+password+"&csrfmiddlewaretoken="+csrf_token+"&LOGIN=LOGIN"); //setting request body it contains(username,password and csrf token which is used for CSRF attack protection by django) P.start();//satrting the process P.join();//procced after process P is completed if(P.getResponseBody().substring(0,5).equals("ERROR"))//if response contains "ERROR" string then recreate activity { Toast.makeText(this,P.getResponseBody(),Toast.LENGTH_LONG).show(); usernameView.setText(""); passwordView.setText(""); this.recreate(); } else //if login is successful then create Dashboard activity { Intent dashBoard = new Intent(this,DashBoard.class); dashBoard.putExtra("displayData",P.getResponseBody()); store.loadAllCookies(); this.finish(); startActivity(dashBoard); } } } } ``` ```xml

akshaychhajed1998

Strapping Django & Android Application

Join Our Newsletter. No Spam, Only the good stuff.