如何在Next.js+Supabase中实现Google OAuth增量授权

1. 先在Supabase控制台配置额外权限范围 #

登录你的Supabase项目控制台，进入Auth > Providers > Google，在「Scopes」输入框中添加Gmail读取权限：

https://www.googleapis.com/auth/gmail.readonly

保存配置，让Supabase识别你需要的额外权限范围。

2. 仪表盘页面添加权限请求按钮 #

在仪表盘组件中添加按钮并实现权限请求逻辑：

import { supabaseBrowser } from '@/path-to-your-supabase-client'; // 替换为你的Supabase客户端路径

const Dashboard = () => {
  // 请求Gmail读取权限的函数
  const handleRequestGmailAccess = async () => {
    const supabase = supabaseBrowser();
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: "http://localhost:3000/dashboard", // 授权后跳转回仪表盘
        scopes: "https://www.googleapis.com/auth/gmail.readonly", // 指定额外权限
        prompt: "consent", // 强制弹出授权确认框，确保用户看到新权限请求
      },
    });

    if (error) {
      console.error("请求权限失败:", error);
      // 可在此添加用户可见的错误提示，比如Toast组件
    }
  };

  return (
    <div className="dashboard">
      {/* 其他仪表盘内容 */}
      <button onClick={handleRequestGmailAccess} className="btn">
        授权读取我的邮件
      </button>
    </div>
  );
};

export default Dashboard;

3. 验证权限是否获取成功 #

用户授权后会跳转回仪表盘，可在页面加载时检查会话信息确认权限状态：

import { useEffect } from 'react';

// 在Dashboard组件内添加
useEffect(() => {
  const checkGmailPermission = async () => {
    const supabase = supabaseBrowser();
    const { data: { session } } = await supabase.auth.getSession();
    
    if (session?.provider_token) {
      // 调用Google接口验证token权限范围
      const response = await fetch(`https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=${session.provider_token}`);
      const tokenInfo = await response.json();
      
      if (tokenInfo.scope.includes("gmail.readonly")) {
        console.log("已获取Gmail读取权限");
        // 此处可开启邮件相关功能
      } else {
        console.log("未获取Gmail读取权限");
      }
    }
  };

  checkGmailPermission();
}, []);

关键说明 #

• prompt: "consent"：必须添加该参数，否则Google会跳过授权框（用户已授权基础权限），无法触发新权限请求。
• Google Cloud Console配置：需在你的Google Cloud项目中启用Gmail API，否则即使获取权限，调用API时也会报错。
• 增量授权逻辑：这种方式属于Google OAuth的「增量授权」，允许用户登录后逐步授予额外权限，避免初始请求过多权限引发用户反感。

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