SAP Hybris集成Kakao社交登录：关联请求发起用户与浏览器会话

问题根源 #

不是Kakao回调未识别请求发起用户，而是你的授权流程缺少会话关联机制，加上前端消息传递未做验证，导致并发场景下数据串流：

1. OAuth2授权流程中未使用state参数，无法将Kakao回调请求与用户初始登录请求绑定；
2. 前端postMessage使用通配符*作为目标源，未验证消息归属，可能被其他用户的窗口错误接收；
3. 虽然后端Model是请求作用域，但缺少state校验无法确保回调结果对应正确的用户会话。

解决方案 #

1. 前端发起登录时添加state参数 #

点击Kakao登录按钮时，生成唯一随机state，存储在当前会话，并携带到Kakao授权URL：

// 登录页Kakao按钮点击事件
function openKakaoLogin() {
    // 生成唯一随机字符串（可使用UUID或自定义随机算法）
    const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    // 存储到sessionStorage，用于后续验证
    sessionStorage.setItem('KAKAO_STATE', state);
    
    // 构造Kakao授权URL，添加state参数
    const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=你的客户端ID&redirect_uri=${encodeURIComponent('https://www.storefront.com/callback/kakao')}&response_type=code&state=${state}`;
    window.open(kakaoAuthUrl, 'KakaoLogin', 'width=600,height=600');
}

2. 后端回调接口校验state并关联会话 #

修改回调接口，接收并验证state，确保请求合法性：

@RequestMapping(value = "/callback/kakao" , method = RequestMethod.GET)
public String callback(@RequestParam final String code, 
                       @RequestParam final String state, 
                       final HttpServletRequest request, 
                       final HttpServletResponse response,
                       Model model) {
    // 从session获取预存的state，验证请求合法性
    HttpSession session = request.getSession();
    String storedState = (String) session.getAttribute("KAKAO_STATE");
    
    if (storedState == null || !storedState.equals(state)) {
        // 非法请求，返回错误页面
        return ControllerConstants.Pages.ERROR;
    }
    // 移除已使用的state，避免重复验证
    session.removeAttribute("KAKAO_STATE");

    String path = configurationService.getConfiguration().getString("redirect.uri.kakao");
    String accessToken = facade.getAccessTokenFromKakao(code, getFullRequestUrl(request,path));

    KakaoProfile profile = facade.getUserInfo(accessToken);
        
    populateData(model, profile);
    // 将state传递到前端，用于消息验证
    model.addAttribute("state", state);

    return ControllerConstants.Pages.RESPONSE;
}

3. 前端回调页面发送带state的消息 #

修改回调页面的JS，指定消息目标源并携带state：

<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>   
<%@ taglib prefix="pages" tagdir="/WEB-INF/tags/responsive/pages" %>

<script>
const progressiveProfilingHtml = "<spring:escapeBody javaScriptEscape=&quot;true&quot;><pages:progressive-profiling/></spring:escapeBody>";
const state = "${state}"; // 从后端模型获取验证用的state

window.addEventListener('beforeunload', () => { 
    // 指定目标源为你的域名，避免消息泄露
    window.opener.postMessage({
        type: 'KAKAO_PROFILE',
        html: progressiveProfilingHtml,
        state: state
    }, 'https://www.storefront.com'); 
});
window.addEventListener("DOMContentLoaded", (event) => {
    window.close();
});
</script>

4. 登录页验证消息并展示弹窗 #

在登录页添加message监听，验证消息来源和state后展示弹窗：

// 登录页监听postMessage
window.addEventListener('message', (event) => {
    // 验证消息来源，仅处理自己域名的消息
    if (event.origin !== 'https://www.storefront.com') {
        return;
    }
    // 验证消息类型和state匹配
    if (event.data.type === 'KAKAO_PROFILE') {
        const storedState = sessionStorage.getItem('KAKAO_STATE');
        if (event.data.state === storedState) {
            // 插入渐进式配置弹窗HTML
            document.body.insertAdjacentHTML('beforeend', event.data.html);
            // 清除存储的state
            sessionStorage.removeItem('KAKAO_STATE');
        }
    }
});

额外检查 #

确保你的facade实现（getAccessTokenFromKakao、getUserInfo）没有使用静态变量或单例共享变量，避免并发请求时数据覆盖。

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