Исправление сбоя авторизации Google Maps SDK: Полное руководство

Сбои при авторизации в Google Maps SDK для React Native обычно вызваны несоответствием SHA-1 отпечатков пальцев, неправильными ограничениями API-ключа или конфликтами конфигурации Firebase. Наиболее распространенным решением является повторное создание вашего API-ключа с правильным SHA-1 отпечатком пальца и обеспечение применения правильных ограничений в Google Cloud Console.

Содержание

• Понимание ошибки авторизации
• Распространенные причины сбоев авторизации
• Пошаговое руководство по устранению неполадок
• Конфигурация, специфичная для Firebase
• Проблемы совместимости с React Native Maps
• Дополнительные шаги по устранению неполадок

Понимание ошибки авторизации

Сообщение об ошибке, которое вы видите, содержит важную информацию о том, что идет не так. Ошибка Google Maps Android API: Error requesting API token. StatusCode=INVALID_ARGUMENT указывает на то, что ваше Android-приложение не может пройти аутентификацию на серверах Google, обычно из-за нескольких проблем конфигурации.

В сообщении об ошибке конкретно указано API Key: AIzaXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXX и Android Application (<cert_fingerprint>;<package_name>): XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX;com.project.development. Это точно говорит вам, какой API-ключ и конфигурация Android-приложения пытается проверить Google.

Согласно официальной документации Google Maps, наиболее распространенной причиной этой ошибки является несоответствие SHA-1 отпечатка пальца, зарегистрированного в Google Cloud Console, и фактического отпечатка вашего ключа подписи.

Распространенные причины сбоев авторизации

Несоответствия SHA-1 отпечатков пальцев

Самая частая причина сбоев авторизации - неправильная конфигурация SHA-1 отпечатка пальца. Ваше приложение React Native использует разные ключи подписи для отладочных и производственных сборок, и у каждого есть уникальный SHA-1 отпечаток пальца.

Ограничения API-ключа

Последние изменения в Google Cloud Console требуют явных ограничений для API-ключей. Неограниченный API-ключ может работать в разработке, но не сработать в производстве из-за политик безопасности.

Конфликты конфигурации Firebase

При одновременном использовании Firebase и Google Maps могут возникать конфликты API-ключей между автоматически сгенерированными ключами Firebase и пользовательскими ключами Google Maps API.

Проблемы совместимости версий React Native Maps

Разные версии react-native-maps могут иметь разные требования или ошибки, влияющие на обработку API-ключа.

Как объясняется в руководствах по конфигурации API-ключа на Mozilla Developer Network, правильное ограничение ключа критически важно как для безопасности, так и для функциональности в современных веб- и мобильных приложениях.

Пошаговое руководство по устранению неполадок

Шаг 1: Генерация правильных SHA-1 отпечатков пальцев

Для отладочных сборок (разработка):

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Для релизных сборок (производство):

keytool -list -v -keystore /path/to/your/release.keystore -alias your-release-alias -storepass your-store-password -keypass your-key-password

Совет: Не оставляйте ваш API-ключ открытым. Перейдите и ограничьте его в Cloud Console — привяжите к имени пакета вашего приложения и SHA-1 отпечатку пальца.

Шаг 2: Обновление конфигурации Google Cloud Console

1. Перейдите в Google Cloud Console
2. Перейдите в “APIs & Services” > “Credentials”
3. Найдите ваш ключ API Google Maps
4. Нажмите “Edit API key”
5. В разделе “Application restrictions”:
   • Добавьте Android приложения с отладочным и релизным SHA-1 отпечатками пальцев
   • Убедитесь, что имя пакета точно совпадает: com.project.development
6. В разделе “API restrictions”:
   • Включите “Maps SDK for Android”

Шаг 3: Проверка конфигурации Android Manifest

Убедитесь, что ваш AndroidManifest.xml содержит правильный тег meta-data:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="ВАШ_API_КЛЮЧ_ЗДЕСЬ"/>

Это должно быть размещено внутри тега <application>, а не <activity>.

Шаг 4: Проверка конфигурации react-native-maps

Для проектов Expo убедитесь, что ваш app.json содержит:

"android": {
  "package": "com.project.development",
  "config": {
    "googleMaps": {
      "apiKey": "ВАШ_API_КЛЮЧ_ЗДЕСЬ"
    }
  }
}

Для не-Expo проектов проверьте, что API-ключ правильно передается компоненту MapView:

<MapView
  provider={PROVIDER_GOOGLE}
  style={{ flex: 1 }}
  apiKey="ВАШ_API_КЛЮЧ_ЗДЕСЬ"
/>

Конфигурация, специфичная для Firebase

При использовании Firebase вместе с Google Maps могут возникать конфликты между разными API-ключами. Вот как их разрешить:

Проблемы с автоматически сгенерированными API-ключами Firebase

Firebase автоматически генерирует API-ключи, которые могут конфликтовать с вашими пользовательскими ключами Google Maps. Ошибка аутентификации, с которой вы сталкиваетесь, часто вызвана несоответствием SHA-1 в этом контексте.

Решение:

1. Перейдите в Firebase Console
2. Выберите ваш проект
3. Перейдите в “Project Settings” > “General” tab
4. В разделе “Your apps”, найдите ваше Android приложение
5. Запишите SHA-1 отпечаток пальца, указанный там
6. Добавьте этот отпечаток в ограничения вашего API-ключа в Google Cloud Console

Пользовательский API-ключ с Firebase

Если вы используете пользовательский API-ключ, созданный через Terraform или вручную:

1. Убедитесь, что один и тот же SHA-1 отпечаток пальца используется как для Firebase, так и для Google Maps
2. Проверьте, что API-ключ правильно ограничен как для Firebase, так и для сервисов Google Maps
3. Убедитесь, что ID клиента OAuth 2.0 в Firebase соответствует имени пакета вашего Android приложения

Как указано в руководстве по аутентификации Firebase CodeArchPedia, “Эта ошибка аутентификации вызвана несоответствием SHA-1” - подчеркивая критическую важность правильной конфигурации отпечатка пальца.

Проблемы совместимости с React Native Maps

Ваша текущая версия ~1.20.1 может иметь проблемы совместимости с более новыми версиями React Native или требованиями Google Maps SDK.

Рассмотрения миграции версий

Рассмотрите возможность обновления до более новой версии react-native-maps. Версия 1.26.x содержит значительные улучшения и исправления ошибок. Однако имейте в виду, что:

• Более новые версии могут требовать дополнительные нативные зависимости
• Возможно, потребуется обновить конфигурацию gradle для Android
• Некоторые изменения API могут потребоваться в вашем JavaScript коде

Обновления конфигурации Gradle

Убедитесь, что ваши файлы android/build.gradle и android/app/build.gradle совместимы с вашей версией react-native-maps:

// android/build.gradle
dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.4.0'
    classpath 'com.android.tools.build:gradle:7.4.0'
}

// android/app/build.gradle
dependencies {
    // ...
    implementation 'com.google.android.gms:play-services-maps:18.2.0'
    implementation 'com.google.android.gms:play-services-location:21.2.0'
}

Дополнительные шаги по устранению неполадок

Сетевые и специфичные для устройства проблемы

1. Очистите кэш и данные приложения на вашем устройстве
2. Полностью удалите и переустановите приложение
3. Протестируйте на нескольких устройствах, чтобы исключить проблемы, специфичные для устройства
4. Проверьте сетевое подключение - некоторые корпоративные сети могут блокировать вызовы API Google Maps

Отладочное логирование

Включите подробное логирование для получения более подробной информации об ошибках:

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  'Unrecognized WebSocket connection option',
  'AsyncStorage has been extracted from react-native core'
]);

// Добавьте это в ваш компонент для подробного логирования Google Maps
console.log('Google Maps Debug:', {
  apiKey: process.env.GOOGLE_MAPS_API_KEY,
  package: 'com.project.development',
  platform: Platform.OS
});

Тестирование с минимальной конфигурацией

Создайте минимальное тестовое приложение с только основными компонентами для изоляции проблемы:

import React from 'react';
import { View, Text } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const TestMap = () => {
  return (
    <View style={{ flex: 1 }}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={{ flex: 1 }}
        apiKey="ВАШ_API_КЛЮЧ_ЗДЕСЬ"
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

export default TestMap;

Инструменты для проверки SHA-1 отпечатков пальцев

Используйте онлайн-инструменты или утилиты командной строки для проверки ваших SHA-1 отпечатков пальцев:

# Для macOS:
keytool -list -v -keystore ~/Library/Android/sdk/debug.keystore -alias androiddebugkey -storepass android -keypass android

# Для Linux/Windows:
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Сравните вывод с тем, что вы зарегистрировали в Google Cloud Console.

Заключение

Устранение сбоев авторизации Google Maps SDK в React Native требует систематической проверки нескольких ключевых компонентов:

1. Проверьте SHA-1 отпечатки пальцев как для отладочных, так и для релизных сборок в конфигурации вашего API-ключа в Google Cloud Console
2. Правильно ограничьте ваш API-ключ для конкретных Android приложений с правильными именами пакетов и отпечатками пальцев
3. Обеспечьте совместимость API-ключей Firebase и Google Maps при использовании обоих сервисов
4. Обновите react-native-maps до совместимой версии и проверьте все нативные зависимости
5. Протестируйте с минимальной конфигурацией, чтобы изолировать проблему от других компонентов

Наиболее распространенным решением является повторное создание вашего API-ключа с правильным SHA-1 отпечатком пальца и применение правильных ограничений. Если вы продолжаете испытывать проблемы, рассмотрите возможность создания минимального тестового проекта для проверки вашей конфигурации в изоляции перед добавлением сложности обратно в ваше основное приложение.

Помните, что требования API Google и библиотека react-native-maps продолжают развиваться, поэтому актуальность документации и лучших практик сообщества имеет решающее значение для долгосрочного успеха.

Источники

1. Stop Struggling with Maps in React Native — Here’s the Complete Guide - DEV Community
2. Firebase Authentication Blocked? Quick Fix for API Key Restriction Errors - CodeArchPedia
3. Google Maps Android SDK Documentation - Google Developers
4. react-native-maps GitHub Repository - Issues and Discussions