使用Vue.js和Auth0進行前端身份驗證時如何在Django的后端數據庫中創建用戶

Question

我試圖使用Vue.js作為前端，Django作為SPA的后端。

在前端，我正在利用Auth0進行用戶身份驗證，並且我希望將從用戶注冊/創建中獲得的id_token從Auth0發送到后端，以實時創建特定的用戶配置文件。

當他們在前端的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，所以我不打算在細節方面幫助你，但這應該會給你一個良好的開端！