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

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 https //www back4app com un ambiente di sviluppo flutter installato sul tuo computer segui questa guida https //flutter dev/docs/get started/install 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 https //flutter dev/docs/get started/codelab 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 https //dashboard back4app com/ 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 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 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 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 // 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 // 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 https //developers facebook com/ 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 // 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 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 \<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 \<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 \<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 https //console cloud google com/ 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 // 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 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 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 \<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 \<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 \<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 https //developer apple com/ 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 // 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 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 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 https //www back4app com/docs guida al parse flutter sdk https //docs parseplatform org/flutter/guide/ documentazione ufficiale di flutter https //flutter dev/docs facebook per sviluppatori https //developers facebook com/ google identity platform https //developers google com/identity documentazione per l'accesso con apple https //developer apple com/sign in with apple/ buon codice!