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.
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 :
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.
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),), ], ), ), ); } }