AngularJS ถึง Angular 7 และอื่น ๆ ... การเดินทางส่วนตัวของฉัน❤️☕️

ยินดีต้อนรับกลับมา👋

นี่คือความต่อเนื่องของเรื่องราวมากมายที่เริ่มต้นจากโพสต์กลางแรกนี้

เรียนรู้ Angular 7 และอื่น ๆ ... การเดินทางส่วนตัวของฉัน❤️☕

ภาพรวม

ฉันต้องการเขียนเกี่ยวกับการตรวจสอบสิทธิ์ของ Firebase แต่เพิ่งทราบว่ามีหลายส่วนที่จะครอบคลุมสิ่งนี้ ผมจึงต้องแบ่งเรื่องนี้เป็นเรื่องเล็ก ๆ เราจะเรียนรู้วิธีการตั้งค่าและสร้างส่วนประกอบของกระบวนการตรวจสอบสิทธิ์ เราจะใช้ Firebase Authentication (เข้าสู่ระบบลงทะเบียนลืมรหัสผ่านและยืนยันการรีเซ็ต) นอกจากนี้ให้ดูวิธีการเขียนลงใน Firestore และล็อกข้อมูลนั้นโดยใช้กฎความปลอดภัย

ทำไมคุณทำเช่นนี้?

ไม่มีงานเขียนทางอินเทอร์เน็ตเกี่ยวกับแนวคิดนี้หรือไม่?

ใช่. ฉันสามารถค้นหาบทความมากมายที่อธิบายวิธีใช้signInWithPopup แต่ไม่สามารถหาการสอนรายละเอียดเกี่ยวกับวิธีการใช้signInWithRedirect นี่เป็นหนึ่งในเหตุผลที่ฉันเลือกเขียนสิ่งนี้ ไม่ต้องพูดถึงมันเป็นส่วนหนึ่งของการเดินทางของฉันที่ฉันต้องการจัดทำเอกสาร

เรากำลังจะทำตามขั้นตอนแรกและเริ่มต้นด้วยการตั้งค่า Firebase / AngularFire 😃

ข้อกำหนดเบื้องต้น

ฉันกำลังเริ่มเรื่องราวนี้โดยสมมติว่าคุณได้สร้างโครงการ Angular ของคุณ หากคุณต้องการการทบทวนคุณสามารถอ่านเรื่องราวของฉันได้ตลอดเวลา“ เริ่มต้นใช้งาน ”

ฉันจะสร้างโครงการที่ฉันกล่าวถึงในเรื่อง“ หน้ายินดีต้อนรับ ”

ทุกคนพร้อมหรือยัง? เอาล่ะมาเริ่มกันเลย…

การตั้งค่า Firebase / AngularFire

สิ่งแรกที่เราต้องทำคือติดตั้งแพ็คเกจของเรา เปิดคอนโซลและรันคำสั่งต่อไปนี้:

npm install @angular/fire@^5.1.3 firebase@^5.8.6 --save

ทำไมAngularFire …ฉันทำสิ่งนี้กับFirebaseไม่ได้ แน่นอนว่าคุณทำได้ แต่ฉันสนุกกับการใช้ AngularFire มันรวมการสังเกต RxJS และรูปแบบปฏิกิริยาอื่น ๆ กับ Firebase สิ่งเหล่านี้ไม่สามารถใช้ได้ตามค่าเริ่มต้นใน vanilla Firebase

ตั้งค่าโครงการ Firebase

ไปที่Firebase Consoleแล้วคลิกโครงการหรือ "เพิ่มโครงการ"

เพิ่มโครงการใหม่

ทำตามวิซาร์ดการตั้งค่าและเมื่อเสร็จสิ้นคุณจะได้รับข้อความแจ้งให้เพิ่ม Firebase ในแอปพลิเคชันของคุณ

เราจะดำเนินการตามกระบวนการสองขั้นตอน:

โครงการที่มีอยู่

หากคุณมีโปรเจ็กต์ที่สร้างไว้แล้วคุณจะต้องไปที่แท็บ“ ทั่วไป” ใต้“ การตั้งค่าโปรเจ็กต์” …ฉันจะไปที่นั่นได้อย่างไร?

หากคุณมีการตั้งค่าแอพอยู่แล้วคุณจะเห็นหน้าจอดังภาพด้านล่าง คัดลอกข้อมูล firebaseConfig:

มิฉะนั้นคุณจะเห็นหน้าจอเหมือนภาพด้านล่าง ทำตามขั้นตอนที่อธิบายไว้ข้างต้นใน"เพิ่มโครงการใหม่"

เพิ่มข้อมูลรับรองสภาพแวดล้อม Firebase ในโครงการของคุณ

เราได้คัดลอกข้อมูล firebaseConfig ไปยังคลิปบอร์ด เราจะวางสิ่งนี้ไว้ที่ไหนในโครงการของเรา?

ภายในโฟลเดอร์src/environmentsเรามีสองไฟล์:

• environment.ts
• environment.prod.ts

export const environment = {
    production: false,
    firebase: {
        apiKey: '<your-key>',
        authDomain: '<your-project-authdomain>',
        databaseURL: '<your-database-URL>',
        projectId: '<your-project-id>',
        storageBucket: '<your-storage-bucket>',
        messagingSenderId: '<your-messaging-sender-id>',
        appId: '<your-app-id>'
   }
}

ตอนนี้นำเข้าโมดูล Firebase ที่เราต้องการและการอ้างอิงสภาพแวดล้อมลงในapp.module.tsของเรา

// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
// Environments
import { environment } from '../environments/environment';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule,
  AngularFireAuthModule,
  SharedModule,
  AppRoutingModule
]

สาขาที่เก็บ

สรุป

ขอบคุณที่สละเวลาอ่านเรื่องราวของฉันและหากคุณเป็นผู้ติดตามฉันก็ขอบคุณ❤️

หากคุณชอบบทความนี้โปรดปรบมือให้👏!

เรื่องราวต่อไปจะกล่าวถึงวิธีการสร้าง HTML / CSS สำหรับหน้าการตรวจสอบสิทธิ์ต่างๆของเรา จับตาดูลิงค์