Panduan Lengkap untuk Autentikasi Pihak Ketiga di Flutter dengan Parse di Back4App

pendahuluan mengintegrasikan metode otentikasi pihak ketiga seperti facebook, google, dan apple ke dalam aplikasi flutter anda dapat secara signifikan meningkatkan pengalaman pengguna dengan menyediakan opsi login yang fleksibel dan nyaman parse server, yang didukung oleh back4app, menawarkan dukungan bawaan untuk penyedia otentikasi ini dalam tutorial ini, anda akan belajar bagaimana mengimplementasikan otentikasi pihak ketiga dalam aplikasi flutter anda menggunakan parse sdk di back4app pada akhir tutorial ini, anda akan memiliki aplikasi flutter dengan fitur pendaftaran dan login yang sepenuhnya berfungsi yang mencakup otentikasi email/kata sandi standar menggunakan parse metode otentikasi pihak ketiga facebook google apple prasyarat untuk mengikuti tutorial ini, anda memerlukan hal hal berikut sebuah akun back4app daftar untuk akun gratis di back4app https //www back4app com sebuah lingkungan pengembangan flutter yang terpasang di mesin anda ikuti panduan ini https //flutter dev/docs/get started/install jika anda memerlukan bantuan untuk mengatur flutter pengetahuan dasar tentang flutter dan dart jika anda baru, lihat pengantar flutter https //flutter dev/docs/get started/codelab akun pengembang untuk facebook, google, dan apple (diperlukan untuk mengatur metode login pihak ketiga) sebuah ide atau editor teks seperti visual studio code atau android studio langkah 1 – menyiapkan backend back4app 1 1 buat proyek back4app masuk ke dasbor back4app https //dashboard back4app com/ klik pada "buat aplikasi baru" masukkan nama untuk aplikasi anda, misalnya, "authdemo" , dan klik "buat" setelah proyek dibuat, navigasikan ke pengaturan aplikasi > keamanan & kunci catat id aplikasi dan kunci klien anda akan memerlukan nilai ini untuk menginisialisasi parse di aplikasi flutter anda 1 2 aktifkan penyedia autentikasi di dasbor back4app anda, navigasikan ke pengaturan server > autentikasi aktifkan metode autentikasi yang ingin anda gunakan facebook google apple untuk setiap penyedia, anda perlu memasukkan kredensial spesifik (id aplikasi, id klien, rahasia, dll ), yang akan diatur di langkah langkah berikutnya langkah 2 – menginstal dan menyiapkan parse sdk di flutter 2 1 buat proyek flutter baru buka terminal anda dan buat proyek flutter baru flutter create auth demo cd auth demo 2 2 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut untuk parse dan opsi masuk pihak ketiga 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 jalankan flutter pub get untuk menginstal dependensi 2 3 inisialisasi parse di main dart di file lib/main dart , impor sdk parse dan inisialisasi di fungsi 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(), ); } } ganti 'your app id' dan 'your client key' dengan kredensial back4app anda yang sebenarnya dari langkah 1 langkah 3 – mengimplementasikan autentikasi standar 3 1 buat layanan autentikasi buat direktori baru bernama services di bawah lib dan tambahkan file bernama auth service dart layanan ini akan menangani pendaftaran dan login pengguna menggunakan 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 buat layar autentikasi buat direktori baru bernama screens di bawah lib dan tambahkan file bernama auth screen dart layar ini akan menyediakan ui untuk autentikasi standar // 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 ], ), ), ), ); } } langkah 4 – mengintegrasikan autentikasi facebook 4 1 siapkan akun pengembang facebook buat aplikasi facebook pergi ke facebook untuk pengembang https //developers facebook com/ dan masuk klik pada "aplikasi saya" dan kemudian "buat aplikasi" pilih "konsumen" sebagai jenis aplikasi dan klik "berikutnya" isi nama aplikasi dan email kontak , lalu klik "buat aplikasi" tambahkan login facebook ke aplikasi anda di dasbor aplikasi anda, navigasikan ke "tambahkan produk" dan pilih "login facebook" pilih "android" dan/atau "ios" tergantung pada platform target anda ikuti langkah langkah pengaturan yang diberikan oleh facebook anda akan memerlukan bundle identifier aplikasi anda untuk ios dan package name untuk android konfigurasi uri pengalihan oauth atur oauth redirect uri ke https //parseapi back4app com/auth/facebook/callback dapatkan id aplikasi dan rahasia aplikasi di dasbor aplikasi anda, pergi ke "pengaturan" > "dasar" catat app id dan app secret tambahkan app id dan secret ke back4app di dasbor back4app, navigasikan ke pengaturan server > autentikasi di bawah facebook , masukkan id aplikasi dan kunci aplikasi 4 2 perbarui auth service dart dengan facebook login tambahkan kode berikut untuk menangani otentikasi 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 tambahkan tombol login facebook ke auth screen dart tambahkan tombol berikut ke ui anda 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 konfigurasi spesifik platform android perbarui 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> tambahkan id aplikasi facebook anda ke 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 perbarui 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> langkah 5 – mengintegrasikan autentikasi google 5 1 siapkan akun pengembang google buat proyek di google cloud console kunjungi google cloud console https //console cloud google com/ dan buat proyek baru konfigurasi layar persetujuan oauth navigasi ke api & layanan > layar persetujuan oauth atur layar persetujuan dengan ruang lingkup yang diperlukan buat id klien oauth kunjungi kredensial > buat kredensial > id klien oauth pilih aplikasi web tambahkan uri pengalihan yang diizinkan https //parseapi back4app com/auth/google/callback catat id klien dan rahasia klien tambahkan id klien dan rahasia ke back4app di dasbor back4app, di bawah pengaturan server > autentikasi , masukkan id klien dan rahasia klien untuk google 5 2 perbarui auth service dart dengan login google tambahkan kode berikut untuk menangani otentikasi 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 tambahkan tombol login google ke auth screen dart tambahkan tombol berikut ke ui anda 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 konfigurasi khusus platform android tambahkan yang berikut ke android/app/build gradle file dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } tambahkan id klien google anda ke 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> perbarui 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 tambahkan id klien yang dibalik ke info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> langkah 6 – mengintegrasikan autentikasi apple 6 1 siapkan akun pengembang apple daftarkan aplikasi anda masuk ke portal pengembang apple https //developer apple com/ dan daftarkan aplikasi anda aktifkan masuk dengan apple di bawah identifikasi , pilih aplikasi anda dan aktifkan masuk dengan apple buat id layanan buat id layanan untuk aplikasi anda atur uri pengalihan ke https //parseapi back4app com/auth/apple/callback hasilkan kunci klien buat kunci pribadi masuk dengan apple gunakan kunci ini untuk menghasilkan kunci klien tambahkan kredensial ke back4app di dasbor back4app, di bawah pengaturan server > autentikasi , masukkan id layanan dan kunci klien untuk apple 6 2 perbarui auth service dart dengan masuk apple tambahkan kode berikut untuk menangani otentikasi 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 tambahkan tombol masuk apple ke auth screen dart tambahkan tombol berikut ke ui anda 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 konfigurasi khusus platform hanya ios di xcode, buka proyek anda dan pergi ke signing & capabilities klik pada "+ capability" dan tambahkan "sign in with apple" pastikan bahwa bundle identifier anda cocok dengan yang terdaftar di apple developer portal langkah 7 – menguji aplikasi anda sekarang anda telah mengatur semua metode otentikasi, anda dapat menjalankan aplikasi anda dan menguji setiap opsi login 7 1 jalankan aplikasi flutter run untuk ios, anda harus menjalankan aplikasi di perangkat nyata untuk menguji sign in with apple untuk android, anda dapat menggunakan emulator atau perangkat fisik 7 2 uji otentikasi standar masukkan nama pengguna, email, dan kata sandi ketuk "daftar" untuk membuat pengguna baru ketuk "login" untuk masuk dengan kredensial yang dibuat 7 3 uji login facebook ketuk "login dengan facebook" layar login facebook akan muncul masuk dengan kredensial facebook anda 7 4 uji login google ketuk "login dengan google" layar masuk google akan muncul masuk dengan akun google anda 7 5 uji login apple (hanya ios) ketuk "login dengan apple" prompt masuk apple akan muncul autentikasi menggunakan apple id anda kesimpulan dalam tutorial ini, anda berhasil menerapkan otentikasi email/kata sandi standar dan mengintegrasikan metode otentikasi pihak ketiga (facebook, google, dan apple) ke dalam aplikasi flutter anda menggunakan parse sdk di back4app pengaturan ini meningkatkan pengalaman pengguna dengan menawarkan beberapa opsi login yang nyaman langkah selanjutnya profil pengguna kembangkan aplikasi untuk mengelola profil pengguna, memungkinkan pengguna untuk memperbarui informasi mereka fungsi logout implementasikan fitur logout untuk setiap metode otentikasi keamanan data amankan data anda dengan menerapkan kontrol akses berbasis peran menggunakan acl dan roles parse penanganan kesalahan tingkatkan penanganan kesalahan untuk memberikan umpan balik yang lebih rinci kepada pengguna peningkatan ui sesuaikan ui agar sesuai dengan merek aplikasi anda dan meningkatkan pengalaman pengguna sumber daya tambahan dokumentasi back4app https //www back4app com/docs panduan parse flutter sdk https //docs parseplatform org/flutter/guide/ dokumentasi resmi flutter https //flutter dev/docs facebook untuk pengembang https //developers facebook com/ platform identitas google https //developers google com/identity dokumentasi masuk dengan apple https //developer apple com/sign in with apple/ selamat berkoding!