• 0

Flutter SplashScreen kullanarak Firebase Google Oturum Açma Yetkilendirmesi

5 ay önce , Okuma süresi 3 dakika.

Hiç flutter Uygulamanızda kullanıcı kimlik doğrulaması yapmak istediniz mi? Firebase Kimlik Doğrulaması'nı kullanarak GoogleSignIn () yetkilendirmesinin nasıl ekleneceğini görelim .
Flutter SplashScreen kullanarak Firebase Google Oturum Açma Yetkilendirmesi

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.keystore

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

 

#Yazılım #Flutter