Di più
Guida completa all'autenticazione di terze parti in Flutter con Parse su Back4App

43min
Introduzione
Integrare metodi di autenticazione di terze parti come Facebook, Google e Apple nella tua app Flutter può migliorare significativamente l'esperienza dell'utente offrendo opzioni di accesso flessibili e convenienti. Parse Server, alimentato da Back4App, offre supporto integrato per questi fornitori di autenticazione. In questo tutorial, imparerai come implementare l'autenticazione di terze parti nella tua app Flutter utilizzando il Parse SDK su Back4App.
Alla fine di questo tutorial, avrai un'app Flutter con funzionalità di registrazione e accesso completamente funzionanti che includono:
Autenticazione standard con email/password utilizzando Parse.
Metodi di autenticazione di terze parti:
Facebook
Google
Apple
Requisiti
Per seguire questo tutorial, avrai bisogno dei seguenti:
Un account Back4App. Registrati per un account gratuito su Back4App.
Un ambiente di sviluppo Flutter installato sul tuo computer. Segui questa guida se hai bisogno di aiuto per configurare Flutter.
Conoscenze di base di Flutter e Dart. Se sei nuovo, dai un'occhiata a introduzione a Flutter.
Account sviluppatore per Facebook, Google e Apple (richiesti per impostare metodi di accesso di terze parti).
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Passo 1 – Configurare il tuo backend Back4App
1.1. Crea un progetto Back4App
Accedi al tuo dashboard Back4App.
Clicca su "Crea nuova App".
Inserisci un nome per la tua applicazione, ad esempio, "AuthDemo", e clicca "Crea".
Una volta creato il progetto, vai su Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID Applicazione e Chiave Client. Avrai bisogno di questi valori per inizializzare Parse nella tua app Flutter.
1.2. Abilita i fornitori di autenticazione
Nel tuo dashboard Back4App, vai su Impostazioni Server > Autenticazione.
Abilita i metodi di autenticazione che intendi utilizzare:
Facebook
Google
Apple
Per ogni fornitore, dovrai inserire credenziali specifiche (ID App, ID Client, Segreti, ecc.), che saranno configurate nei prossimi passaggi.
Passo 2 – Installare e configurare Parse SDK in Flutter
2.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e crea un nuovo progetto Flutter:
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze per Parse e opzioni di accesso di terze parti:
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
﻿
Esegui flutter pub get per installare le dipendenze.
2.3. Inizializza Parse in main.dart
Nel file lib/main.dart importa il SDK di Parse e inizializzalo nella funzione 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(),
    );
  }
}
﻿
Sostituisci 'YOUR_APP_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali effettive di Back4App dal Passo 1.
Passo 3 – Implementazione dell'Autenticazione Standard
3.1. Crea il Servizio di Autenticazione
Crea una nuova directory chiamata services sotto lib e aggiungi un file chiamato auth_service.dart. Questo servizio gestirà la registrazione e il login degli utenti utilizzando 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. Crea la schermata di autenticazione
Crea una nuova directory chiamata screens sotto lib e aggiungi un file chiamato auth_screen.dart. Questa schermata fornirà l'interfaccia utente per l'autenticazione standard.
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
            ],
          ),
        ),
      ),
    );
  }
}
﻿
Passaggio 4 – Integrazione dell'Autenticazione Facebook
4.1. Configurare l'Account Sviluppatore di Facebook
Crea un'app Facebook:
Vai a Facebook per sviluppatori e accedi.
Clicca su "Le mie app" e poi "Crea app".
Seleziona "Consumatore" come tipo di app e fai clic su "Avanti".
Compila il Nome dell'App e Email di Contatto, poi clicca "Crea App".
Aggiungi il login di Facebook alla tua app:
Nel tuo cruscotto dell'app, vai a "Aggiungi un prodotto" e seleziona "Accesso a Facebook".
Scegli "Android" e/o "iOS" a seconda della tua piattaforma di destinazione.
Segui i passaggi di configurazione forniti da Facebook. Avrai bisogno del Bundle Identifier per iOS e del Package Name per Android.
Configura l'URI di reindirizzamento OAuth:
Imposta il OAuth Redirect URI su: https://parseapi.back4app.com/auth/facebook/callback
Ottieni l'ID dell'app e il segreto dell'app:
Nella dashboard della tua app, vai a "Impostazioni" > "Base".
Annota il App ID e App Secret.
Aggiungi l'ID dell'app e il segreto a Back4App:
Nel dashboard di Back4App, vai a Impostazioni del server > Autenticazione.
Sotto Facebook, inserisci il tuo ID App e Segreto App.
4.2. Aggiornare auth_service.dart con Facebook Login
Aggiungi il seguente codice per gestire l'autenticazione di 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. Aggiungi il pulsante di accesso a Facebook a auth_screen.dart
Aggiungi il seguente pulsante alla tua interfaccia utente:
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. Configurazioni specifiche per la piattaforma
Android
Aggiorna il tuo 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>
﻿
Aggiungi il tuo ID App di 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
Aggiorna il tuo Info.plist file:
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 – Integrazione dell'autenticazione Google
5.1. Configura l'account sviluppatore Google
Crea un progetto nella Google Cloud Console:
Vai a Google Cloud Console e crea un nuovo progetto.
Configura la schermata di consenso OAuth:
Naviga a APIs & Services > Schermata di consenso OAuth.
Configura la schermata di consenso con gli ambiti necessari.
Crea ID client OAuth:
Vai a Credenziali > Crea credenziali > ID client OAuth.
Scegli Applicazione web.
Aggiungi URI di reindirizzamento autorizzati: https://parseapi.back4app.com/auth/google/callback
Annota il Client ID e il Client Secret.
Aggiungi Client ID e Secret a Back4App:
Nel dashboard di Back4App, sotto Impostazioni server > Autenticazione, inserisci il tuo Client ID e il Client Secret per Google.
5.2. Aggiorna auth_service.dart con Google Login
Aggiungi il seguente codice per gestire l'autenticazione di 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. Aggiungi il pulsante di accesso Google a auth_screen.dart
Aggiungi il seguente pulsante alla tua interfaccia utente:
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. Configurazioni specifiche della piattaforma
Android
Aggiungi quanto segue al tuo android/app/build.gradle file:
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
}
﻿
Aggiungi il tuo Google Client ID 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>
﻿
Aggiorna il tuo 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
Aggiungi l'ID client invertito al tuo 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 – Integrazione dell'autenticazione Apple
6.1. Configura l'account Apple Developer
Registrati per la tua app:
Accedi a Apple Developer Portal e registrati per la tua app.
Abilita l'accesso con Apple:
Sotto Identificatori, seleziona la tua app e abilita l'accesso con Apple.
Crea un ID Servizi:
Crea un ID Servizi per la tua app.
Imposta il URI di reindirizzamento su: https://parseapi.back4app.com/auth/apple/callback
Genera un Client Secret:
Crea una chiave privata per l'accesso con Apple.
Usa questa chiave per generare un Client Secret.
Aggiungi credenziali a Back4App:
Nel dashboard di Back4App, sotto Impostazioni del server > Autenticazione, inserisci il tuo ID Servizi e Client Secret per Apple.
6.2. Aggiorna auth_service.dart con l'accesso Apple
Aggiungi il seguente codice per gestire l'autenticazione 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. Aggiungi il pulsante di accesso Apple a auth_screen.dart
Aggiungi il seguente pulsante alla tua interfaccia utente:
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. Configurazioni specifiche per la piattaforma
Solo iOS
In Xcode, apri il tuo progetto e vai a Signing & Capabilities.
Clicca su "+ Capability" e aggiungi "Accedi con Apple".
Assicurati che il tuo Bundle Identifier corrisponda a quello registrato nel Portale Sviluppatori Apple.
Passo 7 – Testare la tua applicazione
Ora che hai configurato tutti i metodi di autenticazione, puoi eseguire la tua app e testare ogni opzione di accesso.
7.1. Esegui l'app
Bash
flutter run
flutter run
﻿
Per iOS, devi eseguire l'app su un dispositivo reale per testare Accedi con Apple.
Per Android, puoi utilizzare un emulatore o un dispositivo fisico.
7.2. Testa l'autenticazione standard
Inserisci un nome utente, un'email e una password.
Tocca "Registrati" per creare un nuovo utente.
Tocca "Accedi" per accedere con le credenziali create.
7.3. Testa l'accesso con Facebook
Tocca "Accedi con Facebook".
Comparirà una schermata di accesso a Facebook.
Accedi con le tue credenziali di Facebook.
7.4. Test di accesso a Google
Tocca "Accedi con Google".
Comparirà una schermata di accesso a Google.
Accedi con il tuo account Google.
7.5. Test di accesso ad Apple (solo iOS)
Tocca "Accedi con Apple".
Comparirà il prompt di accesso ad Apple.
Autenticati utilizzando il tuo ID Apple.
Conclusione
In questo tutorial, hai implementato con successo l'autenticazione standard con email/password e integrato metodi di autenticazione di terze parti (Facebook, Google e Apple) nella tua app Flutter utilizzando il Parse SDK su Back4App. Questa configurazione migliora l'esperienza dell'utente offrendo più opzioni di accesso convenienti.
Prossimi Passi
Profili Utente: Estendi l'app per gestire i profili utente, consentendo agli utenti di aggiornare le proprie informazioni.
Funzionalità di Logout: Implementa funzionalità di logout per ciascun metodo di autenticazione.
Sicurezza dei Dati: Proteggi i tuoi dati implementando il controllo degli accessi basato sui ruoli con Parse ACL e Ruoli.
Gestione degli Errori: Migliora la gestione degli errori per fornire feedback più dettagliati agli utenti.
Miglioramenti UI: Personalizza l'interfaccia utente per adattarla al branding della tua app e migliorare l'esperienza dell'utente.
Risorse Aggiuntive
﻿Documentazione di Back4App﻿
﻿Guida al Parse Flutter SDK﻿
﻿Documentazione Ufficiale di Flutter﻿
﻿Facebook per Sviluppatori﻿
﻿Google Identity Platform﻿
﻿Documentazione per l'accesso con Apple﻿
Buon Codice!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come visualizzare i dati in Flutter con fl_chart e Back4App
AVANTI IL PROSSIMO
Come creare widget per la schermata principale in Flutter con HomeWidget e Back4App?