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

Question

我想將Vue.js用作前端，將Django用作SPA的後端。

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

如何在我的django後端爲每個用戶在前端的vue.js上使用Auth0註冊時創建用戶配置文件？

以前，我用的是下面的代碼，以使配置文件創建一旦用戶創建：

# 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 user_id是獲取並從前端（Vue.js）
發送給後端（Django的） - - Django的在其後端PostgreSQL數據庫創造了註冊用戶的用戶配置文件的帳戶被利用Auth0
創建。
- 用戶現在可以訪問他的個人資料頁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，因此我不會試着幫助你瞭解細節，但是這應該給你一個良好的開始！