javascript - 使用Vue.js和Auth0进行前端认证时如何在Django的后端数据库中创建用户

Question

我正在尝试使用 Vue.js 作为 SPA 的前端，并使用 Django 作为后端。

在前端，我利用 Auth0 进行用户身份验证，我想将从 Auth0 的用户注册/创建中获得的 id_token 发送到后端，以实时创建特定的用户配置文件。

当每个用户在前端的 vue.js 上使用 Auth0 进行注册时，如何在 django 后端为每个用户创建用户配置文件？

以前，我使用以下代码在创建用户后启用配置文件创建:

# Whenever a User account is created, it creates a profile for it too.

def create_profile(sender, **kwargs):
    user = kwargs["instance"]
    if kwargs["created"]:
        user_profile = UserProfile(user=user)
        user_profile.save()
post_save.connect(create_profile, sender=User)

def __str__(self):
    return self.user.username

简单来说，这就是我想要实现的目标:
- 用户在网站上注册
- 帐户是通过利用 Auth0 创建的
- 从 Auth0 获取 user_id 并从前端 (Vue.js) 发送到后端 (Django)
- Django 在其后端 postgresql 数据库中为注册用户创建用户配置文件。
- 用户现在可以访问他的个人资料页面http://website/profile登录后。(配置文件的数据是从 Django 获取的)

我对 Vue.js 和 Javascript 相当陌生。虽然 Vue.js 使用起来很简单，但我似乎不知道如何使用 Auth0 在 Vue.js 中复制类似的功能。

任何正确方向的帮助/指导/指示都值得赞赏。

谢谢。

Answer 1

您想要进行 Ajax 调用 - 我推荐 Axios - 在客户端和服务器端之间进行通信。它非常简单，我一直将它与 Vue.js 一起使用并且喜欢它。

类似于:

在auth.vue中:

axios.post('/yourUserRoute', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果您确保每次要注册新用户时都调用此 axios 调用，您的后端将收到正确的信息，以便您在服务器上继续操作。我从未接触过 Django，所以我不会尝试在细节上帮助您，但这应该会给您一个良好的工作开始!