สวัสดีผู้อ่านทุกท่านครับ บล็อกนี้เป็นตอนต่อเนื่องเรื่อง Firebase Auth ใน Flutter ครับ ซึ่งตอนก่อนหน้านี้จะเป็นเรื่อง login ด้วยอีเมล อีกอันคือ login ด้วย facebook วิธีการใช้งานค่อนข้างง่าย น่าจะพอเห็นไอเดียของ Firebase Auth แล้ว ซึ่งในบล็อกนี้ผมจะพามาลองเล่นเพิ่มเติมใน provider ของ Firebase Auth ตัวอื่นๆๆ เช่น Sign in ด้วย Google account

หากยังไม่ได้อ่านตอนก่อนหน้านี้ แนะนำอ่านก่อนนะครับ เพราะ Flutter Project จะต้องติดตั้ง Firebase ไว้แล้ว ใน android/iOS

ตอนก่อนหน้านี้เป็นการทำ Login ของ Facebook

เปิดใช้งาน Google ใน Firebase Auth

เริ่มจากเปิดใช้งาน Google provider ใน Firebase Auth

ต่อมา กรณี android เราต้องไปกำหนด fingerprint ใน Fireabse Project ของเรา ให้รันคำสั่งด้านล่างนี้ใน jre/bin โดยคำสั่งข้างล่างนี้จะเป็นการแสดง SHA-1 ของ debug ดังนั้นเลยใช้ path keystore ของโหมด debug ส่วนกรณีใน iOS ไม่ต้องทำอะไร

$ keytool -list -v -keystore C:\Users\benznest\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android 

จากนั้นก็ copy fingerprint SHA-1 มาใส่ใน Firebase ที่เมนู Project Setting > Certificate fingerprint โดยในหน้านี้สามารถเพิ่ม
fingerprint ได้หลายอัน ดังนั้นในอนาคตถ้าเราจะ deploy app ขึ้น store เราก็มาเพิ่ม
fingerprint ของ release keystore

เปิดใช้งาน Google People API

ต่อมาก็ต้องอนุญาตการใช้ People API คือเข้าไปที่ Developer API Console
https://console.developers.google.com/apis/library
ถ้าไม่เคยสร้างโปรเจค ให้สร้างโปรเจคก่อน

แล้วค้นหา People API จากนั้นกด enable

Google Sign-in Flutter

เพิ่ม dependencies ของ Google Sign in ใน pubspec.yaml
อ่านรายละเอียดได้ที่
https://github.com/flutter/plugins/tree/master/packages/google_sign_in

dependencies:
  ..
  google_sign_in: 4.0.1+1

เพิ่มปุ่มสำหรับ Login with Google โดยผมจะทำต่อจาก UI ตอนเดิมก่อนหน้านี้

  Widget buildButtonGoogle(BuildContext context) {
    return InkWell(
        child: Container(
            constraints: BoxConstraints.expand(height: 50),
            child: Text("Login with Google ",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18, color: Colors.blue[600])),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16), color: Colors.white),
            margin: EdgeInsets.only(top: 12),
            padding: EdgeInsets.all(12)),
        onTap: () => loginWithGoogle(context));
  }

จะได้หน้าจอแบบนี้

มาถึงส่วนการทำงานของ Sign in จริงๆ นั้นสั้นมาก ก่อนอื่นต้องกำหนด scope ก่อนโดยดู scope จากลิงค์นี้
https://developers.google.com/identity/protocols/googlescopes

จากนั้น สร้าง instance ของ GoogleSinIn เรียก method signIn() ก็เสร็จเลย
ที่เหลือคือ get token แล้วเอาไปใส่ Firebase Auth

  Future loginWithGoogle(BuildContext context) async {
    GoogleSignIn _googleSignIn = GoogleSignIn(
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly',
      ],
    );
    GoogleSignInAccount user = await _googleSignIn.signIn();
    GoogleSignInAuthentication userAuth = await user.authentication;

    await _auth.signInWithCredential(GoogleAuthProvider.getCredential(
        idToken: userAuth.idToken, accessToken: userAuth.accessToken));
    checkAuth(context); // after success route to home.
  }

ลองรัน และเมื่อเรากดที่ปุ่ม Login with Google ก็จะปรากฏหน้าจอให้เลือก account

จากนั้นก็จะขออนุญาต การใช้ข้อมูลจากผู้ใช้

เมื่อกดตกลงก็จะได้ FirebaseAuthUser เพื่อส่งไปหน้า home แล้ว

จากนั้น เมื่อไปดูที่ Firebase ก็จะมี user อันใหม่จาก Google แล้วละ

ส่วนคำสั่ง sign out ก็ง่ายนิดเดียว ก็เรียก .signOut() ได้เลย

    bool isSigned = await _googleSignIn.isSignedIn();
    if(isSigned){
      await _googleSignIn.signOut();
    }

สรุป

การใช้ Sign in with Google ร่วมกับ Firebase Auth ใน Flutter นั้นสะดวกมาก ผมคิดว่าวิธีติดตั้งง่ายกว่า Facebook อีกนะ ส่วนวิธีการใช้ใน Flutter ก็ง่ายอีกด้วย บล็อกนี้ผมได้พามาลองเล่นคร่าวๆ น่าจะพอให้ผู้อ่านเห็นไอเดียการใช้งานครับ

ยังมีบทความเรื่อง Flutter ที่ผมเขียนไว้ อีกเยอะเลยในบล็อกนี้ (:
https://benzneststudios.com/blog/category/flutter/