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

Posted 2023-03-10

【中文标题】使用 Vue.js 和 Auth0 进行前端认证时如何在 Django 的后端数据库中创建用户

【英文标题】：How to create users in Django's backend database when using Vue.js and Auth0 for frontend authentication

【发布时间】：2017-11-03 13:55:43

【问题描述】：

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

在前端，我利用 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 中复制类似的功能。

感谢任何正确方向的帮助/指导/指针。

谢谢。

【问题讨论】：

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

@U.Tayyab 是您从前到后沟通的问题，还是实际的用户配置文件创建过程？

两者兼而有之。我需要我的前端连接到后端，并在注册时为每个用户传递从 Auth0 获得的 user_id。然后使用这个 user_id 在 django 后端创建用户配置文件。因此，允许每个用户在注册后通过后端自动生成自己的个人资料。

【参考方案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，所以我不会尝试在细节上帮助你，但这应该会给你一个良好的开始！