Авторизация Django + Vue на ESIA, с чего начать?

Question

[uwagaDDe]

необходимо прикрутить к Django - Vue.
Это пол беды и с этим я вроде как справился, проблема в другом - авторизация.
Авторизация происходит в ESIA (Госуслуги)
Авторизация уже настроена, и полноценно работает на DJango, т.е я могу зайти и выйти там.

Теперь вопрос, как это реализовать на Vue?
Я в принципе не работал в этом направлении, но начальство требует...
Не совсем просто даже понимаю от чего отталкиваться.
Пробовал через Cookie данные передавать (Пользователь авторизируется через шаблон Django, далее его редиректит в приложение Vue с данными, но думаю такой подход не самый правильный и там есть свои нюансы почему я не оставил этот момент)

Мне бы хоть наводку с чего начать, что почитать, а то даже спросить не у кого

Comments

[Александр Нестеров]

Я от фронтэнда далек максимально, но чисто навскидку там должно быть примерно так: vue стучится в госуслуги с просьбой авторизации. Госуслуги дают ключ и с этим ключом vue cтучиться к django. Тот, в свою очередь, проверяет что ключ подлинный и дает доступ.
С другой стороны мне почему-то кажется, что там-все через oauth2 работает. А вот как подружить django/vue/oauth2 информации должно быть полно.

[Александр Нестеров]

Александр Нестеров, в принципе, судя по вот этой статье оно примерно так и работает:

Answer 1

[uwagaDDe]

Нашел решение (временное), возможно кому то пригодится.
Думаю оно не совсем верное, но когда сроки поджимают а сделать надо, использую пока его, в дальнейшем перепишу.

1. Пользователь авторизируется так же на Django шаблоне (Жмет на кнопку "Авторизация" > Редирект на госуслуги > получаем ответ от туда > Идем на Django)
2. Далее, у меня сделано по ролям, при попадании на стартовую страницу "обычный" юзер сразу редиректится на Vue приложение, кто ролями по выше (Администраторы и руководство) остаются на старой странице (Там необходимый функционал, который еще не перенесен на Vue)

В классе вьюхи стартовой страницы
def get(self, request, *args, **kwargs):
if request.user.roles and request.user.roles[0] in ("default"):
return redirect(vue_url()) # Перенаправление на VUE
context = self.get_context_data(**kwargs)
return self.render_to_response(context)

3. Далее, на Vue, у меня уже содержится GET запрос, который отправляется при загрузке страницы, для получения необходимых данных для дальнейшей обработки информации, в моем случае это СНИЛС.

@login_required
def user_snils(request):
user = request.user
user_data = {
'snils': user.snils,
'name': f'{user.last_name} {user.first_name}',
'role':user.roles
}
return JsonResponse(user_data)

4. Ну и дальнейшая обработка данных.
Так же, сделал проверку на Vue, что если СНИЛСа не подтягивается (от GET запроса) то пользователя редиректит обратно на логин в Django.

if (this.userInfo && this.userInfo.snils && this.userInfo.snils.length === 11) {
this.docSnils = this.userInfo.snils;
} else {
alert("Вы не авторизованы, перенаправление на главную страницу.");
window.location.href = `${config.apiUrl}/`;
return;
}

Answer 2

[Александр Нестеров]

Примерная схема будет следующая:

Answer 3

[xibolba]

если по самому простому, то просто встраивайте вуе темплейты в Джанго шаблоны. И настройте сборщик скриптов и стилей и также устройте в шаблон. И вуаля все заиграет на порту Джанго.