在使用React实现Passport.js进行Facebook登录时遇到问题

Question

我在使用带有React的Passport.js登录Facebook时遇到问题。

我能够设置从使用Express和Node.js的服务器到使用React.js的客户端的所有内容。在客户端，我创建了一个登录按钮组件，打开一个新窗口，然后访问我的服务器，并在第二个窗口内将我登录到Facebook。现在的问题是，我如何正确地将信息路由回原始窗口并更新我的状态？

这是我的React代码：

import React, { useState } from "react";
function Facebook() {
const [state, setState] = useState({
isAuth: false,
user: "",
token: "",
});
let content = !state.isAuth ? (
<>
<div>
<a href="http://localhost:4000/facebook">
<button
style={{
display: "inline-block",
fontSize: "14px",
padding: "13px 30px 15px 44px",
background: "#3A5A97",
color: "#fff",
textShadow: "0 -1px 0 rgba(0,0,20,.4)",
textDecoration: "none",
lineHeight: "1",
position: "relative",
borderRadius: "5px",
}}
>
Login with Facebook
</button>
</a>
</div>
</>
) : (
<>
<div>
<button onClick={handleLogout}>logout</button>
</div>
</>
);
return <>{content}</>;
}
export default Facebook;

这是我的Express服务器(我取出了很多对您的视图不必要的东西(：

const express = require("express");
const app = express();
const port = 4000;
const passport = require("passport");
const Strategy = require("passport-facebook").Strategy;
const cors = require("cors");
const jwt = require("jsonwebtoken");
passport.use(
new Strategy(
{
clientID: "<CLIENT_APP_ID>",
clientSecret: "<CLIENT_SECRET>",
// callbackURL: "http://localhost:3000/auth/facebook/callback",
callbackURL: "/auth/facebook/callback",
profileFields: ["id", "displayName", "email", "name"],
enableProof: true,
},
function (accessToken, refreshToken, profile, cb) {
// save the profile on the Database
// Save the accessToken and refreshToken if you need to call facebook apis later on
console.log(accessToken, "<-------------what is access token");
console.log(profile, "<--------------------what is the profile?");
cb(null, profile);
}
)
);
passport.serializeUser(function (user, cb) {
console.log("<--------should be serialized first");
cb(null, user);
});
passport.deserializeUser(function (obj, cb) {
console.log("<--------should be deserialized second");
cb(null, obj);
});
app.use(passport.initialize());
app.use(passport.session());
app.get("/facebook", passport.authenticate("facebook"));
app.get(
"/auth/facebook/callback",
passport.authenticate("facebook", {
session: false,
failureRedirect: "http://localhost:3000/error",
successRedirect: "http://localhost:3000/success",
}),
(req, res) => {
res.json(); 
}
);
app.listen(port, () => {
console.log(`App is listening on ${port}`);
});

Answer 1

我遇到了同样的问题，但正在执行passport steam策略。我发现了这篇关于如何使用passport设置Twitter OAUth并做出反应的帖子，由于工作流程相同，我能够根据自己的需求进行调整。希望它也能帮助你。