使用 vuejs 前端设置 django 社交身份验证答案

【问题标题】：Setup django social auth with vuejs frontend使用 vuejs 前端设置 django 社交身份验证
【发布时间】：2020-08-16 15:19:50
【问题描述】：

我刚刚与一位前端开发人员开始了一个项目。我们正在尝试添加社交身份验证 (Discord)，但没有成功。

我想将 django 用作后端的 REST API，我安装了 django-allauth，当我使用 django 模板通过 Discord 进行连接时，它似乎可以工作：

{% load socialaccount %}
{% providers_media_js %}
<html>
    <head>
        <title>Discord Registration</title>
    </head>
    <body>
{{user}}
<a href="{% provider_login_url "discord" method="oauth2" %}">Discord Connect</a>
</html>

但我不知道如何与前端共享此连接（使用 vuejs 制作）。我从来没有参与过后端和前端不在同一个应用程序中的项目......在前端做什么，在后端做什么？主要问题，如何？我已经为此工作了两天，但我仍然完全迷失了。

【问题讨论】：

标签： django vue.js django-allauth

【解决方案1】：

根据您计划部署到生产环境的方式，您可以通过 2 种方法来完成这项工作。

方法一：
前端开发人员可以运行npm run build 命令，该命令将生成一个名为dist 的文件夹。您必须从 django 应用程序中提供此文件夹。在您的 Django 应用程序中执行以下操作：

在settings.py 文件中，添加VUE_FOLDER = 'PATH_TO_DIST_FOLDER/dist'

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, VUE_FOLDER)],
}

在urls.py 文件中，添加path('', TemplateView.as_view(template_name='index.html'), name="home"

以上行会将Vue index.html 文件作为django 主页。

这样，您的产品将只有一个端口，该端口仅服务于一个同时具有 UI 和 django 应用程序的应用程序。 urls.py 文件中的所有 API 都可以通过 UI 访问。无需担心 CORS。

方法二：
UI 可以是托管在一个端口中的单独应用程序，您的 django 应用程序可以是托管在另一个端口中的单独应用程序。在这种情况下，您的 django 应用程序应该支持 CORS，因为来自 UI 的所有 API 调用都将被视为跨源调用。 UI 应包含完整的 URL 路径 http://django-server:port/api_name/ 以访问 API。

在这两种情况下，您都不需要使用 django 模板，UI 可以是一个独立的应用程序。路由将由 vue-router 处理。 Django 应用程序将充当服务器并仅处理 API。希望这会有所帮助。

【讨论】：