如何在React.js应用中通过Google My Business API获取用户商家数据

一、用户授权流程 #

1. 先在Google Cloud控制台创建OAuth 2.0客户端ID，应用类型选「Web应用」，添加你的React项目域名到授权回调地址列表。
2. 安装React OAuth依赖包：

npm install @react-oauth/google

3. 在项目入口文件（如index.js）配置Google OAuth提供者：

import { GoogleOAuthProvider } from '@react-oauth/google';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <GoogleOAuthProvider clientId="你的OAuth客户端ID">
    <App />
  </GoogleOAuthProvider>
);

4. 编写登录按钮组件，请求商家数据访问权限：

import { GoogleLogin } from '@react-oauth/google';

const GoogleBusinessLogin = () => {
  const handleLoginSuccess = async (response) => {
    const accessToken = response.access_token;
    // 将token存入本地存储，方便后续接口调用
    localStorage.setItem('google_biz_access_token', accessToken);
    // 登录成功后立即获取用户商家位置信息
    await fetchUserBusinessLocations(accessToken);
  };

  return (
    <GoogleLogin
      scope="https://www.googleapis.com/auth/business.manage"
      onSuccess={handleLoginSuccess}
      onError={() => console.log('登录授权失败，请重试')}
    />
  );
};

export default GoogleBusinessLogin;

注：scope必须指定business.manage，否则无法获取商家核心数据。

二、理解parent=locations/*参数 #

这个参数里的*代表用户商家的具体位置ID——一个Google商家账号可能关联多个实体门店，所以必须先调用接口获取用户的所有位置ID，再用实际ID替换*（比如parent=locations/1234567890）。

获取位置ID的接口调用示例：

const fetchUserBusinessLocations = async (accessToken) => {
  try {
    const res = await fetch('https://mybusinessaccountmanagement.googleapis.com/v1/accounts/-/locations', {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const data = await res.json();
    // 若用户有多个门店，可新增弹窗让用户选择；这里默认取第一个位置
    const targetLocationId = data.locations[0].name; // 格式为"locations/xxxxxx"
    localStorage.setItem('google_biz_location_id', targetLocationId);
    // 位置ID到手后，开始拉取各项商家数据
    await fetchAllBusinessData(accessToken, targetLocationId);
  } catch (err) {
    console.log('获取商家位置失败:', err);
  }
};

注：accounts/-代表当前授权用户的所有商家账号，接口会自动返回关联的门店位置列表。

三、获取指定商家数据 #

1. 来电次数 #

调用你提到的Business Calls Insights接口，传入已获取的位置ID：

const fetchCallInsights = async (accessToken, locationId) => {
  try {
    const res = await fetch(`https://mybusinessbusinesscalls.googleapis.com/v1/${locationId}/businesscallsinsights`, {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const data = await res.json();
    console.log('总来电次数:', data.totalCallsReceived);
    // 可进一步处理时段分布等细分数据
  } catch (err) {
    console.log('获取来电数据失败:', err);
  }
};

2. 网站访问量与导航请求数 #

这两项数据统一通过Location Insights接口获取：

const fetchTrafficInsights = async (accessToken, locationId) => {
  try {
    const params = new URLSearchParams({
      metricRequests: JSON.stringify([
        { metric: 'WEBSITE_CLICKS' }, // 网站访问量
        { metric: 'DIRECTIONS_REQUESTS' } // 导航请求数
      ]),
      timeRange: JSON.stringify({
        startDate: { year: new Date().getFullYear() },
        endDate: { year: new Date().getFullYear() }
      })
    });

    const res = await fetch(`https://mybusiness.googleapis.com/v4/${locationId}/insights?${params}`, {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const data = await res.json();
    
    const websiteClicks = data.insights[0].metricValues[0].integerValue;
    const directionsCount = data.insights[1].metricValues[0].integerValue;
    console.log('网站访问量:', websiteClicks);
    console.log('导航请求数:', directionsCount);
  } catch (err) {
    console.log('获取流量数据失败:', err);
  }
};

3. 商家评价 #

调用Reviews接口获取评分与评价列表：

const fetchBusinessReviews = async (accessToken, locationId) => {
  try {
    const res = await fetch(`https://mybusiness.googleapis.com/v4/${locationId}/reviews`, {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const data = await res.json();
    console.log('商家平均评分:', data.averageRating);
    console.log('评价总数:', data.totalReviewCount);
    console.log('最新评价:', data.reviews.slice(0, 5)); // 取前5条展示
  } catch (err) {
    console.log('获取评价数据失败:', err);
  }
};

四、关键注意事项 #

• 必须在Google Cloud控制台启用对应API：My Business Account Management API、My Business Business Calls API、My Business API。
• 处理Token过期：Google OAuth Access Token有效期为1小时，需在登录时获取Refresh Token，过期时用Refresh Token换取新的Access Token。
• 异常处理：要覆盖用户未关联商家账号、权限不足、网络错误等场景，给用户明确提示。

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