使用Cognito Hosted UI登录后，如何在浏览器存取Access Token？

针对你遇到的302回调无法直接返回Token给前端的问题，结合ASP.NET Core后端和JQuery前端技术栈，提供两种实用解决方案：

方案一：通过临时HTML页面存储Token后跳转 #

后端回调接口不直接302跳转，而是返回嵌入JavaScript的HTML页面，脚本将Access Token存入浏览器存储后，自动跳转到前端业务页面。

后端ASP.NET Core实现 #

[HttpGet("auth/cognito/callback")]
public async Task<IActionResult> CognitoCallback(string code, string state)
{
    // 你已实现的授权码换Access Token逻辑
    var accessToken = await ExchangeCodeForTokenAsync(code, state);
    
    // 生成临时页面，执行Token存储与跳转
    var redirectPage = $@"
    <!DOCTYPE html>
    <html>
    <body>
        <script>
            // 将Token存入localStorage
            localStorage.setItem('cognito_access_token', '{accessToken}');
            // 跳转到前端主页面，替换为你的实际路径
            window.location.href = '/';
        </script>
    </body>
    </html>";
    
    return Content(redirectPage, "text/html");
}

前端JQuery获取Token并发起请求 #

$(document).ready(function() {
    // 从localStorage读取Token
    const accessToken = localStorage.getItem('cognito_access_token');
    
    if (accessToken) {
        // 携带Token发起API请求
        $.ajax({
            url: '/api/your-business-endpoint',
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${accessToken}`
            },
            success: function(res) {
                // 处理接口返回数据
                console.log(res);
            },
            error: function(xhr) {
                // 处理Token过期等异常情况
                console.error(xhr.responseText);
            }
        });
    }
});

方案二：通过Cookie传递Token #

后端直接将Access Token写入浏览器Cookie，再跳转到前端页面，前端从Cookie中读取Token，适合兼顾安全的场景。

后端ASP.NET Core实现 #

[HttpGet("auth/cognito/callback")]
public async Task<IActionResult> CognitoCallback(string code, string state)
{
    var accessToken = await ExchangeCodeForTokenAsync(code, state);
    
    // 配置Cookie参数
    var cookieOpts = new CookieOptions
    {
        HttpOnly = false, // 需前端读取则设为false；仅后端使用则设为true提升安全性
        Secure = true, // 生产环境建议开启，仅HTTPS下传输
        SameSite = SameSiteMode.Strict, // 防范CSRF攻击
        Expires = DateTimeOffset.UtcNow.AddHours(1) // 与Cognito Access Token有效期保持一致
    };
    
    Response.Cookies.Append("cognito_access_token", accessToken, cookieOpts);
    
    // 跳转到前端页面
    return Redirect("/");
}

前端JQuery读取Cookie并发起请求 #

// 封装Cookie读取函数
function getCookie(name) {
    const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
    return match ? match[2] : '';
}

$(document).ready(function() {
    const accessToken = getCookie('cognito_access_token');
    
    if (accessToken) {
        $.ajax({
            url: '/api/your-business-endpoint',
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${accessToken}`
            },
            success: function(data) {
                // 处理业务逻辑
            }
        });
    }
});

关键注意事项 #

• 安全防护：localStorage易受XSS攻击，建议配合CSP（内容安全策略）使用；Cookie若无需前端读取，务必开启HttpOnly属性。
• State参数验证：必须验证回调中的state参数，防止CSRF攻击，这是OAuth2流程的必要安全步骤。
• 有效期对齐：Cookie过期时间要与Cognito Access Token的有效期保持一致，避免Token失效但Cookie仍存在的矛盾情况。

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