React.js集成Facebook与LinkedIn登录时遇错误求助

一、Facebook登录错误修复 #

核心问题 #

1. 站点URL与本地开发端口不匹配
2. 组件未正确使用render props导致UI报错
3. 开发模式下未添加测试用户

修复步骤 #

1. 修正Facebook开发者平台配置

   • 进入应用「Facebook登录」>「设置」，将站点URL修改为http://localhost:3000/（原配置缺少端口3000）
   • 进入「角色」>「测试用户」，添加当前使用的邮箱作为测试用户（开发模式下仅测试用户可登录）

2. 优化代码实现

   • 用环境变量存储AppId，在.env中添加：

     REACT_APP_FACEBOOK_APP_ID=498310359268039
     

   • 调整组件，使用render props自定义按钮并添加错误回调：

     const FaceBookLoginProvider = () => {
         const responseFacebook = (response) => {
             console.log("Facebook登录响应:", response);
         };
     
         const handleFailure = (error) => {
             console.error("Facebook登录失败:", error);
         };
     
         return (
             <FacebookLogin
                 appId={process.env.REACT_APP_FACEBOOK_APP_ID}
                 autoLoad={false}
                 fields="name,email,picture"
                 callback={responseFacebook}
                 onFailure={handleFailure}
                 render={({ onClick }) => (
                     <button onClick={onClick}>使用Facebook登录</button>
                 )}
             />
         );
     }
     

3. 环境调整

   • 开发阶段暂时关闭HTTPS，删除.env中的HTTPS=true，避免自签证书引发的验证错误

二、LinkedIn登录错误修复 #

核心问题 #

1. 重定向URL配置不匹配（代码中含/linkedin路径，平台配置未添加）
2. 缺少回调页面处理授权码

修复步骤 #

1. 修正LinkedIn开发者平台配置

   • 进入应用「Sign In with LinkedIn」>「授权重定向URL」，添加http://localhost:3000/linkedin（需与代码中redirectUri完全一致）

2. 添加路由与回调组件

   • 安装路由依赖：

     npm install react-router-dom
     

   • 调整App.js配置路由：

     import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
     import { LinkedInCallback } from 'react-linkedin-login-oauth2';
     
     function App() {
       return (
         <Router>
           <Routes>
             <Route path="/" element={
               <>
                 <FaceBookLoginProvider />
                 <LinkedInLoginProvider />
               </>
             } />
             <Route path="/linkedin" element={<LinkedInCallback />} />
           </Routes>
         </Router>
       );
     }
     

3. 完善LinkedIn登录组件配置

   • 明确指定权限范围：

     function LinkedInLoginProvider() {
         const { linkedInLogin } = useLinkedIn({
             clientId: '86wj5ppsvt1dzo',
             redirectUri: 'http://localhost:3000/linkedin',
             scope: 'r_liteprofile r_emailaddress',
             onSuccess: (code) => {
                 console.log("LinkedIn授权码:", code);
             },
             onError: (error) => {
                 console.error("LinkedIn登录错误:", error);
             },
         });
         return (
             <img
                 src={linkedin}
                 alt="Log in with Linked In"
                 style={{ maxWidth: '180px', cursor: 'pointer' }}
                 onClick={linkedInLogin}
             />
         );
     }
     

通用注意事项 #

• 第三方登录的重定向URL必须完全匹配，包括协议、域名、端口、路径
• 开发阶段优先使用HTTP，避免HTTPS自签证书引发的安全验证问题
• 开发模式下仅添加的测试用户可登录，上线前需切换为上线模式并完成平台审核

内容的提问来源于stack exchange，提问作者Teja