如何將Facebook身份驗證添加到我的反應應用程序？

我使用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。

來源

2017-12-18 ASHUTOSH CHANDRA

有幾種選擇：

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

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

來源

2017-12-18 03:49:35

如果此問題僅在開發模式下，那麼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調用。

來源

2017-12-18 04:38:57

如何將Facebook身份驗證添加到我的反應應用程序？

回答

相關問題