如何无需重定向获取URL中的AWS授权码？解决二次跳转难题

你这种场景属于OAuth2授权码流程的典型问题，前端直接跳转后原上下文销毁，自然拿不到中间的code，给你三个可行方案：

方案一：后端中转处理（生产环境首选） #

• 登录页不要直接跳AWS授权地址，而是跳转至你的后端接口
• 后端接请求后，自行发起请求对接AWS授权流程，完成回调后拿到code
• 后端用code换取token，最后直接重定向到目标应用页面，把必要参数（如token）带在URL中
• 前端全程只需要触发一次跳转，中间的code获取、token兑换全由后端完成，完全不用操心

方案二：iframe+postMessage捕获回调（仅适用于非严格CORS场景） #

• 在登录页嵌入一个隐藏的iframe，把AWS授权地址设为iframe的src
• 提前将AWS授权的回调地址配置为你自己的前端页面（比如callback.html）
• 当AWS授权完成跳转到callback.html后，该页面的JS可以从URL中提取code，通过postMessage发送给父页面（登录页）
• 登录页拿到code后，再用它兑换token，最后跳转至目标应用
• 注意：如果AWS授权页面设置了X-Frame-Options禁止嵌入iframe，这个方法会失效

方案三：改用OAuth2隐性授权模式（仅测试环境用） #

• 修改AWS授权请求的response_type参数，从code改成token
• 前端直接跳这个授权地址，授权完成后AWS会把token直接返回在URL的hash部分，省去拿code换token的步骤
• 前端从hash中取出token，再跳转至目标应用
• 缺点：token直接暴露在URL中，安全性极低，绝对不能用于生产环境

重要提醒 #

• 前端JS不可能完成两次跳转后还保留上下文执行后续逻辑，页面跳转后原页面的JS就彻底销毁了，别再死磕这个方向
• 生产环境一定要用后端中转的方式，既保证安全，又能完美解决跳转问题

内容的提问来源于stack exchange，提问作者Hannah J.