WordPress小部件无法保存Google Credential与CSRF Token问题

核心问题 #

1. 变量拼写错误：form方法中，else分支里错误使用了$instace（少写一个n），正确应为$instance，这会导致初始加载时无法读取已保存的凭证值。
2. Google登录提交字段不匹配：当前Google登录直接提交credential和g_csrf_token到widgets.php，但WordPress小部件的表单字段带有小部件ID前缀（格式如widget-your_widget_id[google_credential]），update方法的$new_instance只会识别小部件表单内的字段，因此无法获取Google登录提交的原始字段值，导致保存失败。

修复步骤 #

1. 修正变量拼写错误 #

在form方法中，将两处$instace改为$instance：

// 原错误代码
$google_credential = $instace['google_credential'];
// 修正后
$google_credential = $instance['google_credential'];

// 原错误代码
$google_csrf_token = $instace['google_csrf_token'];
// 修正后
$google_csrf_token = $instance['google_csrf_token'];

2. 调整Google登录回调逻辑 #

移除data-login_uri，添加JavaScript回调处理登录结果，将凭证值填充到小部件对应输入框，再通过小部件表单提交保存：

<?php if(empty($_POST['credential'])){ ?>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function handleCredentialResponse(response) {
            // 定位当前小部件的凭证输入框
            const credentialInput = document.getElementById('<?php echo esc_attr( $this->get_field_id( 'google_credential' ) ); ?>');
            const csrfTokenInput = document.getElementById('<?php echo esc_attr( $this->get_field_id( 'google_csrf_token' ) ); ?>');
            
            if(credentialInput && csrfTokenInput) {
                credentialInput.value = response.credential;
                csrfTokenInput.value = response.g_csrf_token;
                // 可选：自动触发当前小部件的保存按钮
                credentialInput.closest('.widget').querySelector('.widget-control-save').click();
            }
        }
    </script>
<?php } ?>

<?php if(empty($_POST['credential'])){ ?>
    <div id="g_id_onload"
         data-client_id="{removed for security}.apps.googleusercontent.com"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="handleCredentialResponse"
         data-auto_prompt="false">
    </div>

    <div class="g_id_signin"
         data-type="standard"
         data-shape="rectangular"
         data-theme="filled_blue"
         data-text="signin_with"
         data-size="large"
         data-locale="es-419"
         data-logo_alignment="left">
    </div>
<?php } ?>

3. 确认update方法字段处理 #

你的update方法代码逻辑正确，只要$new_instance能接收到google_credential和google_csrf_token字段，就能正常保存。上述回调将值填充到小部件输入框后，表单提交时这些字段会被自动包含进$new_instance。

额外提示 #

• 凭证字符串通常较长，建议将update方法中的sanitize_text_field替换为sanitize_textarea_field，避免长字符串被截断。
• 若不使用自动保存，可提示用户点击小部件的「保存」按钮完成凭证存储。

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