问题描述
我在使用 Passport.js 和 React 登录 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,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}`);
});
解决方法
我遇到了同样的问题,但正在实施通行证蒸汽策略。我找到了 this post 关于如何使用通行证和反应设置 Twitter OAUth,并且由于工作流程相同,我能够根据我的需要对其进行调整。 希望对你也有帮助。