Guia Completo para Autenticação de Terceiros no Flutter com Parse no Back4App

43min
Introdução
Integrar métodos de autenticação de terceiros como Facebook, Google e Apple em seu aplicativo Flutter pode melhorar significativamente a experiência do usuário, oferecendo opções de login flexíveis e convenientes. O Parse Server, alimentado pelo Back4App, oferece suporte integrado para esses provedores de autenticação. Neste tutorial, você aprenderá como implementar a autenticação de terceiros em seu aplicativo Flutter usando o SDK do Parse no Back4App.
Ao final deste tutorial, você terá um aplicativo Flutter com recursos de cadastro e login totalmente funcionais que incluem:
Autenticação padrão por e-mail/senha usando o Parse.
Métodos de autenticação de terceiros:
Facebook
Google
Apple
Pré-requisitos
Para acompanhar este tutorial, você precisará do seguinte:
Uma conta Back4App. Inscreva-se para uma conta gratuita em Back4App.
Um ambiente de desenvolvimento Flutter instalado em sua máquina. Siga este guia se precisar de ajuda para configurar o Flutter.
Conhecimento básico de Flutter e Dart. Se você é novo, confira a introdução do Flutter.
Contas de desenvolvedor para Facebook, Google e Apple (necessárias para configurar métodos de login de terceiros).
Um IDE ou editor de texto como Visual Studio Code ou Android Studio.
Passo 1 – Configurando seu Backend Back4App
1.1. Criar um Projeto Back4App
Faça login no seu painel do Back4App.
Clique em "Criar novo App".
Digite um nome para sua aplicação, por exemplo, "AuthDemo", e clique em "Criar".
Uma vez que o projeto é criado, navegue até Configurações do App > Segurança e Chaves.
Anote seu ID da Aplicação e Chave do Cliente. Você precisará desses valores para inicializar o Parse em seu aplicativo Flutter.
1.2. Habilitar Provedores de Autenticação
No seu painel do Back4App, navegue até Configurações do Servidor > Autenticação.
Habilite os métodos de autenticação que você pretende usar:
Facebook
Google
Apple
Para cada provedor, você precisará inserir credenciais específicas (IDs de App, IDs de Cliente, Segredos, etc.), que serão configuradas nos próximos passos.
Passo 2 – Instalando e Configurando o SDK Parse no Flutter
2.1. Criar um Novo Projeto Flutter
Abra seu terminal e crie um novo projeto Flutter:
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. Adicionar Dependências
Abra pubspec.yaml e adicione as seguintes dependências para Parse e opções de login de terceiros:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
﻿
Execute flutter pub get para instalar as dependências.
2.3. Inicializar o Parse em main.dart
No arquivo lib/main.dart , importe o SDK do Parse e inicialize-o na função main :
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
﻿
Substitua 'YOUR_APP_ID' e 'YOUR_CLIENT_KEY' pelas suas credenciais reais do Back4App da Etapa 1.
Etapa 3 – Implementando Autenticação Padrão
3.1. Criar o Serviço de Autenticação
Crie um novo diretório chamado services sob lib e adicione um arquivo chamado auth_service.dart. Este serviço irá gerenciar o registro e login de usuários usando o Parse.
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
3.2. Crie a Tela de Autenticação
Crie um novo diretório chamado screens sob lib e adicione um arquivo chamado auth_screen.dart. Esta tela fornecerá a interface do usuário para autenticação padrão.
Dart
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
﻿
Passo 4 – Integrando a Autenticação do Facebook
4.1. Configurar Conta de Desenvolvedor do Facebook
Criar um aplicativo do Facebook:
Vá para Facebook para Desenvolvedores e faça login.
Clique em "Meus Aplicativos" e então "Criar Aplicativo".
Selecione "Consumidor" como o tipo de aplicativo e clique em "Próximo".
Preencha o Nome do App e Email de Contato, então clique em "Criar App".
Adicione o Login do Facebook ao Seu App:
No painel do seu aplicativo, navegue até "Adicionar um Produto" e selecione "Login do Facebook".
Escolha "Android" e/ou "iOS" dependendo da sua plataforma alvo.
Siga os passos de configuração fornecidos pelo Facebook. Você precisará do Identificador do Pacote para iOS e Nome do Pacote para Android.
Configurar URI de Redirecionamento OAuth:
Defina o OAuth Redirect URI para: https://parseapi.back4app.com/auth/facebook/callback
Obtenha o ID do aplicativo e o segredo do aplicativo:
No painel do seu aplicativo, vá para "Configurações" > "Básico".
Anote o App ID e App Secret. 
Adicione o ID do App e o Segredo ao Back4App:
No painel do Back4App, navegue até Configurações do Servidor > Autenticação.
Sob Facebook, insira seu ID do App e Segredo do App.
4.2. Atualizar auth_service.dart com Login do Facebook
Adicione o seguinte código para lidar com a autenticação do Facebook:
Dart
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
﻿
4.3. Adicione o Botão de Login do Facebook ao auth_screen.dart
Adicione o seguinte botão à sua interface:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
﻿
4.4. Configurações Específicas da Plataforma
Android
Atualize seu android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
﻿
Adicione seu ID do App do Facebook a android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
﻿
iOS
Atualize seu Info.plist arquivo:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
﻿
Passo 5 – Integrando a Autenticação do Google
5.1. Configurar Conta de Desenvolvedor do Google
Criar um Projeto no Google Cloud Console:
Vá para Google Cloud Console e crie um novo projeto.
Configurar a Tela de Consentimento do OAuth:
Navegue até APIs & Serviços > Tela de consentimento do OAuth.
Configure a tela de consentimento com os escopos necessários.
Criar ID do Cliente OAuth:
Vá para Credenciais > Criar Credenciais > ID do cliente OAuth.
Escolha Aplicativo da Web.
Adicione URIs de redirecionamento autorizados: https://parseapi.back4app.com/auth/google/callback
Anote o ID do Cliente e Segredo do Cliente.
Adicione o ID e o Segredo do Cliente ao Back4App:
No painel do Back4App, em Configurações do Servidor > Autenticação, insira seu ID do Cliente e Segredo do Cliente para o Google.
5.2. Atualizar auth_service.dart com Login do Google
Adicione o seguinte código para lidar com a autenticação do Google:
Dart
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
5.3. Adicionar Botão de Login do Google a auth_screen.dart
Adicione o seguinte botão à sua interface:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
﻿
5.4. Configurações Específicas da Plataforma
Android
Adicione o seguinte ao seu android/app/build.gradle arquivo:
Text
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
﻿
Adicione seu ID de Cliente do Google a android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
﻿
Atualize seu android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
﻿
iOS
Adicione o ID do cliente revertido ao seu Info.plist:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
﻿
Passo 6 – Integrando a Autenticação da Apple
6.1. Configurar Conta de Desenvolvedor da Apple
Registrar seu aplicativo:
Faça login em Portal de Desenvolvedores da Apple e registre seu aplicativo.
Ativar Login com a Apple:
Em Identificadores, selecione seu aplicativo e ative Login com a Apple.
Criar um ID de Serviços:
Crie um ID de Serviços para seu aplicativo.
Defina a URI de Redirecionamento para: https://parseapi.back4app.com/auth/apple/callback
Gerar um Client Secret:
Crie uma chave privada para Login com a Apple.
Use esta chave para gerar um Client Secret.
Adicionar Credenciais ao Back4App:
No painel do Back4App, em Configurações do Servidor > Autenticação, insira seu ID de Serviços e Client Secret para a Apple.
6.2. Atualizar auth_service.dart com Login da Apple
Adicione o seguinte código para lidar com a autenticação da Apple:
Dart
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
6.3. Adicione o botão de login da Apple em auth_screen.dart
Adicione o seguinte botão à sua interface:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
﻿
6.4. Configurações Específicas da Plataforma
Apenas iOS
No Xcode, abra seu projeto e vá para Assinatura e Capacidades.
Clique em "+ Capacidade" e adicione "Login com Apple".
Certifique-se de que seu Identificador do Pacote corresponda ao registrado no Portal de Desenvolvedores da Apple.
Passo 7 – Testando Seu Aplicativo
Agora que você configurou todos os métodos de autenticação, pode executar seu aplicativo e testar cada opção de login.
7.1. Execute o Aplicativo
Bash
flutter run
flutter run
﻿
Para iOS, você deve executar o aplicativo em um dispositivo real para testar o Login com Apple.
Para Android, você pode usar um emulador ou um dispositivo físico.
7.2. Teste a Autenticação Padrão
Digite um nome de usuário, e-mail e senha.
Toque em "Cadastrar" para criar um novo usuário.
Toque em "Login" para entrar com as credenciais criadas.
7.3. Teste o Login com Facebook
Toque "Login com Facebook".
Uma tela de login do Facebook aparecerá.
Faça login com suas credenciais do Facebook.
7.4. Testar Login com Google
Toque "Login com Google".
Uma tela de login do Google aparecerá.
Faça login com sua conta do Google.
7.5. Testar Login com Apple (Apenas iOS)
Toque "Login com Apple".
O prompt de login da Apple aparecerá.
Autentique-se usando seu ID Apple.
Conclusão
Neste tutorial, você implementou com sucesso a autenticação padrão de email/senha e integrou métodos de autenticação de terceiros (Facebook, Google e Apple) em seu aplicativo Flutter usando o Parse SDK no Back4App. Essa configuração melhora a experiência do usuário ao oferecer várias opções de login convenientes.
Próximos Passos
Perfis de Usuário: Amplie o aplicativo para gerenciar perfis de usuário, permitindo que os usuários atualizem suas informações.
Funcionalidade de Logout: Implemente recursos de logout para cada método de autenticação.
Segurança de Dados: Proteja seus dados implementando controle de acesso baseado em funções com ACLs e Funções do Parse.
Tratamento de Erros: Melhore o tratamento de erros para fornecer feedback mais detalhado aos usuários.
Melhorias na UI: Personalize a UI para combinar com a marca do seu aplicativo e melhorar a experiência do usuário.
Recursos Adicionais
﻿Documentação do Back4App﻿
﻿Guia do Parse Flutter SDK﻿
﻿Documentação Oficial do Flutter﻿
﻿Facebook para Desenvolvedores﻿
﻿Plataforma de Identidade do Google﻿
﻿Documentação de Login com Apple﻿
Feliz Codificação!
Como Visualizar Dados no Flutter com fl_chart e Back4App
Como Criar Widgets na Tela Inicial em Flutter com HomeWidget e Back4App