Как я интегрировал Google Sign-In в Flutter за 15 минут (Android + iOS)

Как я интегрировал Google Sign-In в Flutter за 15 минут (Android + iOS)

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Пропустите ненужное. Давайте реализуем то, что имеет значение — потому что я знаю, почему вы здесь.

Если вы читаете это, вы, скорее всего, в середине создания приложения Flutter и просто нуждаетесь в одном работающем сейчас: Google Sign-In.

Нет ненужного текста, нет бесконечных вступлений. Только чистая, надежная реализация, которая работает как для Android, так и для iOS в 2025 году. Как человек, который создает мобильные приложения уже 8+ лет, я проведу вас через именно то, что я использую в реальном производстве.

Давайте позволим вашим пользователям входить в систему.

Что вы узнаете

  • Как интегрировать Google Sign-In в ваше приложение Flutter (готово к 2025 году)
  • Настройка для платформ Android и iOS
  • Чистый интерфейс и управление состоянием аутентификации
  • Полный рабочий пример, который можно скопировать и использовать

Пошаговая реализация Google Sign-In в вашем приложении Flutter

Просто следуйте всем шагам, перечисленным ниже, и оснастите ваше приложение Google Sign-In.

1. Требуемые пакеты

Добавьте эти в ваш pubspec.yaml файл:

dependencies:
  google_sign_in: ^6.2.1
  firebase_auth: ^4.17.3
  firebase_core: ^3.3.2

Затем запустите:

flutter pub get

2. Настройка Firebase

Убедитесь, что ваше приложение подключено к Firebase. Вам нужно следовать официальному руководству по настройке только один раз:

Как инициализировать Firebase в вашем приложении Flutter (2025 руководство). Проверьте и инициализируйте проект Firebase сначала, если он еще не сделан, прежде чем продолжить.

Вам нужно зарегистрировать как версию для Android, так и версию для iOS вашего приложения.

3. Включить Google Sign-In в консоли Firebase

  1. Перейдите в консоль Firebase
  2. Откройте ваш проект → Аутентификация → Метод входа
  3. Включите Google под поставщиками входа
  4. Добавьте адрес электронной почты для поддержки
  5. Сохраните и все готово!

4. Настройка Android

В android/app/build.gradle убедитесь, что установлено следующее:

defaultConfig {
   ...
    minSdkVersion 21
}

Затем в android/app/src/main/AndroidManifest.xml добавьте:

<application>
   ...
    <meta-data
        android:name="com.google.android.gms.client_id"
        android:value="@string/default_web_client_id"/>
</application>

Также загрузите google-services.json из Firebase и поместите его внутрь android/app. Если вы инициализируете проект Firebase вручную, а не с помощью Firebase CLI.

5. Настройка iOS

  1. Загрузите GoogleService-Info.plist из Firebase (Пропустите этот шаг, если вы инициализируете проект Firebase с помощью Firebase CLI.)
  2. Поместите его в ios/Runner/ (Пропустите этот шаг также, если вы инициализируете проект Firebase с помощью Firebase CLI.)
  3. В ios/Runner/Info.plist добавьте:
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_CLIENT_ID</string>
    </array>
  </dict>
</array>

Убедитесь, что вы заменили YOUR_CLIENT_ID на фактическое значение из вашего файла plist.

Затем запустите:

cd ios
pod install

6. Пример кода на Dart

Вот полный рабочий пример Flutter с Google Sign-In:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Демо Google Sign-In',
      home: AuthScreen(),
    );
  }
}
class AuthScreen extends StatefulWidget {
  @override
  State<AuthScreen> createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen> {
  User? user;
  Future<void> signInWithGoogle() async {
    final googleUser = await GoogleSignIn().signIn();
    if (googleUser == null) return; // Пользователь отменил
    final googleAuth = await googleUser.authentication;
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    final userCredential = await FirebaseAuth.instance.signInWithCredential(credential);
    setState(() => user = userCredential.user);
  }
  void signOut() async {
    await GoogleSignIn().signOut();
    await FirebaseAuth.instance.signOut();
    setState(() => user = null);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Sign-In")),
      body: Center(
        child: user == null
           ? ElevatedButton(
                onPressed: signInWithGoogle,
                child: Text("Войти с помощью Google"),
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(user!.photoURL?? ""),
                    radius: 40,
                  ),
                  SizedBox(height: 10),
                  Text("Добро пожаловать, ${user!.displayName}"),
                  Text(user!.email?? ''),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: signOut,
                    child: Text("Выйти"),
                  ),
                ],
              ),
      ),
    );
  }
}

После настройки приложение позволяет пользователям войти с помощью Google и отображает их профиль, имя и электронную почту. Раотает на Android и iOS без проблем с платформой.

️ Почему нет долгого введения

Вы уже знаете, что такое Google Sign-In и почему вам это нужно. Итак, я сразу перешел к части, которая имеет значение — быстрое и безошибочное подключение.

Но если вы хотите глубокое погружение в сравнение Google Auth с входом по электронной почте и паролю, дайте мне знать — я напишу об этом.

️ Дополнительные советы

  • Всегда тестируйте на реальных устройствах. Эмуляторы часто терпят неудачу с Google Auth.
  • Если вы переключаетесь между аккаунтами, сначала вызовите GoogleSignIn().signOut().
  • Не забудьте добавить оба ключа SHA-1 и SHA-256 в консоли Firebase.

👋 Окончательные мысли

Google Sign-In в Flutter прост, но пропуск всего одного шага может вызвать головные боли. Этот гид предназначен как готовое решение для копирования и вставки, которому я был бы рад ранее.

Если это помогло, не стесняйтесь закладывать его, делиться с вашей командой или следить за более практическими уроками Flutter — без лишней информации, только решения.

Report Page