Tìm hiểu Firebase - Phần 3

Xin chào các bạn, hôm nay chúng ta sẽ tiếp tục loạt bài tìm hiểu Firebase. Chủ đề lần này sẽ là xác thực trong Firebase với Angular.

Cài đặt Firebase trong project Angular

Tạo project Angular

Nếu bạn chưa biết tạo project Angular thì có thể đọc hướng dẫn cài đặt chi tiết trên trang chủ Angular.io

Tạo tài khoản Firebase

Bạn vào trang chủ Firebase để tạo một tài khoản miễn phí (hoặc đăng nhập nếu bạn đã có tài khoản).

Đăng nhập xong, bạn chọn Go to console (góc trên bên phải) và tạo 1 project Firebase mới.

Sau khi project được tạo thành công, bạn sẽ được đưa tới 1 trang nhìn như vầy:

Tiếp theo, bạn click vào nút Add Firebase to your web app và đăng ký 1 app mới.

Sau khi đăng ký xong, bạn click vào cái bánh răng (Settings) chọn Project Settings => General, kéo xuống phần Your apps sẽ có cái app chúng ta vừa tạo.

Trong Firebase SDK snippet, bạn sẽ tìm thấy đối tượng firebaseConfig chứa thông tin config của app.

const firebaseConfig = {
  apiKey: "<YOUR_API_KEY>",
  authDomain: "<YOUR_PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<YOUR_DATABASE_URL>.firebaseio.com",
  projectId: "<YOUR_PROJECT_ID>",
  storageBucket: "<YOUR_STORAGE_BUCKET>.appspot.com",
  messagingSenderId: "<YOUR_SENDER_ID>",
  appId: "<YOUR_APP_ID>"
};

Kết nối Firebase với project Angular

Việc tiếp theo chúng ta cần làm là thêm thông tin config ở trên vào file src/environments/environment.ts trong project Angular

export const environment = {
  firebaseConfig: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "<YOUR_APP_ID>"
  }
};

Cài đặt AngularFire2

AngularFire2 là thư viện chính thức của Firebase cho Angular. Để cài đặt,, chúng ta chạy lệnh npm install firebase @angular/fire --save.

Sau đó import các thư viện cần dùng vào file src/app/app.module.ts

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

và khai báo chúng trong phần import Module

imports: [
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule, // imports firebase/firestore, only needed for database features
  AngularFireAuthModule, // imports firebase/auth, only needed for auth features
  ...
]

Cài đặt phương thức xác thực

Đầu tiên, trong Firebase Console bạn chọn Develop => Authentication. Tiếp theo, chọn tab Sign-in method, bạn sẽ thấy danh sách các phương thức xác thực được Firebase cung cấp.

Để sử dụng một loại phương thức xác thực, bạn sẽ cần thực hiện một số bước cài đặt của nó.

Ví dụ, Facebook yêu cầu bạn cung cấp Client APP IDClient API Secret key, cũng như thêm OAuth redirect URI vào cấu hình app Facebook của bạn.

Cài đặt xác thực Facebook

Để thực hiện xác thực với Facebook, bạn cần tạo 1 Facebook App trên Facebook Developer Page.

Sau khi tạo thành công Facebook App, bạn sẽ nhận được 1 APP IDAPP Secret Key.

Bây giờ quay trở lại phần Sign-in method trong Firebase console, chọn Facebook, bật Enable rồi điền APP IDAPP Secret Key của bạn.

Cuối cùng, bạn cần copy OAuth redirect URI ở dòng cuối cùng vào Facebook App bạn vừa tạo (trong Facebook Login Product).

Cài đặt xác thực Google

Trong phần Sign-in method trong Firebase console, bạn chọn Google, bật Enable và điền email.

Project Angular

Components và route

Ứng dụng của chúng ta sẽ gồm 3 components:

  • LoginComponent - thực hiện social login và cung cấp tùy chọn đăng nhập với email và password
  • RegisterComponent - thực hiện social login và cung cấp tùy chọn đăng ký với email và password
  • UserComponent - cung cấp phạm vi truy cập dành riêng cho người dùng đã đăng nhập

Phần Routes khá đơn giản. Trong đó, chúng ta sẽ kiểm tra xem đã có người dùng đăng nhập chưa trước khi cho truy cập vào mỗi page.

export const rootRouterConfig: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AuthGuard] },
  { path: 'user', component: UserComponent,  resolve: { data: UserResolver}}
];

Authentication Service

Tiếp theo, chúng ta tạo một Authentication Service để xử lý yêu cầu đăng ký, đăng nhập, đăng xuất của người dùng. Tất cả phần logic cho việc xác thức được lưu trong service này. Điều đó giúp cho các components đỡ phúc tạp.

Chúng ta cần import 1 số class cần thiết vào service:

import { AngularFireAuth } from 'angular/fire/auth';
import * as firebase from 'firebase/app';

AuthService constructor:

constructor(public afAuth: AngularFireAuth){}

Social Login

Trong AuthService, chúng ta tạo các functions cho mỗi phương thức login tương ứng. Ví dụ, để login Facebook, chúng ta sử dụng function doFacebookLogin

doFacebookLogin(){
   return new Promise<any>((resolve, reject) => {
     let provider = new firebase.auth.FacebookAuthProvider();
     this.afAuth.auth
     .signInWithPopup(provider)
     .then(res => {
       resolve(res);
     }, err => {
       console.log(err);
       reject(err);
     })
   })
}

Nếu bạn cần lấy thêm thông tin từ người dùng (chẳng hạn như sinh nhật của họ), bạn có thể sử dụng method addScope. ví dụ: provider.addScope('user_birthday');

Đối với login với Google cũng làm tương tự. Giả sử chúng ta muốn lấy thêm thông tin về profile và email:

doGoogleLogin(){
  return new Promise<any>((resolve, reject) => {
    let provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');
    this.afAuth.auth
    .signInWithPopup(provider)
    .then(res => {
      resolve(res);
    })
  })
}

Tham khảo

Firebase Authentication with Angular