Google Sign In – Ketika kamu berinteraksi dengan komputer atau internet melalui sebuah aplikasi, tidak jarang kamu akan dihadapkan dengan yang namanya sign in. Kamu akan diminta memasukkan email dan password agar dapat mengakses aplikasi yang kamu butuhkan. Sign in biasa di sebut juga sebagai log in maupun log on.
Untuk meningkatkan sistem keamanan, beberapa aplikasi menerapkan berbagai teknologi untuk menerapkan sistem sign in ini. Salah satunya adalah Google Sign In.
Google Sign In adalah metode penerapan sistem sign in menggunakan akun google, sehingga kamu tidak perlu memasukkan username dan password berkali-kali, cukup memilih akun google yang terdaftar pada komputer.
Berikut ini adalah cara membuat Google Sign In menggunakan Flutter.
1. Membuat Projek Baru Flutter
Langkah pertama adalah membuat projek baru flutter dan menjalankannya pada emulator atau device smartphone kamu. Jalankan sintaks berikut pada command prompt atau CLI kesayangan kamu.
flutter create google_sign_in_flutter2. Install Package
Untuk menerapkan Google Sign In, kita akan memanfaatkan package yang dibuat secara langsung oleh komunitas flutter, yaitu google_sign_in. kamu dapat menemukannya di pub.dev dimana versi saat ini adalah 5.3.3. Untuk menginstall package ini, kamu bisa menjalankan:
flutter pub add google_sign_inAtau kamu dapat menambahkan baris berikut di pubspec.yaml
dependencies:
google_sign_in: ^5.3.33. Konfigurasi Package
Untuk pengguna IOS, kamu harus menambahkan konfigurasi berikut pada folder /ios/Runner/Info.plist. Konfigurasi ini dibutuhkan untuk IOS 9.0 keatas.
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
</array>
</dict>
</array>4. Setup Google Sign In
Buka file main.dart pada folder lib, kemudian import package google_sign_in, letakkan pada bagian paling atas kode program. Pada file main ini, terdapat dua class yaitu MyApp dan MyHomePage.
import 'package:google_sign_in/google_sign_in.dart';Selanjutnya, untuk menginisialisasi package ini, masukkan kode program berikut pada variabel global atau setara dengan fungsi main.
void main() {
runApp(const MyApp());
}
final GoogleSignIn _googleSignIn = GoogleSignIn(
scopes: [
'email',
'https://www.googleapis.com/auth/contacts.readonly',
],
);Pada class MyHomePage buat sebuah variabel GoogleSignInAccount yang menampung data akun google kamu ketika sign in berhasil.
class _MyHomePageState extends State<MyHomePage> {
GoogleSignInAccount? _currentUser; // Tambah disini
@override
Widget build(BuildContext context) {
// ...
}
}Di dalam initState class MyHomePage, masukkan listener untuk menghandle response sign in dari google. Di dalam listener ini terdapat callback parameter yang berisi variabel GoogleSignInAccount yang kemudian akan di masukkan ke variabel _currentUser.
@override
void initState() {
_googleSignIn.onCurrentUserChanged.listen((account) {
setState(() {
_currentUser = account;
});
});
_googleSignIn.signInSilently();
super.initState();
}Setelah itu, tambahkan fungsi untuk mengeksekusi ketika tombol sign in ditekan didalam class MyHomePage. Fungsi ini akan mentrigger proses sign in.
Future<void> _handleSignIn() async {
try {
await _googleSignIn.signIn();
} catch (error) {
if (kDebugMode) {
print(error);
}
}
}Untuk tampilan atau view nya kita akan buat sederhana saja. Hanya menampilkan AppBar dan tombol sign in saja. Ketika proses sign in berhasil, maka halaman akan berganti menjadi halaman dashboard yang berisi ListTile dengan isi profile akun google.
Caranya adalah dengan memanfaatkan nilai dari variabel _currentUser, apabila variabel tersebut masih kosong atau null, maka akan menampilkan halaman login, sedangkan apabila variabel _currentUser sudah terisi dengan akun profil kamu, maka halaman dialihkan ke dashboard.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_currentUser != null ? 'Dashboard' : 'Login'),
elevation: 0.5,
centerTitle: true,
),
body: _currentUser != null
? ListTile(
leading: GoogleUserCircleAvatar(identity: _currentUser!),
title: Text(_currentUser!.displayName ?? ''),
subtitle: Text(_currentUser!.email),
trailing: IconButton(
icon: Icon(Icons.logout_outlined),
onPressed: () async {
await _googleSignIn.disconnect();
},
),
)
: Container(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () async {
await _handleSignIn();
},
child: Text('Sign In')),
),
);
}5. Konfigurasi Firebase
Untuk menggunakan google_sign_in pada flutter, kita akan memanfaatkan firebase authentikasi untuk menghubungkan aplikasi kamu dengan akun google.
Berikut ini adalah beberapa cara menghubungkan akun kamu dengan firebase:
1. Login ke firebase menggunakan akun google kamu. Lalu klik go to console pada bagian pojok kanan atas.
2. Tambah projek baru apabila kamu belum pernah membuat sebelumnya. Kemudian masukkan nama projek aplikasi yang ingin kamu buat.
3. Apabila aplikasi kamu ingin kamu hubungkan dengan google analytics, kamu dapat merubah switch menjadi aktif. Fitur ini berfungsi untuk menganalisa aplikasi kamu dari segi traffic, testing, dan masih banyak lagi.
4. Projek firebase kamu berhasil dibuat. Kamu akan diarahkan ke halaman dashboard firebase. Untuk mengaktifkan fitur authentication pada firebase, silahkan masuk pada menu Authentication, selanjutnya klik start.
5. Pilih Sign-in providers menggunakan google, klik enable dan pilih email kamu yang akan digunakan sebagai support.
6. Projek kamu berhasil mengaktifkan fitur authentikasi. Selanjutnya, kita akan menghubungkan akun firebase dengan projek flutter. Masuk ke project overview – klik icon android untuk konfigurasi aplikasi dengan os android.
7. Masukkan package name projek kamu, dapat dilihat di file AndroidManifest pada folder android projek flutter.
8. Selanjutnya, download file google-services.json, copy-paste pada folder /android/app pada projek kamu.
9. Terakhir, masukkan beberapa konfigurasi seperti classpath, import implementation, dan lainya.
Full Source Code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
void main() {
runApp(const MyApp());
}
final GoogleSignIn _googleSignIn = GoogleSignIn(
scopes: [
'email',
'https://www.googleapis.com/auth/contacts.readonly',
],
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Sign In',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GoogleSignInAccount? _currentUser;
@override
void initState() {
_googleSignIn.onCurrentUserChanged.listen((account) {
setState(() {
_currentUser = account;
});
});
_googleSignIn.signInSilently();
super.initState();
}
Future<void> _handleSignIn() async {
try {
await _googleSignIn.signIn();
} catch (error) {
if (kDebugMode) {
print(error);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_currentUser != null ? 'Dashboard' : 'Login'),
elevation: 0.5,
centerTitle: true,
),
body: _currentUser != null
? ListTile(
leading: GoogleUserCircleAvatar(identity: _currentUser!),
title: Text(_currentUser!.displayName ?? ''),
subtitle: Text(_currentUser!.email),
trailing: IconButton(
icon: Icon(Icons.logout_outlined),
onPressed: () async {
await _googleSignIn.disconnect();
},
),
)
: Container(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () async {
await _handleSignIn();
},
child: Text('Sign In')),
),
);
}
}Untuk lebih jelasnya, kamu dapat melihat pada tutorial video youtube dibawah ini. Silahkan kunjungi channel Bauroziq untuk mendapatkan informasi tutorial seputar Flutter.
