ใช้งาน Firebase Authentication จัดการระบบสมาชิกใน Flutter

เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee
firebase authentication firebase flutter

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ firebase authentication firebase flutter

ดูแล้ว 3,960 ครั้ง




สำหรับเนื้อหานี้จะเป็นแนวทางการประยุกต์อีกรูปแบบ
ของระบบสมาชิก ที่เราไม่จำเป็นต้องมี server ของตัวเอง ไม่
ต้องมี REST Api รองรับระบบสมาชิก เพียงใช้งานการจัดการของ 
Firebase ระบบช่วยพัฒนา app ของ google  ซึ่งต่างจากบทความ
ในตอนที่แล้ว ที่เราต้องการจัดการระบบสมาชิกด้วย server ของเราเอง
ทบทวนบทความตอนที่แล้วได้ที่
    ประยุกต์ระบบ Register Login ผ่าน API บน server ใน Flutter http://niik.in/1060 
 
แน่นอนว่าทั้งสองแบบก็มีความแตกต่าง ทั้งจุดประสงค์ของการใช้งาน และวิธีการใช้ ดังนั้น
วิธีนี้จึงไม่ใช่การแทนที่อีกรูปแบบ แต่เป็นเพียงอีกทางเลือกสำหรับการพัฒนา  การใช้งาน 
Firebase จัดการเรื่อง Authentication หรือระบบสมาชิกอย่างง่าย ยังรองรับรูปแบบการทำงาน
ทั้งระบบสมาชิกผ่านอีเมลและรหัสผ่าน ระบบสมาชิกผ่านเบอร์โทร หรือแม้แต่ระบบสมาชิกผ่าน
โซเชียลต่างๆ เช่น facebook google twitter เป็นต้น แต่ในเนื้อหานี้เราจะใช้งานแค่รูปแบบ
ระบบสมาชิกผ่าน อีเมลและรหัสผ่าน ซึ่งก็คล้ายกับรูปแบบของบทความก่อนหน้า ที่ได้แนะนำไป
 
    เนื้อหาในตอนนี้จะเป็นการเตรียมพร้อมก่อน จะประยุกต์ใช้งานในตอนหน้า 

 
 

เข้าใช้งาน Firebase และสร้างโปรเจ็ค Firebase

    เริ่มต้นเราต้องมีโปรเจ็ค firebase สำหรับใช้งานก่อน ให้เราเข้าใช้งานได้เที่ 
https://firebase.google.com/ จากนั้นไปที่หน้า console เพื่อเพิ่มโปรเจ็คใหม่
 
    ทำตามลำดับตามรูปด้านล่าง เมื่อล็อกอินและเข้ามายังหน้า console แล้วก็กดเพิ่มโปรเจ็คใหม่
 
 



 
    ตั้งชื่อโปรเจ็คตามต้องการ
 
 



 
 
    ในที่นี้ไม่ใช้งานร่วม google analytics
 
 



 
 
    เพิ่มโปรเจ็คเสร็จแล้ว ก็จะได้หน้าแรกของโปรเจ็คดังรูป (หน้าตาอาจเปลี่ยนไป)
 
 


 
 
 

เปิดใช้งานรูปแบบ Authentication

    ต่อไปเลือกรูปแบบ Authentication ที่จะใช้งาน ทำตามรูปด้านล่างตามลำดับ ในที่นี้เราจะใช้ระบบสมาชิก
แบบ อีเมลและรหัสผ่าน
 
    เลือกเมนู Authentication และกดเลือก Get Start
 
 


 
 
    เลือกแท็บ Sign in method เป็น อีเมลและรหัสผ่าน Email/Password
 
 


 
 
    เปิดใช้งาน Email/Password แล้วกดบันทึก
 
 



 
    ระบบสมาชิกจะแสดงข้อมูลสมาชิกในแท็บ Users ตอนนี้ยังไม่มีข้อมูล 
 
 

 
 
 

ตั้งค่าการเพิ่ม Firebase ไปใช้งานใน App

    ก่อนเข้าไปตั้งค่าส่วนนี้ เรามาดูส่วนที่ต้องใช้งาน หรือไฟล์และพาท์ธที่เกี่ยวข้องกับการตั้งค่า ให้เรามาที่
โปรเจ็ค flutter ของเรา  
 
 


 
 
    สิ่งที่ต้องมีและต้องทำ สำหรับตั้งค่าคือ
    - platform ที่จะพัฒนา เช่น android หรือ ios หรือ web ในที่นี้เราจะดูส่วนของ android 
    - app package ดูได้จากในไฟล์ build.gradle ไฟล์ลูกศรแรก 
 
    android > app > build.gradle
 
    ในที่นี้คือ com.example.test_drive
 
 


 
 
    ไฟล์จากลูกศรด้านบนในรูป คือส่วนที่เราจะแก้ไข และเพิ่มเข้ามา
 
ส่วนที่จะแก้ไข
 
    android > app > build.gradle
    android > build.gradle
 
ส่วนที่จะเพิ่มเข้ามา
 
    android > app > google-services.json
 
 
    เข้าสู่ขั้นตอนการเพิ่ม Firebase ให้ใช้งานร่วมกับ app ตามลำดับดังนี้
    หน้าโปรเจ็ครวม ให้เราทำการเลือก เพิ่ม app ใหม่ ตาม platform ที่ต้องการ ในที่เราเลือก android ไอคอนตรงกลาง อันที่สอง
 
 



 
 
    จะมีขั้นตอนให้เราทำตาม ให้เราใส่ชื่อ package ของเรา และก็ชื่อที่จะใช้  แล้วกด Register app
 
 



 
 
    ขั้นตอนต่อมา ให้เราดาวน์โหลดไฟล์การตั้งค่า ชื่อ google-services.json จากนั้น
นำไปดังกล่าวไปไวในตำแหน่ง เหมือนตัวอย่างในรูปด้านบน
 
    android > app > google-services.json
 
 



 
 
    ขั้นตอนต่อไป เพิ่ม Firebase SDK ในไฟล์ build.gradle  เลือกเป็น  build.gradle
 
 


แทรกส่วนแรก plugins ไว้ด้านบนสุด

    android > build.gradle
 

plugins {
  // ...

  // Add the dependency for the Google services Gradle plugin
  id 'com.google.gms.google-services' version '4.4.2' apply false

}
 
     และส่วนสุดท้าย ในไฟล์  build.gradle  เพิ่มตำแหน่งตามตัวอย่าง
 
    android > app > build.gradle
 
 



plugins {
    id "com.android.application"
    id "kotlin-android"
    // The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
    id "dev.flutter.flutter-gradle-plugin"
    id 'com.google.gms.google-services'
}

dependencies {
  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:33.1.2')


  // TODO: Add the dependencies for Firebase products you want to use
  // When using the BoM, don't specify versions in Firebase dependencies
  // https://firebase.google.com/docs/android/setup#available-libraries
}
 
    จากนั้นกด next เป็นอันเสร็จขั้นตอน แล้วกลับไปหน้าหลัก console
 
 



 
 
    ก็จะมีรายการ app ที่เราเพิ่งเพิ่มเข้าไป ตามรูป ในตัวอย่างชื่อว่า TestDrive
 
 

 
 

 

ติดตั้ง Firebase Package

    ขั้นตอนต่อไป เราจะต้องทำการติดตั้ง package สองตัว ในไฟล์ pubspec.yaml คือ
 
dependencies:
  firebase_core: ^3.3.0
  firebase_auth: ^5.1.3
 
    เวลาใช้งานก็ import ไปใช้ดังนี้
 
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
 
 
    เป็นอันเสร็จเรียบร้อย สำหรับขึ้นตอนการเตรียมความพร้อมสำหรับใช้งาน Firebase Authentication
ตอนหน้าจะมาดูการประยุกต์ใช้งาน กับระบบสมาชิก รอติดตาม


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง






เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ