Ember - Django session authentication

Имеется:
- Бакэнд Django.
- Фронтэнд Ember.js


Задача: При входе в Ember (фронтэнд) автоматически проходить аутентификацию (ember simple authentication), если в Django (бакэнд) аутентификацию уже прошла, т.е. получить access_token в Ember для имеющейся пользовательской Django сессии.

Зачем это нужно?
1) Если на бакэнде пользователь уже авторизован, то на фронэнде повторно проходить аутентификацию уже не нужно.
2) В Django реализована аутентификаци при помощи REMOTE_USER - https://docs.djangoproject.com/en/dev/howto/auth-remote-user/ (это когда используется kerberos аутентификация) и, в таком случае, зачем заставлять пользователя проходить повторную аутентификацию на фронэнде? Если простыми словами: пользователь входит в Windows -> запускает браузер и в браузере уже не нужно проходить повторную аутентификацию. Ранее, я уже описывал как сделать Django аутентификацию через NGINX kerberos (Active Directory) , поэтому повторяться здесь не буду.


У меня Django бакэнд лежит в папке back, соответсвенно настройки settings.py лежат в back/back/settings.py . Подробно про создание среды разработки Django Ember

На бакэнэде нужно дополнительно установить:

$ pip install djangorestframework
$ pip install djangorestframework-jwt
$ pip install django-cors-headers

и настроить settings.py:

- в INSTALLED_APPS добавляю 'rest_framework' и 'corsheaders'

INSTALLED_APPS = (
   ...
    # external apps
    'rest_framework',
    'corsheaders',
)

- в MIDDLEWARE_CLASSES добавляю 'corsheaders.middleware.CorsMiddleware',

MIDDLEWARE_CLASSES = [
   ...
   'corsheaders.middleware.CorsMiddleware',
   'django.middleware.common.CommonMiddleware',
   ...
]

- добавляю новую конфигурацию для REST_FRAMEWORK

REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
# разрешаю подключение к api всем, ограничивать подключения буду во views
'rest_framework.permissions.AllowAny',
],
'DEFAULT_AUTHENTICATION_CLASSES': (
# аутентификацию делаю на уровне сессий (для прямых веб подключений) и с использованием token для фронтэнда
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
'rest_framework.authentication.SessionAuthentication', 
),
'PAGE_SIZE': 100,
}

Для REST_FRAMEWORK аутентификация на первом месте обязательно должна быть JSONWebTokenAuthentication. Это очень важно, потому что сначала делается попытка пройти аутентификацию по jwt, а если не получается, то идет аутентификация по сессии. И если поставить сначала аутентификацию по сессии, то на фронтэнде аутентификация будет выполнена по SessionAuthentication и при POST запросе будет вылетать ошибка, т.к. аутентификация по сессии использует CSRF.  Вообщем-то, когда будет все отлажено и запущено, можно вообще убрать аутентификацию SessionAuthentication.


- для CORS разрешаю все запросы во время разработки (DEBUG = True, а значит получится и CORS_ORIGIN_ALLOW_ALL = True), а также разрешаю принимать cookie в в заголоках - CORS_ALLOW_CREDENTIALS = True:

CORS_ORIGIN_ALLOW_ALL = DEBUG
 CORS_ALLOW_CREDENTIALS = True

- для djangorestframework-jwt (JSON Web Token) добавляю настройки:

import datetime

JWT_AUTH = {
'JWT_RESPONSE_PAYLOAD_HANDLER': 'back.views.jwt_response_payload_handler',
'JWT_AUTH_HEADER_PREFIX': 'Bearer',
# default JWT_EXPIRATION_DELTA - 5 minutes
# JWT_EXPIRATION_DELTA = datetime.timedelta(seconds=300)
'JWT_EXPIRATION_DELTA': datetime.timedelta(hours=12),
}

Мне не хватает для разработки 5 минут активного токена jwt, которые стоят по умолчанию, поэтому я сделал 12 часов, не надо передергивать постояно. Надо понимать, что быстрое "протухание" токена сделано с целью безопасности, поэтому на рабочих проектах надо поставить оптимальное время.

- на этом настройки settings.py закончены, сохраняю.

Т.к. я сослался в настройках на  'JWT_RESPONSE_PAYLOAD_HANDLER': 'back.views.jwt_response_payload_handler', то надо теперь создать
back/back/views.py
и добавить функцию, которая меняет название ключа 'token' на 'access_token'. (по умолчанию djangorestframework-jwt выдает в json ответе ключ 'token', а ember-simple-auth хочет видеть 'access_token'):


def jwt_response_payload_handler(token, user=None, request=None):
    return {
        'access_token': token,
    }

Чтобы не прыгать от настроек к настройкам, добавлю сразу в back/back/views.py функцию отдачи jwt ключа по POST запросу, который будет создаваться при наличии пользовательской сессии.

Привожу полный back/back/views.py

from django.contrib.auth.models import User
from django.contrib.sessions.models import Session
from rest_framework import serializers
from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework_jwt.settings import api_settings
from rest_framework import status

#получаю пользователя из сессии
def get_user_from_session(session_key):
    try:
        session = Session.objects.get(session_key = session_key)
        uid = session.get_decoded().get('_auth_user_id')
        return User.objects.get(pk = uid)
    except:
        return None


@api_view(['POST'])
def SessionIdJSONWebToken(request):
    if request.method == 'POST':
        session_key = request.session.session_key
        user = get_user_from_session(session_key)
        if user:
            #Создаю jwt токен для отдачи
            jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
            jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
            payload = jwt_payload_handler(user)
            token = jwt_encode_handler(payload)
            username = user.username
            response_data = jwt_response_payload_handler(token, user, request)
            return Response(response_data)
        else:
            #если нет пользовательской сесии выдаю ошибку 401
            response_data = {"error":"User session not found."}
            return Response(response_data, status=status.HTTP_401_UNAUTHORIZED)

#добавляю дополнительно user.id и user.username в jwt json ответ, 
# чтобы на фронтэнде через сессии можно было посмотреть 
# авторизованного пользователя без дополнительных запросов
class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id','username',)


def jwt_response_payload_handler(token, user=None, request=None):
    return {
        'access_token': token,
        'user': UserSerializer(user, context={'request': request}).data,
    }


Добавляю в back/back/urls.py


from django.conf.urls import url, include
from django.contrib import admin

from rest_framework_jwt.views import obtain_jwt_token, verify_jwt_token, refresh_jwt_token
from .views import SessionIdJSONWebToken

 
urlpatterns = [
    #url(r'^', include('front.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^api/auth/login/', obtain_jwt_token),
    url(r'^api/auth/verify-token/', verify_jwt_token),
    url(r'^api/auth/token-sessionid/', SessionIdJSONWebToken),
]


Проверяем отдачу 'access_token' на бакэнде.
- Если еще не создан супер пользователь, то создаем:
$ cd back
$ python manage.py createsuperuser

затем запускаю Django бакэнд:
$ python manage.py runserver

Захожу в админку - http://localhost:8000/admin/
После успешного входа иду по адресу - http://localhost:8000/api/auth/token-sessionid/ , где вижу

"detail": "Method \"GET\" not allowed."

все правильно, принимаются только POST запросы.

Ввожу в поле Content пустые фигурные скобки {} и нажимаю кнопку "POST". Получаю json ответ на экране

HTTP 200 OK
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "user": {
        "id": 2,
        "username": "hairetdin"
    },
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImhhaXJldGRpbiIsInVzZXJfaWQiOjIsImVtYWlsIjoiIiwiZXhwIjoxNDg3MTQ1MDExfQ.kcl2TKs3pCd8nk8DIme9tzzWW7UUuy6JM-P21yly7Ig"
}

Почему запрос не через curl? Вроде проще, а нет. В консоли нет пользовательской сессии. Можно попробывать и посмотреть

$ curl -X POST http://localhost:8000/api/auth/token-sessionid/
{"error":"User session not found."}

Проверяем json token при аутентификации - http://localhost:8000/api/auth/login/ и верификации - http://localhost:8000/api/auth/verify-token/. Соответсвенно ввожу логин и пароль или в поле Token вставляю 'access_token' из предыдущей страницы.
Или в командной строке:
$ curl -X POST -d "username=admin&password=парольсуперпользователя" http://127.0.0.1:8000/api/auth/login/


С бакэндом закончили, переходим к фронтэнду.

Фронтэнд - Ember js. Детали описывать не буду, если что-то непонятно, то Подробно про создание среды разработки Django Ember

$ cd front

- Устанавливаю EDA (Ember-Django-Adapter)
$ ember install ember-django-adapter

- Устанавливаю для аутентификации, авторизации - ember-simple-auth
$ ember install ember-simple-auth

- Устанавливаю ember-cli-js-cookie, чтобы можно было вызывать cookie 
$ ember install ember-cli-js-cookie

В настройках front/config/environment.js указываю API_HOST бакэнда и путь для ember-simple-auth:

if (environment === 'development') { 
  ENV.APP.API_HOST = 'http://localhost:8000';
  ENV['ember-simple-auth'] = {
    serverAuthEndpoint: ENV.APP.API_HOST + '/api/auth/'
  } ... 
}

- Хоть и ведутся какие-то неправильные разговоры про pods, я его все равно использую и далее планирую использовать, мне нравится когда каждое приложение лежит в отдельной папке. Поэтому, назначаю по умолчанию pods структуру в файле front/.ember-cli

{
  "usePods": true,
}

- Создаю аутентификатор
$ ember g authenticator django

Аутентификатор создался по пути front/app/authenticators/django.js
Вношу в front/app/authenticators/django.js следующий код:

//начало front/app/authenticators/django.js
import Ember from 'ember';
import Base from 'ember-simple-auth/authenticators/base';
import ENV from '../config/environment';
import Cookies from 'ember-cli-js-cookie';


function isSecureUrl(url) {
  var link  = document.createElement('a');
  link.href = url;
  link.href = link.href;
  return link.protocol === 'https:';
}

export default Base.extend({

  init() {
    //var apiHost = ENV.APP.API_HOST;
    var apiAuthentication = ENV['ember-simple-auth'] || {};
    this.serverAuthEndpoint = apiAuthentication.serverAuthEndpoint;

  },

  authenticate(identification,password) {

    return new Ember.RSVP.Promise((resolve, reject) => {
      let remoteResponse;
      if (!(identification && password)) {
        remoteResponse = this.requestBackendSession();
      } else {
        const data = { username: identification, password: password };
        let host = ENV.APP.API_HOST;
        let login_url = host + '/api/auth/login/';
        //let login_url = this.serverAuthEndpoint + 'login/';
        remoteResponse = this.makeRequest(login_url, data);
      }
      remoteResponse
      .then((response) => {
        Ember.run(() => {
          console.log('django authenticate response:',response);
          resolve(response);
        });
      }, (xhr /*, status, error */) => {
        Ember.run(() => {
          reject(xhr.responseJSON || xhr.responseText);
        });
      });
    });
  },

  restore(data) {
    return new Ember.RSVP.Promise((resolve, reject) => {
      console.log('authenticator django restore data', data);
      let host = ENV.APP.API_HOST;
      let verifyTokenUrl = host + '/api/auth/verify-token/';
      let access_token = {token:data.access_token};
      this.makeRequest(verifyTokenUrl, access_token).then((response) => {
        Ember.run(() => {
          resolve(response);
        });
      }, (xhr /*, status, error */) => {
        Ember.run(() => {
          reject(xhr.responseJSON || xhr.responseText);
        });
      });
    });
  },


  invalidate(/* data */) {
    function success(resolve) {
      resolve();
    }
    return new Ember.RSVP.Promise((resolve /*, reject */) => {
      //let logout_url = this.serverAuthEndpoint + 'logout/';
      let host = ENV.APP.API_HOST;
      let logout_url = host + '/api/auth/logout/';
      this.makeRequest(logout_url, {}).then((/* response */) => {
        Ember.run(() => {
          success(resolve);
        });
      }, (/* xhr, status, error */) => {
        Ember.run(() => {
          success(resolve);
        });
      });
    });
  },

  makeRequest(url, data) {
    if (!isSecureUrl(url)) {
      Ember.Logger.warn('Credentials are transmitted via an insecure connection - use HTTPS to keep them secure.');
    }

    return new Ember.RSVP.Promise((resolve, reject) => {
      Ember.$.ajax({
        url: url,
        type: 'POST',
        beforeSend: function(request) {
          request.setRequestHeader("X-CSRFToken", Cookies.get('csrftoken'));
        },
        data: data,
      })
      .then((response) => {
        if (response.status === 400) {
          response.json().then((json) => {
            reject(json);
          });

        } else if (response.status > 400) {
          reject(response);
        } else {
          resolve(response);
        }
      }).catch((err) => {
        reject(err);
      });
    });
  },

  requestBackendSession(){

    let host = ENV.APP.API_HOST;
    let url = host + '/api/auth/token-sessionid/';
    let csrftoken = Cookies.get('csrftoken');
    return new Ember.RSVP.Promise((resolve, reject) => {
      Ember.$.ajax({
        url: url,
        type: 'POST',
        beforeSend: function(xhr/*, settings*/) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        xhrFields: {
            withCredentials: true
        },
      })
      .then((response) => {
        if (response.status === 400) {
          response.json().then((json) => {
            reject(json);
          });

        } else if (response.status > 400) {
          reject(response);
        } else {
          resolve(response);
        }
      }).catch((err) => {
        reject(err);
      });
    });
  }
});
//конец front/app/authenticators/django.js


- Генерирую ресурс и контроллер  application:

$ ember g resource application
$ ember g controller application

- Добавляю в темплейт front/app/application/template.hbs следующий код:

{{!-- front/app/application/template.hbs --}}
<div class="menu">
  {{#if session.isAuthenticated}}
    {{session.data.authenticated.user.username}}
    <a href {{action 'invalidateSession'}}>Выход</a>
  {{else}}
    {{#link-to 'login'}}Вход{{/link-to}}
  {{/if}}
</div>
<div class="main">
  {{outlet}}
</div>

- Добавляю в контроллер front/app/application/controller.js следующий код:

// front/app/application/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service('session'),




  sessionAuthenticated: Ember.observer('session.isAuthenticated', function () {
    //reload application if session isAuthenticated
    window.location.href = '/';
  }),

  actions: {
    invalidateSession() {
      this.get('session').invalidate();
    }
  }
});


- Добавляю в роут front/app/application/route.js следующий код:

// front/app/application/route.js
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin,{
  session: Ember.inject.service('session'),
  beforeModel: function(){
    if (!(this.get('session.isAuthenticated'))){
      //try to authenticate with backend's session, if session is not authenticated
      this.get('session').authenticate('authenticator:django');
    }
  },
});

Вообщем-то на этом этапе уже можно наблюдать результат:
- Запускаем бакэнд - python manage.py runserver
- Запускаем фронтэнд - ember s
На бакэнде проходим аутентификацию на странице http://localhost:8000/admin/login/, а на странице фронтэнда - http://localhost:4200/ смотрим результат в консоли (кнопка F12):

django authenticate response: Object {user: Object, access_token: ....

а еще выводится ошибка

Error: There is no route named login

это потому, что в темплейте front/app/application/template.hbs имеется ссылка {{#link-to 'login'}}Вход{{/link-to}} на роут login, а такого роута пока нет. Исправим эту ошибку.
- Создаю роут и контроллер для login
$ ember g route login
$ ember g controller login

- Редактирую login темлейт front/app/login/template.hbs:

{{!-- front/app/login/template.hbs --}}
<form {{action 'authenticate' on='submit'}}>
  <label for="identification">Пользователь</label>
  {{input id='identification' placeholder='Enter Login' value=identification}}
  <label for="password">Пароль</label>
  {{input id='password' placeholder='Enter Password' type='password' value=password}}
  <button type="submit">Вход</button>
  {{#if errorMessage}}
    <p>{{errorMessage}}</p>
  {{/if}}
</form>

- Редактирую login контроллер front/app/login/controller.js:

// front/app/login/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service('session'),

  actions: {
    authenticate() {
      let { identification, password } = this.getProperties('identification', 'password');

      this.get('session').authenticate('authenticator:django', identification, password).
      then(() => {
       console.log('Успешна аутентификация с токеном: ' + this.get('session.data.authenticated.access_token'));
      }, (err) => {
       alert('Ошибка токена: ' + err.responseText);
      }).
      catch((reason) => {
      this.set('errorMessage', reason.error || reason);
      });
    }
  }
});

Теперь в http://localhost:4200/ ошибок нет и возможна аутентификация через фронэнд, если на бакэнде аутентификации не было.


А вот авторизатор я изобретать не буду, использую стандартный.
Создаю авторизатор:
$ ember g authorizer django

и добавлю в него (front/app/authorizers/django.js) следующие строки

// front/app/authorizers/django.js
import OAuth2Bearer from 'ember-simple-auth/authorizers/oauth2-bearer';

export default OAuth2Bearer.extend();

Теперь нужен еще адаптер, который будет использовать созданный django авторизатор

$ ember g adapter application

и добавляю в него (front/app/application/adapter.js) следующий код:

// front/app/application/adapter.js
import DRFAdapter from '../adapters/drf';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';

export default DRFAdapter.extend(DataAdapterMixin , {
  authorizer: 'authorizer:django'
});