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

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

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



สำหรับเนื้อหานี้จะเป็นแนวทางการประยุกต์อีกรูปแบบ
ของระบบสมาชิก ที่เราไม่จำเป็นต้องมี 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 analytic
 
 



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


 
 
 

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

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


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


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



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


 
 
 

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

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


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


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



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



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



 
 
    ขั้นตอนต่อไป เพิ่ม Firebase SDK ในไฟล์ build.gradle
 
    android > build.gradle
 
    เพิ่มส่วนของ classpath ในรูปจะเป็นข้อความสีเขียว ไปยังตำแหน่งตามตัวอย่าง
 
 



 
 
    ตัวอย่างที่เราเพิ่ม
 
 



 
 
    และส่วนสุดท้าย ในไฟล์  build.gradle
 
    android > app > build.gradle
 
 



 
 
    โดยส่วนของ apply plugin เพิ่มบรรทัดนี้ลงไป
 
apply plugin: 'com.google.gms.google-services'
 
    และส่วนของ dependencies เพิ่มบรรทัดนี้ลง
 
    // Import the Firebase BoM
    implementation platform('com.google.firebase:firebase-bom:29.0.0')
 
    จากนั้นกด next เป็นอันเสร็จขั้นตอน แล้วกลับไปหน้าหลัก console
 
 



 
 
    ก็จะมีรายการ app ที่เราเพิ่งเพิ่มเข้าไป ตามรูป
 
 

 
 

 

ติดตั้ง Firebase Package

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


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



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









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



Tags:: firebase flutter firebase authentication







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ