Bu makalede neler anlatacağız.
- Uygulamanıza SplashScreen ekleme
- Kullanıcıyı SplashScreen'den AuthScreen veya HomeScreen'e yönlendirme
- GoogleSignIn Kimlik Doğrulaması
Firebase nedir? (hızlı giriş ..)
Firebase, uygulamalarımızı hızlı bir şekilde oluşturmak ve göndermek için çeşitli hizmetlere sahip Google'ın mobil platformudur. NoSQL veritabanı olarak sınıflandırılır ve verileri JSON benzeri belgelerde saklar.
1. Firebase Projesini Kur
Başının üzerinde Firebase Konsolundan yeni bir proje ekleyin o zaman.
İşleri basit ve kısa tutmak için buradaki her adımı açıklamıyorum. Güven bana sonraki adımlar app ateş tabanına eklemek oldukça açıktır.
- Firebase konsolunun Kimlik Doğrulama bölümünde bir oturum açma yöntemi ayarladığınızdan emin olun. Aksi takdirde işler beklendiği gibi çalışmaz.
Belirli bir adımda, işlemi tamamlamak için sizden SHA-1 Anahtarını girmenizi ister. SHA-1 anahtarını almak için cmd'nizde bu komutu çalıştırın.
keytool -list -v -alias androiddebugkey -keystore C:UsersYOUR_USER_NAME_HERE.androiddebug.keystore2. Kod Yazalım
Kullanıcılar genellikle bir uygulamayı ilk açtıklarında ona tanıtıcı sahneler ile anlatımlar yaparız veya uygulamanını etkileyici bir introsunu koyarız. Buna splashscreen denilmektedir.
Kullanıcı uygulamayı bir sonraki açışında, kullanıcının zaten oturum açmış olup olmadığını kontrol edeceğiz.
Eğer kullanıcı login yapmışsa HomeScreen'i atlatarak AuthScreen'e yönlendireceğiz. Ancak giriş yapmamış ise SplashScreen den AuthScreen'e yönlendireceğiz.
Kullanacağımız Paketler :
- google_sign_in: ^ 4.5.1
- firebase_auth: ^ 0.16.1
Yukarıdaki iki paketi pubspec.yamldosyanıza ekleyin
import 'package:YOUR_PROJECT_NAME/screens/homescreen.dart';
import 'package:YOUR_PROJECT_NAME/screens/splashscreen.dart';
import 'package:YOUR_PROJECT_NAME/screens/authscreen.dart';
import 'package:flutter/material.dart';
// Defining routes for navigation
var routes = <String, WidgetBuilder>{
"/auth": (BuildContext context) => AuthScreen(),
"/home":(BuildContext context) => HomeScreen(),
};
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Google SignIn Auth',
routes: routes,
// Showing SplashScreen as the first screen when user launches the app.
home: SplashScreen(),
));
}Geri kalan kısmlar için UI yapalım.
lib/screens Klasörün splashscreen.dart içinde yeni bir dart dosyası oluşturun.
import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
navigateUser();
}
navigateUser() {
FirebaseAuth.instance.currentUser().then((currentUser) {
//Checking whether user is loggedIn or not
if (currentUser == null) {
//If user == null navigate the user to AuthScreen after 2 Sec.
Timer(Duration(seconds: 2),() =>
Navigator.pushReplacementNamed(context, "/auth"));
} else {
Timer(Duration(seconds: 2),
() => Navigator.pushReplacementNamed(context, "/home"));
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
color: Color(0xFFB2F2D52),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Splash Screen",
style: TextStyle(
fontSize: 30.0,
color: Color(0xFFBffffff),
),
),
],
),
],
),
),
);
}
}Firebase Kimlik Doğrulamasını Uygulayalım
lib/screens Klasörün authscreen.dart içinde yeni bir dart dosyası oluşturun.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
String name;
String email;
String imageUrl;
// Creating an instance of FirebaseAuth & GoogleSignIn.
final FirebaseAuth auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
class AuthScreen extends StatefulWidget {
@override
_AuthScreenState createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen> {
bool isVisible = false;
Future<FirebaseUser> _signIn() async {
final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
final GoogleSignInAuthentication gsa = await googleSignInAccount.authentication;
final AuthCredential credential = GoogleAuthProvider.getCredential(
idToken: gsa.idToken,
accessToken: gsa.accessToken,
);
final AuthResult authResult = await auth.signInWithCredential(credential);
final FirebaseUser firebaseUser = authResult.user;
name = firebaseUser.displayName;
email = firebaseUser.email;
imageUrl = firebaseUser.photoUrl;
final FirebaseUser currentUser = await auth.currentUser();
assert(firebaseUser.uid == currentUser.uid);
return firebaseUser;
}
@override
Widget build(BuildContext context) {
var swidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:AssetImage("assets/images/bg.png"),fit: BoxFit.cover)),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Visibility(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>
(Color(0xFFB2F2D52)),
),
visible: isVisible,
)
],
),
Container( margin: const EdgeInsets.only( bottom: 60.0, ),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox( height: 54.0, width: swidth / 1.45,
child: RaisedButton(
onPressed: () {
setState(() {
this.isVisible = true;
});
_signIn().whenComplete(() {
Navigator.pushReplacementNamed(context, "/home");
}).catchError((onError) {
Navigator.pushReplacementNamed(context, "/auth"); });
},
child: Text(
' Continue With Google',
style: TextStyle(fontSize: 20,),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
elevation: 5, color: Color(0XFFF7C88C),
),
),
),
),
],
),
);
}
}Neredeyse bitti, HomeScreenbaşarılı giriş yaptıktan sonra kullanıcıyı bu sayfaya yönlendireceğimiz yeri oluşturalım.
import 'package:YOUR_PROJECT_NAME/screens/authscreen.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello, " + name),
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
onPressed: () async {
name = '';
email = '';
// Logging out the user
await FirebaseAuth.instance.signOut();
await googleSignIn.disconnect();
await googleSignIn.signOut();
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) =>
AuthScreen()), (Route<dynamic> route) => false);
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar( radius: 40.0, backgroundImage: NetworkImage(imageUrl), ),
SizedBox( height: 10.0, ),
Text(email, style: TextStyle(fontSize: 20.0),),
],
),
),
);
}
}
