如何让AWS Cognito中Facebook登录后用户停留在原页面

要实现登录后跳转回发起请求的原页面，核心是把当前页面路径作为state参数传递给Cognito的授权流程，登录完成后再通过这个state值跳转回去，具体步骤如下：

1. 配置Cognito App Client的回调URL #

首先在AWS Cognito控制台的App Client Settings里，将回调URL设置为带通配符的地址（比如http://localhost:3000/*），这样所有子页面路径都能被回调匹配。如果你的环境不支持通配符，就把所有可能的页面路径逐一添加进去。

同时确保OAuth 2.0授权类型勾选了Authorization code grant或Implicit grant（根据你的登录流程选择），并已正确配置Facebook作为联合身份提供商。

2. 触发登录时传递当前页面路径作为state #

根据你使用的AWS SDK（Amplify或原生Cognito Auth SDK），在唤起Facebook登录时，把当前页面的路径附加到请求的state参数中，同时建议存储这个路径用于后续验证（防止CSRF攻击）。

用AWS Amplify的示例 #

import { Auth } from 'aws-amplify';
import { useNavigate } from 'react-router-dom';

const LoginButton = () => {
  const navigate = useNavigate();

  const handleFacebookLogin = async () => {
    const currentPath = window.location.pathname;
    // 生成随机字符串作为state，关联当前路径（增强安全性）
    const randomState = Math.random().toString(36).slice(2, 18);
    localStorage.setItem(`login_${randomState}`, currentPath);
    
    await Auth.federatedSignIn({
      provider: 'Facebook',
      state: randomState
    });
  };

  return <button onClick={handleFacebookLogin}>Facebook登录</button>;
};

用amazon-cognito-auth-js的示例 #

import { CognitoAuth } from 'amazon-cognito-auth-js';

const authData = {
  ClientId: '你的Cognito App Client ID',
  AppWebDomain: '你的Cognito域名',
  TokenScopesArray: ['openid', 'email'],
  RedirectUriSignIn: 'http://localhost:3000/',
  RedirectUriSignOut: 'http://localhost:3000/logout'
};
const auth = new CognitoAuth(authData);

const handleFacebookLogin = () => {
  const currentPath = window.location.pathname;
  const randomState = Math.random().toString(36).slice(2, 18);
  localStorage.setItem(`login_${randomState}`, currentPath);
  
  auth.setState(randomState);
  auth.getSession(); // 唤起登录流程
};

3. 在回调页面处理跳转 #

通常回调URL是根路径（/），在根组件的useEffect里解析URL中的state参数，取出对应的原页面路径，验证后跳转回去：

import { useEffect } from 'react';
import { Auth } from 'aws-amplify';
import { useNavigate } from 'react-router-dom';

const App = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const state = urlParams.get('state');
    const authCode = urlParams.get('code');

    if (authCode && state) {
      // 取出存储的原路径
      const targetPath = localStorage.getItem(`login_${state}`);
      if (targetPath) {
        // 完成Cognito的token交换
        Auth.federatedSignIn({ provider: 'Facebook' })
          .then(() => {
            // 跳转回原页面
            navigate(targetPath);
            // 清理存储的临时数据
            localStorage.removeItem(`login_${state}`);
          })
          .catch(err => console.error('登录验证失败:', err));
      }
    }
  }, [navigate]);

  return <div>你的应用内容</div>;
};

关键注意事项 #

• CSRF防护：不要直接用页面路径作为state参数，建议用随机字符串关联路径，避免恶意构造跳转地址。
• 路径编码：如果页面路径包含特殊字符，需要用encodeURIComponent处理后再存储，回调时用decodeURIComponent解析。
• 权限验证：跳转回原页面后，确保组件已处理用户登录状态，避免未授权访问。

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