Mahammad Adil Azeem
Mahammad Adil Azeem

Reputation: 9392

Implementing Central Authentication System with angular4 apps using django session authentication

I have three different django projects, ProjectA, ProjectB and ProjectC. ProjectA is django website but other two are only django-rest-framework api based projects and have angular4 apps that consumer these apis respective to their projects.

Now I need to combine their Users and some other functionality and need to put into ProjectA. So if a user is logged into ProjectA, and visit angular app of ProjectB or ProjectC and user should already be considered logged in.

So this is certain that I need SSO and also I need to replace the token authentication of angular app with session authentication and I am thinking of using Central authentication System CAS but I don't understand how angular4 apps will be served alongside django using its session authentication and consuming its api. because right now all three projects and those two angular apps are deployed on different domains or subdomains.

Can you help out here. Also please comment on any security flaws or something

Upvotes: 2

Views: 427

Answers (1)

Mahammad Adil Azeem
Mahammad Adil Azeem

Reputation: 9392

Angular apps can be put behind django application. So user will only be able to load application when he/she is logged in. Otherwise user will be redirected to CAS login page. Here is the list of things that you need to do in order to achieve CAS session authentication with django rest framework.

1. You need to make angular dist and put it somewhere in the project, add the path to STATICFILES_DIRS and TEMPLATE in settings.py.

STATICFILES_DIRS = [
    "frontend/dist/",
]
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            'frontend/dist/'
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2. RUN collectstatic command in order to collect all js bundles.

python manage.py collectstatic

3. You will also need to edit the index.html file in dist folder in order to support django static files. I am posting mine.

<!doctype html>
{% load static %}
<html>
<head>
  <meta charset="utf-8">
  <title>Blank</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <my-root></my-root>
  <script type="text/javascript" src="{% static 'runtime.js' %}"></script>
  <script type="text/javascript" src="{% static 'polyfills.js' %}"></script>
  <script type="text/javascript" src="{% static 'styles.js' %}"></script>
  <script type="text/javascript" src="{% static 'vendor.js' %}"></script>
  <script type="text/javascript" src="{% static 'main.js' %}"></script>
</body>
</html>

4. Final step is the url configuration. So you need to use login_required decorator with TemplateView.

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.auth.decorators import login_required
from django.views.generic import TemplateView

import django_cas_ng.views as cas_views

urlpatterns = [
    url(r'^$', login_required(TemplateView('index.html').as_view())),
    url(r'^api/', include('api.urls')),
    url(r'^polls2/', include('polls2.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^accounts/login/$', cas_views.login, name='cas_ng_login'),
    url(r'^accounts/logout/$', cas_views.logout, name='cas_ng_logout'),
    url(r'^accounts/callback/$', cas_views.callback, name='cas_ng_proxy_callback'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Hope this helps.

Upvotes: 2

Related Questions