如何在 WordPress 中添加使用 Google 的一键登录

前提准备

1. 进入 Google 开发者控制台

1. 访问 Google Cloud Console，登录你的 Google 账号（建议用网站管理员账号）。
2. 创建项目
   • 点击左上角 “项目” 下拉菜单，选择 “新建项目”。
   • 输入项目名称（如 “我的网站 Google 登录”），选择国家 / 地区，点击 “创建”（可能需要等待几秒加载）。
3. 启用 OAuth consent 屏幕
   • 项目创建后，在左侧菜单找到 “APIs 和服务”→“OAuth 同意屏幕”。
   • 选择 “用户类型”：
     • 若网站是公开的（允许任意 Google 用户登录），选 “外部”；
     • 若仅内部团队使用，选 “内部”。
   • 点击 “创建”，填写基本信息：
     • 应用名称：显示给用户的名称（如你的网站名）；
     • 用户支持邮箱：用于接收用户反馈；
     • 应用 logo（可选）；
     • 授权域名：添加你的网站域名（如 example.com）。
   • 填写完成后，点击 “保存并继续”，跳过 “范围”（默认即可）和 “测试用户”（外部用户类型可暂时不填，后续需审核），最后点击 “返回仪表板”。
4. 创建 OAuth 客户端 ID
   • 左侧菜单进入 “APIs 和服务”→“凭据”，点击 “创建凭据”→“OAuth 客户端 ID”。
   • 应用类型选择 “Web 应用”，输入名称（如 “网站登录”）。
   • 添加授权回调 URL（关键！）：
     • 这是 Google 验证通过后跳转回你网站的地址，需根据后续使用的插件或代码填写。
     • 插件法暂时可先填 https://你的域名/wp-admin/admin-ajax.php（后续可能需要微调，插件会提示具体 URL）；
     • 手动代码法需填你自定义的回调页面 URL（如 https://你的域名/google-login-callback/）。
   • 点击 “创建”，会生成 客户端 ID 和 客户端密钥，复制保存（后续会用到）。

方法一：插件法（简单高效，推荐）

插件 1：Nextend Social Login（轻量、免费版够用）

1. 安装插件

1. 后台进入「插件」→「安装插件」，搜索 “Nextend Social Login”，点击 “安装” 并 “激活”。
2. 配置 Google 登录
   • 激活后，进入「设置」→「Nextend Social Login」，切换到 “Google” 标签页。
   • 点击 “连接 Google”，粘贴之前获取的 客户端 ID 和 客户端密钥，点击 “保存更改”。
   • 插件会自动生成回调 URL（如 https://你的域名/wp-admin/admin-ajax.php?action=nextend-social-login&provider=google&redirect_uri=...），需将此 URL 添加到 Google 开发者平台的 “授权回调 URL” 中（步骤见 “前提准备” 第 4 步，确保一致，否则登录会失败）。
3. 设置登录按钮显示位置
   • 插件支持在登录页、注册页、边栏等位置显示 Google 登录按钮。
   • 边栏显示：进入「外观」→「小工具」，找到 “Nextend Social Login” 小工具，拖拽到边栏，选择显示 Google 按钮即可。
   • 登录页显示：插件默认会在 WordPress 自带登录页（wp-login.php）添加按钮，无需额外设置。
4. 自定义用户角色和跳转（可选）
   • 在 “Google” 标签页的 “用户数据” 中，可设置新用户默认角色（如 “订阅者”）；
   • 在 “重定向” 中，可设置登录后跳转的页面（如首页或用户中心）。

插件 2：WP Social Login（功能更全，支持多平台）

1. 安装插件：搜索 “WP Social Login” 并激活。
2. 配置 Google：
   • 进入「设置」→「WP Social Login」→「Providers」，找到 “Google” 并启用。
   • 点击 “Configure”，粘贴客户端 ID 和密钥，保存。
   • 同样需将插件提示的回调 URL 添加到 Google 开发者平台的授权回调中。
3. 显示按钮：在「Widgets」中勾选 “Google”，选择显示位置（边栏、登录页等）。

方法二：手动代码法（适合开发者，完全自定义）

步骤 1：引入 Google API 客户端库

1. 下载 Google API PHP Client，解压后将 vendor 文件夹上传到主题目录（如 wp-content/themes/你的主题/google-api/）。

步骤 2：添加登录触发和回调代码

// 加载 Google API 客户端
require_once get_template_directory() . '/google-api/vendor/autoload.php';

// 定义 Google 配置
define('GOOGLE_CLIENT_ID', '你的客户端ID');
define('GOOGLE_CLIENT_SECRET', '你的客户端密钥');
define('GOOGLE_REDIRECT_URI', 'https://你的域名/google-login-callback/'); // 回调URL（需在Google平台注册）

// 创建 Google 登录链接（用于在前端显示按钮）
function google_login_url() {
  $client = new Google\Client();
  $client->setClientId(GOOGLE_CLIENT_ID);
  $client->setClientSecret(GOOGLE_CLIENT_SECRET);
  $client->setRedirectUri(GOOGLE_REDIRECT_URI);
  $client->addScope('email'); // 请求用户邮箱权限
  $client->addScope('profile'); // 请求用户资料权限
  return $client->createAuthUrl();
}

// 添加短代码，用于在页面/边栏显示登录按钮
add_shortcode('google_login_button', function() {
  if (is_user_logged_in()) {
    return '你已登录';
  }
  $login_url = google_login_url();
  return '<a href="' . esc_url($login_url) . '" class="google-login-button">用 Google 账号登录</a>';
});

// 处理回调逻辑（验证授权并登录用户）
add_action('template_redirect', function() {
  $current_url = home_url(add_query_arg(array(), $wp->request));
  if ($current_url === GOOGLE_REDIRECT_URI) {
    $client = new Google\Client();
    $client->setClientId(GOOGLE_CLIENT_ID);
    $client->setClientSecret(GOOGLE_CLIENT_SECRET);
    $client->setRedirectUri(GOOGLE_REDIRECT_URI);

    if (isset($_GET['code'])) {
      $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
      $client->setAccessToken($token);

      // 获取用户信息
      $oauth = new Google\Service\Oauth2($client);
      $user_info = $oauth->userinfo->get();
      $email = $user_info->getEmail();
      $name = $user_info->getName();

      // 检查用户是否已存在（通过邮箱）
      $user = get_user_by('email', $email);
      if (!$user) {
        // 新建用户
        $username = sanitize_user(strstr($email, '@', true), true); // 用邮箱前缀作为用户名
        $user_id = wp_create_user($username, wp_generate_password(), $email);
        wp_update_user(array(
          'ID' => $user_id,
          'display_name' => $name
        ));
        $user = get_user_by('id', $user_id);
      }

      // 登录用户
      wp_set_auth_cookie($user->ID);
      wp_redirect(home_url()); // 登录后跳转首页
      exit;
    }
  }
});

步骤 3：在前端显示登录按钮

• 边栏显示：进入「外观」→「小工具」，添加 “自定义 HTML” 小工具，输入短代码 [google_login_button]。
• 登录页显示：在登录页模板（如 wp-login.php 或自定义登录页）中添加代码 <?php echo do_shortcode('[google_login_button]'); ?>。

步骤 4：美化按钮样式（可选）

.google-login-button {
  display: inline-block;
  padding: 10px 20px;
  background: #4285F4;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}
.google-login-button:hover {
  background: #3367D6;
  color: white;
}

注意事项

1. 必须使用 HTTPS：Google OAuth 2.0 要求回调 URL 必须是 HTTPS（本地测试 localhost 除外），否则登录会失败。
2. 审核提示：若网站是 “外部” 用户类型，Google 可能会要求提交审核（尤其是公开网站），否则登录按钮可能仅对测试用户可见。审核需提供网站隐私政策、使用说明等，通常 1-3 天通过。
3. 安全问题：客户端密钥不可泄露，手动代码时避免在前端暴露；定期在 Google 开发者平台更新密钥。

通过以上方法，即可在 WordPress 中实现 Google 一键登录功能。新手优先选择插件法，开发者可通过代码实现更灵活的定制～