2018年10月23日 星期二

【Ionic 4】防止任意存取頁面—Angular路徑保護機制Route Guards

Firebase提供email登入與註冊功能,前文(【Ionic 4】新頁面瀏覽機制:Angular Router)就註冊做介紹,一旦註冊成功,後續便可直接登入,進入個人頁面,例如dashboard等。然而,在Angular Router機制下,Ionic apps各個頁面皆有直接存取路徑,如'/login', '/dashboard';只要輸入路徑便可前往該頁面。因此,必須有保護路徑的情境設定,例如'/dashboard'要在登入之後才允許進入。Angular Router提供了route guards,如CanActivate等界面(interface),透過實做(implement)這些界面,便可達到保護路徑的目的。底下以Firebase登入/註冊,以及個人dashboard三個頁面為例,說明Route Guards的使用方式。

本文使用套件@angular 6.1.1,@angular/fire 5.0.2與firebase 5.5.4。@ionic-angular版本則為4.0.0-beta.12。完整專案詳見GitHub專案

2018年10月11日 星期四

【Ionic 4】會員Email註冊-以Firebase為雲端平台(含FormBuilder表單與輸入驗證)

Firebase支援「Email/密碼登入與註冊」以及多種OAuth登入方式,如Google,Twitter,Facebook等,本文說明如何使用Firebase「Email/密碼」認證API,設計會員Email註冊功能。除此之外,註冊表單則以Reactive Forms(FormBuilder)設計,並帶有輸入驗證功能,如下圖所示。
有驗證功能的註冊表單。註冊與登出都是使用Firebase認證API
此App有註冊、HomePage兩個頁面。首頁設定為註冊頁面,註冊後,會在Cloud Firestore新增會員資料,並轉往HomePage;在HomePage按下登出又會回註冊頁面。完整程式碼在Github。製作重要步驟如下:

2018年10月6日 星期六

【Firebase】使用cloud functions建立「自動遞增」資料欄位

Firebase是專為行動應用打造的雲端平台,雖有其收費機制,但仍有提供部份免費流量。加上Angular 6也已將Firebase資料庫存取的程式碼納入專案中(@angular/fire,原為angularfire2套件),故以ionic-angular為主體的Ionic 4 App,拿Firebase做為雲端資料庫平台,在開發上可說十分方便。

然而,Firebase新版資料庫Cloud Firestore屬於NoSQL文件資料庫(No SQL document database),運作方式與傳統關聯式資料庫有所不同。其中最大的差異之一是Firestore沒有「自動遞增」,而是以亂數編碼產生unique id。

因此,一旦需要類似員工編號這類不能重複的流水號,在firestore資料庫裡便要自行建立「自動遞增」(auto increment) 機制。本文將介紹以cloud functions實做database trigger,在新增一筆文件時,便會觸發cloud function,在文件加入編號欄位,同時更新流水號。

前置動作
需先至Firebase控制台新增專案,並啟用Cloud Firestore資料庫。進入Firestore資料庫建立counters集合,在其下新增文件users,內有count欄位;該欄位用來儲存自動遞增流水號。另外,也建立users集合,如下圖所示:
在Firestore建立couters/users文件,內有count欄位,用以儲存自動遞增流水號

2018年10月1日 星期一

【Ionic 4】新頁面瀏覽機制:Angular Router

新版Ionic 4在頁面瀏覽(navigation)機制方面加入了Angular Router,連帶頁面權限方面也可使用Router的CanActivate等機制進行控管;Ionic舊版的push/pop方式雖仍可使用,但預期未來應不會再支援。

(本文範例完整程式碼與執行結果可參考stackblitz.com上的專案程式碼與執行結果)

新建使用Angular Router的Ionic 4專案
為了讓新建專案使用Angular Router,Ionic CLI 4版加入新選項--type=angular。新建專案時加入此選項,便會建立Angular Routing模組檔,內有瀏覽頁面相關設定,例如新建專案:
ionic start RoutingExample blank --type=angular
則會建立模組檔: src/app/app-routing.module.ts,內有預設頁面瀏覽路徑設定:
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];