AngularJS đến Angular 7 và hơn thế nữa… hành trình cá nhân của tôi ❤️☕️

Chào mừng trở lại 👋

Đây là phần tiếp theo của nhiều câu chuyện mà tất cả đều bắt đầu từ bài đăng đầu tiên trên Medium.

Học Angular 7 và hơn thế nữa… hành trình cá nhân của tôi ❤️☕

Tổng quat

Tôi muốn viết về Xác thực Firebase nhưng nhận ra rằng có rất nhiều phần phải đề cập đến vấn đề này. Vì vậy, tôi cần chia nhỏ điều này thành những câu chuyện nhỏ hơn. Chúng ta sẽ học cách thiết lập và xây dựng các thành phần của quy trình xác thực. Chúng tôi sẽ sử dụng Xác thực Firebase (Đăng nhập, Đăng ký, Quên mật khẩu và Xác nhận Đặt lại). Ngoài ra, hãy tìm hiểu cách ghi vào Firestore và khóa dữ liệu đó bằng cách sử dụng các quy tắc bảo mật.

Tại sao anh làm điều này?

Không có bài viết nào trên Internet về khái niệm này?

Đúng. Tôi đã có thể tìm thấy rất nhiều bài báo mô tả cách sử dụng signInWithPopup. Tuy nhiên, không thể tìm thấy hướng dẫn chi tiết về cách sử dụng signInWithRedirect . Đây là một trong những lý do tôi chọn viết bài này. Chưa kể đó là một phần hành trình của tôi mà tôi muốn ghi lại.

Chúng tôi sẽ thực hiện các bước nhỏ và bắt đầu thiết lập Firebase / AngularFire 😃

Điều kiện tiên quyết

Tôi đang bắt đầu câu chuyện này giả sử bạn đã tạo dự án Angular của mình. Nếu bạn cần bồi dưỡng, bạn luôn có thể đọc câu chuyện của tôi, “ Bắt đầu ”.

Tôi sẽ xây dựng dựa trên dự án mà tôi đã đề cập trong câu chuyện, “ Trang chào mừng ”.

Bạn đã sẵn sàng chưa? Được rồi, hãy bắt đầu…

Thiết lập Firebase / AngularFire

Điều đầu tiên chúng ta cần làm là cài đặt các gói của mình. Mở bảng điều khiển và chạy lệnh sau:

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

Tại sao AngularFire … tôi không thể làm điều này với Firebase ? Chắc chắn bạn có thể, nhưng tôi thích sử dụng AngularFire. Nó tích hợp khả năng quan sát RxJS và các mẫu phản ứng khác với Firebase. Những thứ này không có sẵn theo mặc định trong vani Firebase.

Thiết lập dự án Firebase

Chuyển đến Bảng điều khiển Firebase của bạn và nhấp vào dự án của bạn hoặc "Thêm dự án".

Thêm dự án mới

Làm theo hướng dẫn thiết lập và khi hoàn tất, bạn sẽ nhận được lời nhắc thêm Firebase vào ứng dụng của mình.

Chúng tôi sẽ thực hiện quy trình gồm hai bước:

Dự án hiện tại

Nếu bạn đã có một dự án đã được tạo, bạn sẽ cần phải chuyển đến tab “Chung” trong “Cài đặt Dự án”… làm cách nào để truy cập?

Nếu bạn đã thiết lập ứng dụng, bạn sẽ thấy một màn hình như hình bên dưới. Sao chép thông tin firebaseConfig:

Nếu không, bạn sẽ thấy một màn hình như hình bên dưới. Làm theo các bước được mô tả ở trên trong “Thêm dự án mới”

Thêm thông tin đăng nhập môi trường Firebase vào dự án của bạn

Chúng tôi đã sao chép thông tin firebaseConfig vào khay nhớ tạm. Chúng tôi đặt nó ở đâu trong dự án của chúng tôi?

Bên trong thư mục, src/environmentschúng tôi có hai tệp:

• môi trường.ts
• môi trường.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>'
   }
}

Bây giờ, hãy nhập các mô-đun Firebase chúng ta cần và tham chiếu môi trường vào app.module.ts của chúng ta

// 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
]

Chi nhánh kho lưu trữ

Phần kết luận

Cảm ơn bạn đã dành thời gian đọc truyện của tôi và nếu bạn là người theo dõi tôi rất biết ơn ❤️.

Nếu bạn thích bài viết này, vui lòng xem xét vỗ tay 👏!

Câu chuyện tiếp theo sẽ đề cập đến cách tạo HTML / CSS cho các trang xác thực khác nhau của chúng tôi. Theo dõi liên kết.