2017-12-18 10 views
0

我使用express作爲後端。我在後端實施了Facebook身份驗證。如何將Facebook身份驗證添加到我的反應應用程序?

router.get('/login/facebook', 
    passport.authenticate('facebook',{scope:['email']})); 

router.get('/login/facebook/callback', 
    passport.authenticate('facebook',{ 
     successRedirect : '/home', 
     failureRedirect:'/' 
}) 

);

現在我想通過我的反應應用程序調用它,以便當用戶登陸主頁時,首先他應該通過Facebook進行身份驗證,然後才能看到主頁。我怎樣才能做到這一點 ?

我試過使用react-router,但我不明白如何使用react-router調用後端。使用fetch命令 我也取/登錄/ Facebook的:

componentDidMount(){ 
    fetch("127.0.0.1:3001/login/facebook"); 

但它給了我CORS錯誤。

我的反應應用程序是在127.0.0.1:3000和表示服務器在127.0.0.1:3001。

回答

0

有幾種選擇:

如果您正在使用的WebPack開發服務器,你可以設置一個代理您的API。請參閱here

您可以在開發過程中臨時禁用cors驗證。請參閱here

1

如果此問題僅在開發模式下,那麼Daniel的答案是正確的。

無論如何,我建議避免直接從:3000應用程序調用:3001 API。這是我會做的。

我將編輯取調用如下,

componentDidMount(){ 
    fetch("/login/facebook"); 
} 

此呼叫將由服務於反應應用後端被接收。 現在有案件,

案例1:您的文件服務應用程序將具有能夠將請求轉發給一個API代理方法。例如閱讀here

案例2這是我推薦方法。我只需在3000服務器中編寫身份驗證邏輯,並只使用:3001 API來處理應用程序的業務邏輯。

案例3:如果你有一個後端應用程序(3000),說使用expressJs寫的,你可以將請求轉發至:3001 API。下面是一個示例代碼,

client.send({ 
    method: req.method, 
    path: req.url, 
    data: req.body, 
    params: req.params 
}).then((response) => { 
    // Something 
}).catch((err) => { 
    // Handle error 
}); 

這裏客戶端使用所述request模塊,以使HTTP調用的模塊。 您可以將上述調用作爲快速中間件來實現,以用於所有HTTP調用。

相關問題