React弹窗实现多身份提供商（脸书/谷歌/领英）登录求助

你的现有代码已经完成了弹窗打开授权页的基础功能，但缺少授权成功后获取auth_code并与后端交互的核心逻辑，同时还有一些细节需要优化。以下是完整的改进实现：

import { useState } from 'react';

const CLIENT_ID = '{CLIENT_ID}';

const FacebookLoginPopupButton = ({
  height = '600',
  width = '679',
  apiVersion = '15.0',
  clientId = CLIENT_ID,
  redirectUri = 'https://localhost:3000/facebook/auth2/code',
  scope = 'email',
  onSuccess,
  onFailure
}) => {
  // 生成随机state，用于CSRF防护
  const generateRandomState = () => {
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  };

  const openNewWindowWithFacebookAuth = (event) => {
    event.preventDefault();
    const state = generateRandomState();
    const authUrl = new URL(`https://www.facebook.com/v${apiVersion}/dialog/oauth`);
    
    // 用URLSearchParams构建参数，避免字符串拼接的错误
    authUrl.searchParams.append('scope', scope);
    authUrl.searchParams.append('client_id', clientId);
    authUrl.searchParams.append('redirect_uri', redirectUri);
    authUrl.searchParams.append('state', state);
    authUrl.searchParams.append('response_type', 'code');
    authUrl.searchParams.append('auth_type', 'rerequest');

    // 打开弹窗
    const popup = window.open(authUrl.toString(), '_blank', `height=${height},width=${width},top=100,left=100`);
    
    // 处理弹窗被浏览器拦截的情况
    if (!popup || popup.closed || typeof popup.closed === 'undefined') {
      onFailure?.({ error: '弹窗被浏览器拦截，请允许弹窗权限' });
      return;
    }

    // 定时监听弹窗状态，获取auth_code
    const popupInterval = setInterval(() => {
      try {
        // 只有当弹窗的URL包含redirectUri时才解析（授权完成后会跳转）
        if (popup.location.href.startsWith(redirectUri)) {
          clearInterval(popupInterval);
          const urlParams = new URLSearchParams(popup.location.search);
          const authCode = urlParams.get('code');
          const returnedState = urlParams.get('state');
          const error = urlParams.get('error');

          popup.close();

          // 验证state一致性，防止CSRF攻击
          if (returnedState !== state) {
            onFailure?.({ error: 'State验证失败，可能存在CSRF攻击' });
            return;
          }

          if (error) {
            onFailure?.({ error: `授权失败：${error}` });
            return;
          }

          if (authCode) {
            // 调用后端API换取access_token
            fetch(`/${clientId}/auth`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                auth_code: authCode,
                redirect_uri: redirectUri
              })
            })
            .then(res => res.json())
            .then(data => {
              onSuccess?.(data);
            })
            .catch(err => {
              onFailure?.({ error: '后端请求失败', details: err });
            });
          } else {
            onFailure?.({ error: '未获取到授权码' });
          }
        }
      } catch (e) {
        // 跨域访问弹窗URL会报错，属于正常情况，继续监听
      }
    }, 500);

    // 监听弹窗关闭事件，清除定时器并触发失败回调
    const handlePopupClose = () => {
      clearInterval(popupInterval);
      onFailure?.({ error: '用户关闭了授权弹窗' });
    };
    popup.addEventListener('beforeunload', handlePopupClose);
  };

  return (
    <div onClick={openNewWindowWithFacebookAuth} style={{ cursor: 'pointer', padding: '8px 16px', border: '1px solid #ddd', borderRadius: '4px' }}>
      <p>Sign in with Facebook</p>
    </div>
  );
};

export default FacebookLoginPopupButton;

关键改进点说明 #

• CSRF防护：自动生成随机state，并在授权完成后验证返回的state与初始值一致，防止跨站请求伪造。
• 参数构建优化：使用URLSearchParams替代字符串拼接，避免URL编码错误。
• 弹窗状态监听：通过定时轮询弹窗的URL，在授权完成跳转后解析auth_code。
• 异常处理：覆盖弹窗被拦截、用户关闭弹窗、授权失败、后端请求失败等多种异常场景，触发对应的onFailure回调。
• 后端交互：获取到auth_code后自动调用后端POST /{provider}/auth接口，换取access_token并通过onSuccess返回结果。

使用示例 #

<FacebookLoginPopupButton
  onSuccess={(data) => {
    console.log('登录成功', data);
    // 这里可以处理登录后的逻辑，比如存储token、跳转页面等
  }}
  onFailure={(error) => {
    console.error('登录失败', error);
    // 提示用户登录失败信息
  }}
/>

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