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

43min
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.
Sebuah lingkungan pengembangan Flutter yang terpasang di mesin Anda. Ikuti panduan ini jika Anda memerlukan bantuan untuk mengatur Flutter.
Pengetahuan dasar tentang Flutter dan Dart. Jika Anda baru, lihat pengantar Flutter.
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.
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:
Bash
flutter create auth_demo
cd auth_demo
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:
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
﻿
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 :
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(),
    );
  }
}
﻿
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.
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. 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.
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
            ],
          ),
        ),
      ),
    );
  }
}
﻿
Langkah 4 – Mengintegrasikan Autentikasi Facebook
4.1. Siapkan Akun Pengembang Facebook
Buat Aplikasi Facebook:
Pergi ke Facebook untuk Pengembang 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:
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. Tambahkan Tombol Login Facebook ke auth_screen.dart
Tambahkan tombol berikut ke UI Anda:
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. Konfigurasi Spesifik Platform
Android
Perbarui 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>
﻿
Tambahkan ID Aplikasi Facebook Anda ke 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
Perbarui Info.plist file:
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>
﻿
Langkah 5 – Mengintegrasikan Autentikasi Google
5.1. Siapkan Akun Pengembang Google
Buat Proyek di Google Cloud Console:
Kunjungi Google Cloud Console 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:
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. Tambahkan Tombol Login Google ke auth_screen.dart
Tambahkan tombol berikut ke UI Anda:
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. Konfigurasi Khusus Platform
Android
Tambahkan yang berikut ke android/app/build.gradle file:
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
}
﻿
Tambahkan ID Klien Google Anda ke 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>
﻿
Perbarui 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
Tambahkan ID klien yang dibalik ke 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>
﻿
Langkah 6 – Mengintegrasikan Autentikasi Apple
6.1. Siapkan Akun Pengembang Apple
Daftarkan Aplikasi Anda:
Masuk ke Portal Pengembang Apple 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:
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. Tambahkan Tombol Masuk Apple ke auth_screen.dart
Tambahkan tombol berikut ke UI Anda:
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. 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
Bash
flutter run
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﻿
﻿Panduan Parse Flutter SDK﻿
﻿Dokumentasi Resmi Flutter﻿
﻿Facebook untuk Pengembang﻿
﻿Platform Identitas Google﻿
﻿Dokumentasi Masuk dengan Apple﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Memvisualisasikan Data di Flutter dengan fl_chart dan Back4App
BERIKUTNYA
Cara Membuat Widget Layar Utama di Flutter dengan HomeWidget dan Back4App