Реализация OAuth Flow с помощью Django+DRF+Vue с JWT

Я пытаюсь реализовать Dropbox OAuth Flow в своем проекте, он работает нормально без DRF и Vue, но когда я перешел на Vue для своего фронтенда, все пошло наперекосяк. Вот представления Django при работе только с Django: (В этом сценарии все перенаправления происходят на одной странице)

Для получения подробной информации о классе, используемом в потоке

@login_required
def dropbox_oauth2_authorize(request):
    return redirect(DropboxOAuth2Flow(
        consumer_key=settings.DPX_APP_KEY,
        redirect_uri=request.build_absolute_uri(reverse('driver:dropbox-callback')),  # Belongs to the following view
        session=request.session,
        csrf_token_session_key="dropbox-auth-csrf-token",
        consumer_secret=settings.DPX_APP_SECRET,
        locale="en",
        token_access_type="offline").start())


def dropbox_oauth2_callback(request):
    try:
        result = DropboxOAuth2Flow(
            consumer_key=settings.DPX_APP_KEY,
            redirect_uri=request.build_absolute_uri(reverse('driver:dropbox-callback')),
            session=request.session,
            csrf_token_session_key="dropbox-auth-csrf-token",
            consumer_secret=settings.DPX_APP_SECRET,
            locale="en",
            token_access_type="offline").finish(
            request.GET)
        cursor = dropbox.Dropbox(
            oauth2_access_token=result.access_token,
            oauth2_refresh_token=result.refresh_token,
            oauth2_access_token_expiration=result.expires_at,
            app_key=settings.DPX_APP_KEY,
            app_secret=settings.DPX_APP_SECRET)

        ...

        return redirect(reverse('driver:account'))  # Redirects account page where authorization started

    except dropbox.oauth.BadRequestException as e:
        raise e
    except dropbox.oauth.BadStateException as e:
        raise e
    except dropbox.oauth.CsrfException as e:
        raise e
    except dropbox.oauth.NotApprovedException as e:
        raise e
    except dropbox.oauth.ProviderException as e:
        raise e

Я управляю авторизацией в Django с помощью djangorestframework-simplejwt для Vue frontend. Также использую axios для DRF. Для управления потоком oauth на бэкенде (в представлении DRF), что бы вы посоветовали мне сделать? Я пытался получить ссылку авторизации dropbox через DRF, но она не позволила мне открыть ее в новой вкладке из-за CORS-заголовков. Вот код DRF и Vue:

@api_view(['GET'])
@permission_classes([permissions.IsAuthenticated & ReadAndWritePermission])
def dropbox_acc_oauth2_authorize(request):
    return HttpResponseRedirect(DropboxOAuth2Flow(
        consumer_key=settings.DPX_APP_KEY,
        redirect_uri=request.build_absolute_uri(reverse('api:user_cloudaccs_dropbox_oauth2_callback', request=request)),
        session=request.session,
        csrf_token_session_key="dropbox-auth-csrf-token",
        consumer_secret=settings.DPX_APP_SECRET,
        locale="en",
        token_access_type="offline").start())

На стороне Vue: Вскоре страница содержит кнопку, подключенную к этому методу через @click, EventService является сокращением для axios.get с соответствующим заголовком авторизации JWT. (Указывает на вид DRF выше)

methods: {
    oauthFlow() {
      var newWindow = window.open();
      EventService.oauthFlowStart()
        .then((response) => {
          newWindow.document.write(response.data);
        })
        .catch((e) => {
          throw e;
        });
    },


    },
}

Вернуться на верх