Ajax登录弹窗谷歌登录成功后无跳转且持续弹出提交失败提示

常见触发原因 #

• 表单默认提交行为干扰：谷歌登录按钮g-signin2放置在原生<form>标签内部，同时表单内的普通登录按钮未指定type属性，默认触发submit行为。谷歌授权弹窗返回时容易意外触发表单默认提交，打断$.ajax异步请求流程，直接触发fail回调。
• 后端校验拦截：当前ajax仅传递用户基础资料，未附带谷歌授权生成的id_token，也未携带站点要求的CSRF校验字段，login_pro.php会直接判定请求非法，返回非成功状态码触发fail。
• 接口路径不匹配：若项目存在路由规则或子目录部署，login_pro.php的相对路径和当前页面路径不一致，会返回404错误。
• 谷歌域名配置不匹配：谷歌开放平台后台配置的授权域名和当前站点域名不一致，会导致授权信息无效，后端校验不通过。

修复步骤 #

1. 隔离表单提交干扰
   将谷歌登录模块从原有<form>标签中移出，同时给普通登录按钮补充type="button"属性，避免默认提交触发：

   <!-- 谷歌登录模块单独放在表单外 -->
   <div class="or-box">
       <span class="or">OR</span>
       <div class="row">
           <div class="col-md-12">
               <center><div class="g-signin2" data-onsuccess="onSignIn"></div></center>
           </div>
       </div>
   </div>
   
   <form class="form-horizontal" action="" method="post">
       <fieldset>
           <!-- 原有邮箱、密码输入框保留 -->
           <div class="group">
               <input required="" class="input" type="text"><span class="highlight"></span><span class="bar"></span>
               <label class="label" for="email">Email address</label>
           </div>
           <div class="group">
               <input required="" class="input" type="password"><span class="highlight"></span><span class="bar"></span>
               <label class="label" for="pwd">Password</label>
           </div>
   
           <div class="control-group">
               <label class="control-label" for="signin"></label>
               <div class="controls">
                   <!-- 补充type属性避免默认提交 -->
                   <button type="button" id="signin" name="signin" class="btn btn-primary btn-block">Log In</button>
               </div>
           </div>
       </fieldset>
   </form>
   

2. 优化ajax请求参数
   回调逻辑中补充获取谷歌id_token的代码，同时携带CSRF字段，增加错误日志打印方便定位问题：

   function onSignIn(googleUser) {
       const profile = googleUser.getBasicProfile();
       // 获取谷歌授权凭证id_token，供后端校验
       const idToken = googleUser.getAuthResponse().id_token;
   
       if (profile) {
           $.ajax({
               type: 'POST',
               url: 'login_pro.php',
               data: {
                   id: profile.getId(),
                   name: profile.getName(),
                   email: profile.getEmail(),
                   id_token: idToken,
                   // 若站点有CSRF校验，从页面meta标签取对应token即可
                   csrf_token: document.querySelector('meta[name="csrf-token"]')?.content || ''
               }
           }).done(function (data) {
               console.log(data);
               window.location.href = 'index.php';
           }).fail(function (xhr, status, error) {
               // 打印真实错误信息，定位具体故障点
               console.log('请求失败，状态码：', xhr.status, '错误详情：', error);
               alert("提交失败，请稍后重试");
           });
       }
   }
   

3. 定位报错的辅助方法
   打开浏览器开发者工具的「网络」面板，找到login_pro.php的请求记录：
   • 若返回403状态码：排查CSRF配置、谷歌授权域名匹配问题
   • 若返回404状态码：检查login_pro.php的文件路径是否正确
   • 若返回500状态码：查看后端login_pro.php的错误日志，排查参数解析、数据库连接问题

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