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

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 https //www back4app com un environnement de développement flutter installé sur votre machine suivez ce guide https //flutter dev/docs/get started/install 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 https //flutter dev/docs/get started/codelab 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 https //dashboard back4app com/ 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 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 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 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 // 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 // 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 https //developers facebook com/ 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 // 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 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 \<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 \<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 \<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 https //console cloud google com/ 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 // 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 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 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 \<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 \<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 \<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 https //developer apple com/ 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 // 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 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 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 https //www back4app com/docs guide du sdk parse flutter https //docs parseplatform org/flutter/guide/ documentation officielle de flutter https //flutter dev/docs facebook pour les développeurs https //developers facebook com/ plateforme d'identité google https //developers google com/identity documentation de connexion avec apple https //developer apple com/sign in with apple/ bon codage !