OAuth2.0技术疑问：不跳转直接用POST请求完成授权是否安全？

我正在用Spring实现自研的OAuth2.0授权服务器，前端采用React开发。我有一个疑问：为何必须跳转到授权服务器侧的登录页？我希望在React客户端实现美观简洁的登录页，无需跳转到其他站点。既然我信任该React客户端，是否可以采用如下POST请求方式完成认证：

const login = () =>
// start loggin in
axios.post('/oauth/login_api_without_redirect',
           { username: 'usr', 
             password: 'pwd',
             client_id: 'react_app',
             ... scope, state, etc...
             code_challenge: sha_256('yyyy'), 
             code_challenge_method: 'sha_256' })
      .then(r => {
          axios.post('/oauth/token', 
                     { ... etc params ...
                       auth_code: r.data.authorizationCode, 
                       code_verifier: 'yyyy' })
      })

同时在授权服务器端编写如下API：

@PostMapping("/oauth/login_api_without_redirect")
public String authorize(AuthenticationDTO authen) {
    // include client_secret and other stuff..
    return authorizationCode
}

请问这种实现方式是否安全？

这种实现方式存在严重的安全风险，核心问题在于混淆了OAuth2.0中不同客户端类型的安全边界，具体风险点如下：

• 客户端身份无法安全验证：React属于OAuth2.0定义的公共客户端（SPA是典型的公共客户端），这类客户端无法安全存储client_secret。你提到要在接口中包含client_secret，但SPA的前端代码完全暴露给用户，攻击者可以轻松获取密钥并冒充你的客户端发起请求。
• 用户凭证泄露风险：让React直接收集并发送用户名密码，违背了OAuth2.0授权码模式的核心设计——用户凭证只能在授权服务器的可信环境中输入验证，绝不经过第三方客户端。如果React客户端遭遇XSS攻击，攻击者可直接窃取用户的账号密码。
• 缺乏CSRF防护：标准授权码流程中跳转授权服务器登录页，会通过会话绑定确保请求来自合法用户。你的实现跳过这一步，攻击者可构造恶意页面诱导用户点击，在用户不知情的情况下利用其已有的授权服务器会话发起认证。
• 授权码传递不安全：直接将授权码返回给React客户端，而非通过重定向流程传递，一旦授权码被拦截，攻击者可直接用它换取访问令牌，且你无法验证请求是否来自合法的用户会话。

如果想在React端自定义登录页同时保证安全，正确的做法是：

• 沿用授权码模式+PKCE（你已用到PKCE，但流程错误），让授权服务器提供可嵌入的登录页（如iframe），React仅负责展示UI，用户名密码直接提交到授权服务器的登录接口，验证完成后通过标准重定向流程返回授权码。
• 绝对不要让SPA处理或存储用户敏感凭证，也不要在SPA中嵌入任何需要保密的客户端密钥。

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