Flutter: Facebook Login โดยไม่ต้องผ่าน Firebase
Published: 2022-08-29 16:12:34

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

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6blygeu2vhiq8temj0x.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5biasisn2md9adhcacfw.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obde3g0dqvy2eqx2l2uy.png)

ขั้นที่ 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h8x1k5q4suh0yncx67k.png)

ขั้นที่ 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](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 ออกมา
   ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwh0ywkio17o4mwegg7d.png)

- ขั้นที่ 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 ](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" = "dsmr.apps@gmail.com",
  "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](pdpa.pro)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk6lhyhfuae6x9v3cuar.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt89toxqlnqgrnky1m1i.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dtqmarkufy8fzk6rkfs.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ks5woloqsoqwt3y2qg5.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr72uva4vryvbubf90rg.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zp3bsei08t7vi8vxbmw.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2isfuvw9ttrlueol54z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnms5wrl285rfbpiuzis.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/astuhkcrq5l3j6z49ev1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o365ls46y4qfforjd6c.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx6npv966idycij8avv2.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nvsy4cubflzorohi2g4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w0ioxd6upzupkj5tb7r.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohjzle3a7c31v129vpc2.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uywdn25m2bzw554m4i9t.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tixm1i1axn3ags9cm1h.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdmm8ixkommk51vkp0cn.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7wog3v6il56a96bkd18.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqo3l431ucgj68au3h9x.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7fpxbrnm35lfiaa0ww0.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do5mwbtazs1ha5lpltzo.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz1mdvolslyyxyipckwy.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqhrracujiy33bnrmgmj.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zuia9g47s8se8gltoq6.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtb6oqa81xazb63tjjjr.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ljzp3yuk4v2ewoyo3ep.png)

ทำเหมือน email

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9710cl6rwl7a32s39zmc.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6letwcz4eh1kcll80j58.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gsh83co3k81yakv51go.png)

กดเปิดโหมด Live

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr8ru9z9e92o9v9be978.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcka6siaa7gfqh6t708q.png)

กด Get Started

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nlj21dkrqpxpmx8x6jt.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu4r4ey7qqxdovem6s1d.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpd55dc4brch3dumtkw2.png)

กด Submit

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfw2slxsmwefqgfas7mh.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv2270nixx3mw11blhy1.png)


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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50f6v5jjang4zvkj8yln.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdyxzkzlufoy3fnnsde2.png)

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av4uu8foghsv6gwk12wl.png)

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