Wie füge ich meiner App meine Facebook-Authentifizierung hinzu?

Question

Ich benutze Express als Backend. Ich habe Facebook-Authentifizierung im Backend implementiert.

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

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

);

Jetzt möchte ich dies über meine react App aufrufen, so dass wenn der User auf der Startseite landet, er zuerst von Facebook authentifiziert werden soll, dann kann er nur die Homepage sehen. Wie kann ich das machen ?

Ich habe versucht, react-Router, aber ich kann nicht verstehen, wie Backend mit react-Router aufrufen. ich auch geholt/login/facebook-Befehl holen:

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

Aber es gab mir CORS Fehler.

Meine Reaktion App ist bei 127.0.0.1:3000 und Express-Server bei 127.0.0.1:3001.

Answer 1

Es gibt mehrere Möglichkeiten:

Wenn Sie webpack Dev-Server verwenden, können Sie einen Proxy auf Ihre api einrichten. Siehe here

Sie können die Korsvalidierung während der Entwicklung vorübergehend deaktivieren. Siehe here

Answer 2

Wenn dieses Problem nur im Dev-Modus auftritt, ist Daniels Antwort korrekt.

In jedem Fall empfehle ich zu vermeiden, rufen Sie die: 3001 api direkt von der: 3000 App. Folgendes würde ich tun.

Ich werde den Anruf bearbeiten wie folgt holen,

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

Dieser Aufruf wird vom Backend empfangen werden, die die Anwendung reagieren dient. Nun gibt es drei Fälle

Fall 1: Ihr File-Serving App wird eine Proxy-Methode hat, die Anforderungen an eine API weiterleiten kann. Zum Beispiel liest es here

Fall 2 Das ist mein Empfohlen Ansatz. Ich würde einfach die Authentifizierungslogik auf dem Server: 3000 schreiben und nur die API: 3001 für die Verarbeitung der Geschäftslogik der App verwenden.

Fall 3: Wenn Sie eine Backend-App (: 3000) haben, sagen Sie geschrieben mit expressJs, können Sie die Anfrage an die: 3001 API weiterleiten. Hier ist ein Beispielcode für das,

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

Hier Der Client ist ein Modul, das die request Modul verwendet, um HTTP-Anrufe zu tätigen. Sie können den obigen Aufruf als Express-Middleware implementieren, um ihn für alle HTTP-Aufrufe zu verwenden.