สวัสดีผู้อ่านครับ บล็อกนี้จะพาไปทำ Facebook Login ด้วย Firebase Auth ใน Flutter ครับ โดยผมจะทำหน้า UI ต่อจากบล็อกตอน Login Email ด้วย Firebase Auth ครับ

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

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

ก่อนอื่นเปิดใช้งาน Facebook ใน Firebase โดยไปที่ Firebase Auth > Sign in method > Facebook กด enable วึ่งมันจะให้เรากรอก App ID ถ้าเรายังไม่มีให้ไปสร้างในขั้นตอนถัดไป

สร้างแอปใน Facebook

ให้เข้าไปที่ https://developers.facebook.com/apps/
จากนั้นกด create app แล้วกรอกข้อมูล

ไปที่แอพของเรา กดไปที่ ดูแอพทั้งหมด แล้วเลือกแอพที่เราเพิ่งสร้างเมื่อสักครู่

ที่เมนูข้อมูลพื้นฐาน จะมี App ID และ secret ที่เราต้องการอยู่

ให้ copy ไปใส่ใน Firebase ได้เลย

ตั้งค่าใน Facebook Developer

หลังจากกำหนด App ID แล้ว ต่อมาคือต้องทำให้ Facebook ระบุตัวตน app ของเรา โดยการกำหนดค่าในข้อมูลพื้นฐานที่ Facebook ต้องการให้ครบ เช่น Android คือระบุ package name , class , hash key ส่วนของ iOS ก็ระบุ App ID , iPhone Store ID

hash key ของ android อาจจะยุ่งยากหน่อย ให้ลองทำตามบทความข้างล่างนี้เลย

ตั้งค่าครบแล้ว อย่าลืมกด เปิด app ของเราให้ Publish ด้วยนะ

กำหนด Facebook App ID ใน Project

จากนั้นเราต้องกำหนด App Id ใน project แยกตาม Platform
โดยวิธีการไม่ยากเลย ให้ทำตาม คำอธิบายในลิงค์นี้
https://github.com/roughike/flutter_facebook_login

ผมจะยกตัวอย่างเฉพาะของ Android นะ ซึ่งจริงๆก็คล้ายกัน เริ่มจากให้ copy resource ข้างล่างนี้ไปไว้ใน
<your project root>/android/app/src/main/res/values/strings.xml
หากไม่มีไฟล์ strings.xml ให้สร้างใหม่ได้เลย แล้วใส่ App id ของเรา แทน 000000000000

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Your App Name here.</string>

    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      Replace "000000000000" with your Facebook App ID here.
      **NOTE**: The scheme needs to start with `fb` and then your ID.
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>

คำอธิบายสำหรับใครที่ไม่เคยเขียน Android มันคือการนิยามเพื่อเก็บค่าคงที่อะไรบางอย่างใน app ของเรา ซึ่งในที่นี้คือ facebook app id

ต่อมา copy ด้านล่างนี้ไปเพิ่มใน
<your project root>/android/app/src/main/AndroidManifest.xml
โดยจะอยู่ใน <application> … </application>

<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
            "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

คำอธิบายสำหรับใครที่ไม่เคยเขียน Android มันคือการนิยาม activity ภายในแอป ซึ่งในที่นี้คือ activity ที่ facebook ทำเอาไว้ให้แล้ว และก็กำหนดค่า facebook app id ลงใน meta-data ทำให้ Facebook สามารถอ่านค่า app id ได้

ส่วนของ iOS ก็ทำลักษณะคล้ายกัน คือกำหนด app id และ ส่วนของ Facebook ใน project ทำตามลิงค์ได้เลย

Flutter Facebook Login

มาถึงส่วนของการ login จริงๆใน Flutter ให้เพิ่ม dependencies ของ flutter_facebook_login ใน pubspec.yaml ถ้ายังไม่มี firebase core และ firebase auth ให้เพิ่มด้วยนะ

dependencies:
  ..
  firebase_core: 0.3.1+1
  firebase_auth: 0.8.1+4
  flutter_facebook_login: 2.0.0 // here

ที่หน้าจอของเราเพิ่มปุ่ม login with facebook ในหน้าจอของเรา โดยผมจะใช้ UI จากตอนก่อนหน้านี้

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

เขียน method ส่วนการทำงาน loginWithFacebook() ซึ่งหลักการคือ พอกดที่ปุ่ม login facebook แล้ว Facebook มันจะแสดงหน้าจอให้ user อนุญาตก่อน หลังจาก user ตกลงแล้ว เราก็จะได้ access_token เราก็เอา access_token ไปให้กับ Firebase จากนั้น
Firebase จะดึงข้อมูลจาก Facebook เช่นอีเมล มาสร้างเป็น user ใน Firebase

  Future loginWithFacebook(BuildContext context) async {
    FacebookLogin facebookLogin = FacebookLogin();
    FacebookLoginResult result = await facebookLogin
        .logInWithReadPermissions(['email', "public_profile"]);

    String token = result.accessToken.token;
    print("Access token = $token");
    await _auth.signInWithCredential(
        FacebookAuthProvider.getCredential(accessToken: token));
    checkAuth(context); // after success, navigate to home.
  }

ลองรัน พอกดปุ่มแล้ว มันจะขึ้นหน้าจอแบบนี้

หลังจากกดตกลง ให้ไปดูที่เว็บ Firebase Auth ที่เมนู user ก็จะมี user อันใหม่ที่มีสัญลักษณ์ Facebook แล้วละ

สรุป

Facebook Login ทำได้ง่ายๆด้วย Firebase Auth จริงๆนะ สรุปคือ สร้างแอปใน facebook เอา app id มาใส่ใน firebase แล้วก็เอาไปใส่ใน project ตามแต่ละ platform จากนั้นก็ลุยใน Flutter ได้เลย โดยเขียนโปแกรมจริงแค่ไม่กี่บรรทัดเท่านั้น ก็ได้ Facebook login มาแล้ว

เครดิต

https://medium.com/flutterpub/firebase-fb-sign-in-and-flutter-7ab4bdc7172e

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