Flutter: Facebook Login โดยไม่ต้องผ่าน Firebase

เขียน Flutter ให้ Login ด้วย Facebook โดยไม่ต้องผ่าน Firebase แบ่งออกเป็น 3 ขั้นตอน

สร้างและตั้งค่า Facebook App ก่อน

ขั้นที่ 1. เข้า https://developers.facebook.com/ โดยใช้ Account facebook ของเราเอง

ขั้นที่ 2. เลือก MyApp แล้วก็ Create App

ขั้นที่ 3. เลือก app type เป็น Consumer

ขั้นที่ 4. ตั้งชื่อ App อะไรก็ได้ ใส่ Email แล้วกด Create App ระบบจะถาม Password ของ facebook ก็ใส่แล้วกด submit

จะได้ App ตามตัวอย่างข้างล่าง

ขั้นที่ 5. กด Set up ที่ Facebook Login แล้วเลือก Android (กรณีที่เป็น Android app)

ขั้นที่ 6. ตั้งค่าสำหรับ Android app กด Next ไปถึง Step 3 เลย

• ขั้นที่ 6.1. Package Name ให้ใส่ package name ของ app โดยไปที่ไฟล์ android/app/src/build.gradle

• ขั้นที่ 6.2. Default Activity ก็ใส่ package name ตามข้างบนแล้วตามด้วย .MainActivity

ขั้นที่ 7. ที่ Step 4 ต้องสร้าง Key hash ของเครื่องที่เขียนโปรแกรม Android นั้นๆ ต้องทำทุกเครื่องที่ใช้ Build application ถ้าเป็นเครื่อง Build ก็ต้องทำใหม่
** หรือ ใช้ package https://pub.dev/packages/flutter_facebook_keyhash ช่วยในการหา key hash **

• ขั้นที่ 7.1. ใช้โปรแกรม openssl ในการรัน ถ้าเครื่องไม่มี openssl ก็ให้ดาวน์โหลดจาก https://code.google.com/archive/p/openssl-for-windows/downloads

• ขั้นที่ 7.2. รันคำสั่ง โดยต้องเปลี่ยน C:\Users\USERNAME เป็น path ของ user ในเครื่อง windows และ PATH_TO_OPENSSL_LIBRARY เป็น path ที่เก็บโปรแกรม openssl ที่แตก zip ไว้
  

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

• ขั้นที่ 7.3. มันถาม password ให้ใส่เป็น "android" แล้วจะได้ Key hash ออกมา
  

• ขั้นที่ 7.4. Copy Key hash ไปใส่ในช่องของ Step 4

ถ้ามันถูกต้องมันต้องมีเป็นข้อความ Warning ออกมา ถ้ามันเป็น keyhash ออกมาเลย แบบนั้นอาจไม่ได้เพราะว่าตัว debug.keystore มันไม่ได้มี password (default) เป็น android ถ้าเอา keyhash ไปใช้แล้ว มันจะไม่สามารถ login กับ facebook account อื่นได้ มันจะได้แต่กับ facebook ตัวเอง

ขั้นที่ 8. ข้าม Step 5 ไปที่ Step 6 ต้องไปเพิ่มที่ Android app

• ขั้นที่ 8.1. ไปที่ folder android/app/src/main/res/values (ใน flutter จะไม่เหมือนที่แสดงในเวบ facebook นะ)

• ขั้นที่ 8.2. สร้างไฟล์ชื่อ *strings.xml *แล้วเพิ่ม code โดยใส่ FACEBOK_APPNAME และ FACEBOK_APPID
  

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">FACEBOK_APPNAME</string>    
<string name="facebook_app_id">FACEBOK_APPID</string>
<string name="fb_login_protocol_scheme">fbFACEBOK_APPID</string>
<string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
</resources>

• ขั้นที่ 8.3. ไปที่ไฟล์ android/app/src/main/AndroidManifest.xml เพิ่ม Code อนุญาตการเชื่อมต่ออินเทอร์เข้าไป ก่อน tag Application

<uses-permission android:name="android.permission.INTERNET"/>

• ขั้นที่ 8.4. เพิ่ม Code เข้าไป ใน tag Application

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
<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>

ขั้นที่ 9. กด Next ไปเรื่อยๆ เสร็จสิ้นการตั้งค่าใน Facebook App (ช่วงแรก)

ติดตั้งและใช้ Flutter plugin

ขั้นที่ 1. ติดตั้ง package https://pub.dev/packages/flutter_facebook_auth (คู่มือ facebook.meedu.app)

ขั้นที่ 2. ถ้ารัน Flutter อยู่ต้อง Stop Flutter ก่อนแล้ว Build ใหม่

ขั้นที่ 3. import library ในหน้าที่จะเขียนเชื่อมต่อกับ facebook api

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

ขั้นที่ 4. เขียน Code ในปุ่มเพื่อเรียกการ login

final LoginResult result = await FacebookAuth.instance.login(); // by default we request the email and the public profile
// or FacebookAuth.i.login()
if (result.status == LoginStatus.success) {
 // you are logged
 final AccessToken accessToken = result.accessToken!;
}

ขั้นที่ 5. ถ้าสำเร็จจะได้ accressToken กลับมา แต่ตอนนี้จะใช้ได้แค่ Account facebook ที่เป็น account ที่สร้าง Facebook app เท่านั้น

ขั้นที่ 6. ใช้คำสั่ง เพื่อเรียกข้อมูล User (ค่า default จะเป็น public_profile, email)

final userData = await FacebookAuth.instance.getUserData();

{
  "email" = "[e-mail]",
  "id" = 3003332493073668,
  "name" = "Darwin Morocho",
  "picture" = {
      "data" = {
          "height" = 50,
          "is_silhouette" = 0,
          "url" = "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=3003332493073668",
          "width" = 50,
      },
  }
}

เปิด Mode ของ Facebook App เป็น Live Mode เพื่อให้ใช้งาน Login กับ Facebook Account อื่นได้

ถ้าไม่เปิดจะใช้งานได้แค่ Facebook Account ของ Dev คนนั้นเท่านั้น

ขั้นที่ 1. การเปิด Live mode ของ Facebook ต้องมีการใส่ privacy policy ด้วย ซึ่งเราอาจจะไปสร้างได้จากเวบของไทย pdpa.pro

ขั้นที่ 2. เลือก สร้าง Policy

ขั้นที่ 3. เลือก Privacy Policy, ยอมรับเงื่อนไข, กดยืนยันการเลือก

ขั้นที่ 4. กรอก email แล้วกด เริ่มสร้าง

ขั้นที่ 4. กรอกชื่อแอปภาษาไทย ภาษาอังกฤษ เลือกไทย แล้วกดถัดไป

ขั้นที่ 5. เลือก Facebook login แล้วกดถัดไป

ขั้นที่ 6. เลือกตามภาพ

ขั้นที่ 7. บันทึกข้อมูล และกดรับ Policy

ขั้นที่ 8. ระบบจะส่งเมล์เข้าไปยังเมล์ที่เรากรอกไว้

ขั้นที่ 9. เข้าเมล์แล้วกดยืนยันอีเมล์

ขั้นที่ 10. ตั้งรหัสและเข้าระบบ จะเห็น policy ให้ copy url มา

ขั้นที่ 11. กลับไปที่ Facebook APP เอาลิงค์ไปใส่ที่ Privacy Policy URL และ User data deletion แล้วกด save changes

ขั้นที่ 12. ตรวจนี้มี Error ไม่ต้องกังวล ให้ copy key hashes ทั้งหมดใส่ notepad ไว้ก่อน กด Remove App Store ออกก่อน แล้วกด save changes

ขั้นที่ 13. มาที่เมนู App Review แล้วเลือก Permission and Features

ขั้นที่ 14. ถ้ามีหน้าต่างนี้กด Not Now

ขั้นที่ 15. ส่วนของ** Email** ถ้าเป็น Standard access อยู่ จะใช้กับ Facebook account อื่นไม่ได้ จะได้แค่ตัวเอง ให้กด get advanced access
กดแล้วต้องรอประมาณ 5-10 วินาที

ถ้าขึ้นมาแบบนี้ แสดงว่า ไม่ได้ ให้กลับไปลบ App Store ขั้นตอนที่ 12

ถ้าขึ้นมาแบบนี้ แสดงว่า ได้ ติ๊กแล้วกด Confirm มันจะถามให้ใส่ password ของ facebook 1 ครั้ง

ถ้าสำเร็จจะเป็นแบบนี้

ขั้นที่ 16. ส่วนของ** public_profile** ถ้าเป็น Standard access อยู่ จะใช้กับ Facebook account อื่นไม่ได้ จะได้แค่ตัวเอง ให้กด get advanced access
กดแล้วต้องรอประมาณ 5-10 วินาที

ทำเหมือน email

จนได้แบบนี้ ถือว่า สมบูรณ์

ขั้นที่ 17. ไปที่เมนู Setting > Basic

กดเปิดโหมด Live

จะขึ้นให้เช็คเรื่องของการใช้ข้อมูล กด Start Checkup

กด Get Started

เลือก 2 ตัวแล้วกด Continue

เลือก แล้ว กด Continue

กด Submit

ขั้นที่ 18. กดเปิดโหมด live อีกรอบ จะเปิดได้

ขั้นที่ 19. เลื่อนลงมาที่ปุ่ม + Add Platform แล้วกด

เลือก Android แล้วกด Next

เลือก Google Play แล้วกด Next

เอา Key hashes ที่ Copy ไว้มาวาง ถ้าหายแล้ว ก็ไปทำให้ที่ ส่วนที่ 1 ข้อ 7.2
ใส่ Package name, Class name ต้องพิมพ์เอานะ ห้าม Copy วางพิมพ์เสร็จแต่ละช่องกด Enter ด้วย
แล้วกด save changes

Error อยู่ไม่เป็นไร

จบกระบวนการฝั่งตั้งค่า ต่อไปจะเป็นฝั่งการเขียน Code ใน Flutter