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

如何解决在 Facebook 登录中使用 React 实现 Passport.js 时遇到问题

我在使用 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，并且由于工作流程相同，我能够根据我的需要对其进行调整。 希望对你也有帮助。