Plus
Guide complet de l'authentification tierce en Flutter avec Parse sur Back4App

43min
Introduction
Intégrer des méthodes d'authentification tierces comme Facebook, Google et Apple dans votre application Flutter peut considérablement améliorer l'expérience utilisateur en offrant des options de connexion flexibles et pratiques. Parse Server, propulsé par Back4App, offre un support intégré pour ces fournisseurs d'authentification. Dans ce tutoriel, vous apprendrez comment mettre en œuvre l'authentification tierce dans votre application Flutter en utilisant le SDK Parse sur Back4App.
À la fin de ce tutoriel, vous aurez une application Flutter avec des fonctionnalités d'inscription et de connexion entièrement fonctionnelles qui incluent :
Authentification standard par e-mail/mot de passe utilisant Parse.
Méthodes d'authentification tierces :
Facebook
Google
Apple
Prérequis
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Un environnement de développement Flutter installé sur votre machine. Suivez ce guide si vous avez besoin d'aide pour configurer Flutter.
Connaissances de base en Flutter et Dart. Si vous êtes nouveau, consultez l'introduction de Flutter.
Comptes développeur pour Facebook, Google et Apple (nécessaires pour configurer les méthodes de connexion tierces).
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Étape 1 – Configuration de votre backend Back4App
1.1. Créer un projet Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "AuthDemo", et cliquez sur "Créer".
Une fois le projet créé, accédez à Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et Clé client. Vous aurez besoin de ces valeurs pour initialiser Parse dans votre application Flutter.
1.2. Activer les fournisseurs d'authentification
Dans votre tableau de bord Back4App, accédez à Paramètres du serveur > Authentification.
Activez les méthodes d'authentification que vous souhaitez utiliser :
Facebook
Google
Apple
Pour chaque fournisseur, vous devrez saisir des identifiants spécifiques (ID d'application, ID client, secrets, etc.), qui seront configurés dans les étapes à venir.
Étape 2 – Installation et configuration du SDK Parse dans Flutter
2.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et créez un nouveau projet Flutter :
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes pour Parse et les options de connexion tierces :
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
﻿
Exécutez flutter pub get pour installer les dépendances.
2.3. Initialiser Parse dans main.dart
Dans le fichier lib/main.dart , importez le SDK Parse et initialisez-le dans la fonction 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(),
    );
  }
}
﻿
Remplacez 'VOTRE_ID_APP' et 'VOTRE_CLE_CLIENT' par vos véritables identifiants Back4App de l'étape 1.
Étape 3 – Mise en œuvre de l'authentification standard
3.1. Créer le service d'authentification
Créez un nouveau répertoire appelé services sous lib et ajoutez un fichier nommé auth_service.dart. Ce service gérera l'inscription et la connexion des utilisateurs en utilisant 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. Créez l'écran d'authentification
Créez un nouveau répertoire appelé screens sous lib et ajoutez un fichier nommé auth_screen.dart. Cet écran fournira l'interface utilisateur pour l'authentification 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
            ],
          ),
        ),
      ),
    );
  }
}
﻿
Étape 4 – Intégration de l’authentification Facebook
4.1. Configurer le compte développeur Facebook
Créer une application Facebook :
Allez à Facebook pour les développeurs et connectez-vous.
Cliquez sur "Mes applications" puis "Créer une application". 
Sélectionnez "Consommateur" comme type d'application et cliquez sur "Suivant".
Remplissez le Nom de l'application et Email de contact, puis cliquez sur "Créer l'application".
Ajoutez la connexion Facebook à votre application :
Dans le tableau de bord de votre application, naviguez vers "Ajouter un produit" et sélectionnez "Connexion Facebook".
Choisissez "Android" et/ou "iOS" en fonction de votre plateforme cible.
Suivez les étapes de configuration fournies par Facebook. Vous aurez besoin de l'Identifiant de l'Application pour iOS et du Nom du Package pour Android.
Configurer l'URI de redirection OAuth :
Définissez le URI de redirection OAuth à : https://parseapi.back4app.com/auth/facebook/callback
Obtenez l'ID de l'application et le secret de l'application :
Dans le tableau de bord de votre application, allez à "Paramètres" > "De base".
Notez le ID de l'application et Secret de l'application.
Ajouter l'ID de l'application et le secret à Back4App :
Dans le tableau de bord Back4App, naviguez vers Paramètres du serveur > Authentification.
Sous Facebook, saisissez votre ID d'application et Secret d'application.
4.2. Mettre à jour auth_service.dart avec Facebook Login
Ajoutez le code suivant pour gérer l'authentification 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. Ajouter le bouton de connexion Facebook à auth_screen.dart
Ajoutez le bouton suivant à votre interface utilisateur :
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. Configurations spécifiques à la plateforme
Android
Mettez à jour votre 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>
﻿
Ajoutez votre ID d'application Facebook à 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
Mettez à jour votre Info.plist fichier :
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>
﻿
Étape 5 – Intégration de l'authentification Google
5.1. Configurer le compte développeur Google
Créer un projet dans Google Cloud Console :
Allez à Google Cloud Console et créez un nouveau projet.
Configurer l'écran de consentement OAuth :
Naviguez vers APIs & Services > Écran de consentement OAuth.
Configurez l'écran de consentement avec les portées nécessaires.
Créer un ID client OAuth :
Allez à Identifiants > Créer des identifiants > ID client OAuth.
Choisissez Application Web.
Ajoutez URI de redirection autorisés: https://parseapi.back4app.com/auth/google/callback
Notez le ID client et Secret client.
Ajoutez l'ID client et le secret à Back4App :
Dans le tableau de bord Back4App, sous Paramètres du serveur > Authentification, saisissez votre ID client et Secret client pour Google.
5.2. Mettre à jour auth_service.dart avec Google Login
Ajoutez le code suivant pour gérer l'authentification 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. Ajouter le bouton de connexion Google à auth_screen.dart
Ajoutez le bouton suivant à votre interface utilisateur :
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. Configurations spécifiques à la plateforme
Android
Ajoutez ce qui suit à votre android/app/build.gradle fichier:
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
}
﻿
Ajoutez votre ID client Google à 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>
﻿
Mettez à jour votre 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
Ajoutez l'ID client inversé à votre 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>
﻿
Étape 6 – Intégration de l'authentification Apple
6.1. Configurer un compte développeur Apple
Enregistrez votre application :
Connectez-vous à Apple Developer Portal et enregistrez votre application.
Activer l'authentification avec Apple :
Sous Identifiants, sélectionnez votre application et activez l'authentification avec Apple.
Créer un identifiant de service :
Créez un identifiant de service pour votre application.
Définissez l'URI de redirection à : https://parseapi.back4app.com/auth/apple/callback
Générer un secret client :
Créez une clé privée pour l'authentification avec Apple.
Utilisez cette clé pour générer un secret client.
Ajouter des identifiants à Back4App :
Dans le tableau de bord de Back4App, sous Paramètres du serveur > Authentification, saisissez votre identifiant de service et votre secret client pour Apple.
6.2. Mettre à jour auth_service.dart avec l'authentification Apple
Ajoutez le code suivant pour gérer l'authentification 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. Ajoutez le bouton de connexion Apple à auth_screen.dart
Ajoutez le bouton suivant à votre interface utilisateur :
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. Configurations spécifiques à la plateforme
iOS uniquement
Dans Xcode, ouvrez votre projet et allez à Signing & Capabilities.
Cliquez sur "+ Capability" et ajoutez "Sign in with Apple".
Assurez-vous que votre Bundle Identifier correspond à celui enregistré sur le portail des développeurs Apple.
Étape 7 – Tester votre application
Maintenant que vous avez configuré tous les méthodes d'authentification, vous pouvez exécuter votre application et tester chaque option de connexion.
7.1. Exécuter l'application
Bash
flutter run
flutter run
﻿
Pour iOS, vous devez exécuter l'application sur un appareil réel pour tester la connexion avec Apple.
Pour Android, vous pouvez utiliser un émulateur ou un appareil physique.
7.2. Tester l'authentification standard
Entrez un nom d'utilisateur, un e-mail et un mot de passe.
Appuyez sur "S'inscrire" pour créer un nouvel utilisateur.
Appuyez sur "Connexion" pour vous connecter avec les identifiants créés.
7.3. Tester la connexion Facebook
Appuyez sur "Se connecter avec Facebook".
Un écran de connexion Facebook apparaîtra.
Connectez-vous avec vos identifiants Facebook.
7.4. Tester la connexion Google
Appuyez sur "Se connecter avec Google".
Un écran de connexion Google apparaîtra.
Connectez-vous avec votre compte Google.
7.5. Tester la connexion Apple (iOS uniquement)
Appuyez sur "Se connecter avec Apple".
L'invite de connexion Apple apparaîtra.
Authentifiez-vous avec votre identifiant Apple.
Conclusion
Dans ce tutoriel, vous avez réussi à mettre en œuvre l'authentification standard par e-mail/mot de passe et à intégrer des méthodes d'authentification tierces (Facebook, Google et Apple) dans votre application Flutter en utilisant le SDK Parse sur Back4App. Cette configuration améliore l'expérience utilisateur en offrant plusieurs options de connexion pratiques.
Prochaines étapes
Profils d'utilisateur : Étendez l'application pour gérer les profils d'utilisateur, permettant aux utilisateurs de mettre à jour leurs informations.
Fonctionnalité de déconnexion : Implémentez des fonctionnalités de déconnexion pour chaque méthode d'authentification.
Sécurité des données : Sécurisez vos données en mettant en œuvre un contrôle d'accès basé sur les rôles avec les ACL et les rôles de Parse.
Gestion des erreurs : Améliorez la gestion des erreurs pour fournir des retours plus détaillés aux utilisateurs.
Améliorations de l'interface utilisateur : Personnalisez l'interface utilisateur pour correspondre à la marque de votre application et améliorer l'expérience utilisateur.
Ressources supplémentaires
﻿Documentation Back4App﻿
﻿Guide du SDK Parse Flutter﻿
﻿Documentation officielle de Flutter﻿
﻿Facebook pour les développeurs﻿
﻿Plateforme d'identité Google﻿
﻿Documentation de Connexion avec Apple﻿
Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment visualiser des données dans Flutter avec fl_chart et Back4App
Comment créer des widgets d'écran d'accueil dans Flutter avec HomeWidget et Back4App