Vollständiger Leitfaden zur Authentifizierung von Drittanbietern in Flutter mit Parse auf Back4App

einführung die integration von authentifizierungsmethoden von drittanbietern wie facebook, google und apple in ihre flutter app kann das benutzererlebnis erheblich verbessern, indem flexible und bequeme anmeldeoptionen bereitgestellt werden parse server, betrieben von back4app, bietet integrierte unterstützung für diese authentifizierungsanbieter in diesem tutorial lernen sie, wie sie die authentifizierung von drittanbietern in ihrer flutter app mit dem parse sdk auf back4app implementieren am ende dieses tutorials haben sie eine flutter app mit voll funktionsfähigen anmelde und registrierungsfunktionen, die folgendes umfassen standard e mail/passwort authentifizierung mit parse authentifizierungsmethoden von drittanbietern facebook google apple voraussetzungen um diesem tutorial zu folgen, benötigen sie folgendes ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com an eine flutter entwicklungsumgebung auf ihrem computer installiert folgen sie diesem leitfaden https //flutter dev/docs/get started/install , wenn sie hilfe bei der einrichtung von flutter benötigen grundkenntnisse in flutter und dart wenn sie neu sind, schauen sie sich flutters einführung https //flutter dev/docs/get started/codelab an entwicklerkonten für facebook, google und apple (erforderlich für die einrichtung von anmeldemethoden von drittanbietern) eine ide oder einen texteditor wie visual studio code oder android studio schritt 1 – einrichten ihres back4app backends 1 1 erstellen eines back4app projekts melden sie sich bei ihrem back4app dashboard https //dashboard back4app com/ an klicken sie auf "neue app erstellen" geben sie einen namen für ihre anwendung ein, z b "authdemo" , und klicken sie auf "erstellen" sobald das projekt erstellt ist, navigieren sie zu app einstellungen > sicherheit & schlüssel notieren sie sich ihre anwendungs id und client schlüssel sie benötigen diese werte, um parse in ihrer flutter app zu initialisieren 1 2 aktivieren von authentifizierungsanbietern navigieren sie in ihrem back4app dashboard zu servereinstellungen > authentifizierung aktivieren sie die authentifizierungsmethoden, die sie verwenden möchten facebook google apple für jeden anbieter müssen sie spezifische anmeldeinformationen (app ids, client ids, geheimnisse usw ) eingeben, die in den kommenden schritten eingerichtet werden schritt 2 – installieren und einrichten des parse sdk in flutter 2 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und erstellen sie ein neues flutter projekt flutter create auth demo cd auth demo 2 2 abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten für parse und drittanbieter anmeldeoptionen hinzu 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 führen sie flutter pub get aus, um die abhängigkeiten zu installieren 2 3 parse in main dart importieren sie im lib/main dart datei das parse sdk und initialisieren sie es in der main funktion 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(), ); } } ersetzen sie 'your app id' und 'your client key' durch ihre tatsächlichen back4app anmeldeinformationen aus schritt 1 schritt 3 – implementierung der standardauthentifizierung 3 1 erstellen sie den authentifizierungsdienst erstellen sie ein neues verzeichnis namens services unter lib und fügen sie eine datei mit dem namen auth service dart dieser dienst wird die benutzerregistrierung und anmeldung mit parse verwalten // 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 erstellen sie den authentifizierungsbildschirm erstellen sie ein neues verzeichnis namens screens unter lib und fügen sie eine datei mit dem namen auth screen dart dieser bildschirm bietet die benutzeroberfläche für die standardauthentifizierung // 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 ], ), ), ), ); } } schritt 4 – integration der facebook authentifizierung 4 1 facebook entwicklerkonto einrichten erstellen sie eine facebook app gehe zu facebook für entwickler https //developers facebook com/ und melde dich an klicken sie auf "meine apps" und dann "app erstellen" wählen sie "verbraucher" als den app typ und klicken sie "weiter" füllen sie das app name und kontakt e mail , dann klicken sie auf "app erstellen" fügen sie facebook login zu ihrer app hinzu navigieren sie in ihrem app dashboard zu "produkt hinzufügen" und wählen sie "facebook login" aus wählen sie "android" und/oder "ios" je nach ihrer zielplattform befolgen sie die von facebook bereitgestellten einrichtungsschritte sie benötigen die bundle id ihrer app für ios und paketname für android oauth redirect uri konfigurieren setzen sie die oauth umleitungs uri auf https //parseapi back4app com/auth/facebook/callback app id und app geheimnis erhalten gehe in deinem app dashboard zu "einstellungen" > "basis" notieren sie sich die app id und app secret app id und geheimnis zu back4app hinzufügen im back4app dashboard navigieren sie zu servereinstellungen > authentifizierung unter facebook , geben sie ihre app id und app geheimnis ein 4 2 aktualisierung auth service dart mit facebook login fügen sie den folgenden code hinzu, um die facebook authentifizierung zu handhaben // 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 fügen sie die facebook anmeldeschaltfläche zu auth screen dart fügen sie die folgende schaltfläche zu ihrer benutzeroberfläche hinzu 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 plattform spezifische konfigurationen android aktualisieren sie ihre 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> fügen sie ihre facebook app id zu 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 aktualisieren sie ihre info plist datei \<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> schritt 5 – integration der google authentifizierung 5 1 google entwicklerkonto einrichten ein projekt in der google cloud console erstellen gehe zu google cloud console https //console cloud google com/ und erstelle ein neues projekt oauth zustimmungsbildschirm konfigurieren navigiere zu apis & dienste > oauth zustimmungsbildschirm richte den zustimmungsbildschirm mit den erforderlichen berechtigungen ein oauth client id erstellen gehe zu anmeldeinformationen > anmeldeinformationen erstellen > oauth client id wähle webanwendung füge autorisierte umleitungs uris https //parseapi back4app com/auth/google/callback notiere die client id und client secret füge die client id und das secret zu back4app hinzu im back4app dashboard, unter servereinstellungen > authentifizierung , gib deine client id und client secret für google ein 5 2 aktualisiere auth service dart mit google login fügen sie den folgenden code hinzu, um die google authentifizierung zu handhaben // 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 fügen sie die google anmeldeschaltfläche zu auth screen dart fügen sie die folgende schaltfläche zu ihrer benutzeroberfläche hinzu 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 plattform spezifische konfigurationen android fügen sie folgendes zu ihrer android/app/build gradle datei hinzu dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } fügen sie ihre google client id zu 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> zusätzliche informationen aktualisieren sie ihre 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 fügen sie die umgekehrte client id zu ihrer info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> schritt 6 – integration der apple authentifizierung 6 1 apple developer konto einrichten registriere deine app melde dich an bei apple developer portal https //developer apple com/ und registriere deine app aktiviere die anmeldung mit apple unter identifiers , wähle deine app aus und aktiviere die anmeldung mit apple erstelle eine services id erstelle eine services id für deine app setze die redirect uri auf https //parseapi back4app com/auth/apple/callback generiere ein client secret erstelle einen sign in with apple privaten schlüssel verwende diesen schlüssel, um ein client secret zu generieren füge anmeldeinformationen zu back4app hinzu im back4app dashboard, unter servereinstellungen > authentifizierung , gib deine services id und dein client secret für apple ein 6 2 aktualisiere auth service dart mit apple login fügen sie den folgenden code hinzu, um die apple authentifizierung zu behandeln // 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 fügen sie die apple anmeldeschaltfläche zu auth screen dart fügen sie den folgenden button zu ihrer benutzeroberfläche hinzu 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 plattform spezifische konfigurationen nur ios öffnen sie ihr projekt in xcode und gehen sie zu signing & capabilities klicken sie auf "+ capability" und fügen sie "sign in with apple" hinzu stellen sie sicher, dass ihr bundle identifier mit dem auf dem apple developer portal registrierten übereinstimmt schritt 7 – testen ihrer anwendung jetzt, da sie alle authentifizierungsmethoden eingerichtet haben, können sie ihre app ausführen und jede anmeldemöglichkeit testen 7 1 app ausführen flutter run für ios müssen sie die app auf einem echten gerät ausführen, um die anmeldung mit apple zu testen für android können sie einen emulator oder ein physisches gerät verwenden 7 2 standardauthentifizierung testen geben sie einen benutzernamen, eine e mail und ein passwort ein tippen sie auf "registrieren" um einen neuen benutzer zu erstellen tippen sie auf "anmelden" um sich mit den erstellten anmeldedaten anzumelden 7 3 facebook anmeldung testen tippen sie auf "mit facebook anmelden" ein facebook anmeldebildschirm wird angezeigt melden sie sich mit ihren facebook anmeldeinformationen an 7 4 test google anmeldung tippen sie auf "mit google anmelden" ein google anmeldebildschirm wird angezeigt melden sie sich mit ihrem google konto an 7 5 test apple anmeldung (nur ios) tippen sie auf "mit apple anmelden" die apple anmeldeaufforderung wird angezeigt authentifizieren sie sich mit ihrer apple id fazit in diesem tutorial haben sie erfolgreich die standard e mail/passwort authentifizierung implementiert und drittanbieter authentifizierungsmethoden (facebook, google und apple) in ihre flutter app mit dem parse sdk auf back4app integriert dieses setup verbessert die benutzererfahrung, indem es mehrere bequeme anmeldemöglichkeiten bietet nächste schritte benutzerprofile erweitern sie die app, um benutzerprofile zu verwalten, damit benutzer ihre informationen aktualisieren können abmeldefunktionalität implementieren sie abmeldefunktionen für jede authentifizierungsmethode datensicherheit sichern sie ihre daten, indem sie rollenbasierte zugriffskontrolle mit parse acls und rollen implementieren fehlerbehandlung verbessern sie die fehlerbehandlung, um den benutzern detailliertere rückmeldungen zu geben ui verbesserungen passen sie die benutzeroberfläche an das branding ihrer app an und verbessern sie die benutzererfahrung zusätzliche ressourcen back4app dokumentation https //www back4app com/docs parse flutter sdk leitfaden https //docs parseplatform org/flutter/guide/ offizielle flutter dokumentation https //flutter dev/docs facebook für entwickler https //developers facebook com/ google identity platform https //developers google com/identity dokumentation zur anmeldung mit apple https //developer apple com/sign in with apple/ viel spaß beim programmieren!