Login Sederhana menggunakan AngularJS dan Django Rest dengan Basic Auth

Lebaran telah tiba, bukan artinya segala aktifitas belajar berhenti pula hehe. Sebenernya ini cuma catatan saya yang kebetulan juga saya lagi belajar AngularJS mix dengan Django Rest. Aplikasi login ini bener-bener standar sekali. Tapi tak mengapa yang penting ada gambaran bagaimana AngularJS bisa saling bekerja dengan Django Rest.

Saya sudah punya project dan app di Django yang bisa kamu liat di repo ini yah. Saya hanya memanfaatkan User dari package contrib milik Django tanpa serializer dan langsung saya render jadi JSON via Response class milik Django Rest.

from django.contrib.auth.models import User
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import permissions
from django.forms.models import model_to_dict


class UserLogin(APIView):
	permission_classes = (permissions.IsAuthenticated,)
	lookup_field = 'username'

	def post(self, request, format=None):
		user_instance = User.objects.get(username=request.data.get('username'))
		user_instance = model_to_dict(user_instance)
		user_instance.pop("password")
		return Response(user_instance)

Saya mengatur permission untuk yang mengakses View login ini ketika sudah diotentikasi yang bisa diterapkan melalui Basic Auth. Ini tercermin pada implementasi saya di app.js menggunakan header berupa:

var auth = window.btoa($scope.username + ":" + $scope.password);
var headers = {"Authorization": "Basic " + auth};

Kode lengkapnya dari app.js adalah:

var app = angular.module('app', []);


app.controller('LoginController', function($scope, $http, $templateCache) {
	$scope.username = "";
	$scope.password = "";

	$scope.login = function() {
		console.log($scope.username);
		var auth = window.btoa($scope.username + ":" + $scope.password);
		var headers = {"Authorization": "Basic " + auth};
		
		$http({
			url: "http://127.0.0.1:8000/api/v1/login/",
			method: 'POST',
			headers: headers,
			cache: $templateCache,
			data: {
				username: $scope.username
			}
		}).then(function(response) {
			console.log(response.data);
		}, function(response) {
			console.log("Yummm");
		});
	}

});

Jika saya buka halaman login dan saya mengeklik tombol login:

Sehingga kalo login saya berhasil, saya menampilkan data responsenya di console hasilnya:

Kenapa cuma sampe sini ? ya ini hanya tutorial sederhana. setelah login berhasil bisa dilanjutkan dengan meredirect ke halaman yang bisa kita tentukan. Yang terpenting gambaran dasarnya sudah kita peroleh.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s