使用Next-Auth授权后，如何获取Google Search Console关联网站？

问题解答 #

1. 仅获取邮箱和名称是否正常？ #

这是正常的。默认情况下，NextAuth的Google Provider只请求了profile和email这两个基础权限范围，所以session里只会返回用户名称、邮箱这类基础身份信息，不会包含Google Search Console相关的权限或数据。

2. 如何获取用户关联的Google Search Console网站？ #

要实现这个功能，需要扩展权限范围并调用官方API，具体步骤如下：

步骤1：修改NextAuth授权配置，添加GSC权限

在Google Provider配置中，新增webmasters.readonly权限（这是获取网站列表所需的最小权限），同时配置回调函数保存访问令牌到session：

import type { NextAuthOptions } from 'next-auth'
import GoogleProvider from "next-auth/providers/google";

export const options: NextAuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
            authorization: {
                params: {
                    scope: 'openid email profile https://www.googleapis.com/auth/webmasters.readonly'
                }
            }
        })
    ],
    callbacks: {
        async jwt({ token, account }) {
            // 保存accessToken到jwt令牌
            if (account) token.accessToken = account.access_token;
            return token;
        },
        async session({ session, token }) {
            // 将accessToken附加到session供页面使用
            session.accessToken = token.accessToken as string;
            return session;
        }
    }
}

步骤2：在页面中调用GSC API获取网站列表

利用session中的accessToken，调用Google Search Console的sites.list接口：

import { getServerSession } from 'next-auth'
import React from 'react'
import { options } from '../api/auth/[...nextauth]/options'

const MyWebsitesPage = async () => {
    const session = await getServerSession(options)
    
    if (!session?.accessToken) {
        return <div>请先登录</div>
    }

    // 调用GSC API获取网站列表
    const res = await fetch('https://www.googleapis.com/webmasters/v3/sites', {
        headers: {
            'Authorization': `Bearer ${session.accessToken}`
        }
    })

    const data = await res.json()

    return (
        <div className='container max-w-6xl mx-auto pl-5 pr-5'>
            <h2>我的Google Search Console网站</h2>
            <ul>
                {data.siteEntry?.map(site => (
                    <li key={site.siteUrl}>{site.siteUrl}</li>
                ))}
            </ul>
        </div>
    )
}

export default MyWebsitesPage

额外注意

• 需确保你的Google Cloud项目已启用Google Search Console API（在Cloud控制台的API库中搜索启用）。
• 测试账号必须是已添加到Google Search Console的站点所有者或权限用户，否则返回的网站列表会为空。

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