【實作紀錄】Firebase簡訊登入(身分驗證) ╳ Angular

Firebase可以透過簡訊登入，只要在程式碼中寫好簡訊寄送的Funtion以及身分驗證的Function就可以完成。

前置設定

1.新增一個Firebase專案

備註：我沒有啟動分析功能

2.建立一個新的angular專案

ng new MyApp

3.用VSCode開啟剛剛建立的angular專案，並npm安裝firebase

npm install firebase --save

4.拿到Firebase專案的Config設定檔

主要是這一段

var firebaseConfig = {
   apiKey: “”,
   authDomain: “”,
   projectId: “”,
   storageBucket: “”,
   messagingSenderId: “”,
   appId: “”
 };

5.把Firebase的Config加到程式碼中

最後在main.ts加上 下面這段。

var firebaseConfig = {
   apiKey: “”,
   authDomain: “”,
   projectId: “”,
   storageBucket: “”,
   messagingSenderId: “”,
   appId: “”
 };
firebase.initializeApp(environment.firebaseConfig);

目前為止就算是接上Firebase了，再來是簡訊登入的部分

簡訊登入

1.Firebase設定(要先啟動簡訊功能)

回到主控台後點選Authentication(紫色那塊)，之後點擊開始使用

啟用電信業者

Firebase網頁，簡訊驗證的部分設定好了，再來就是寫Code了

2.Code

這部分主要需要一個HTML搭配TS，以及一個Service。

HTML的部分需要創建一個id對應到用RecaptchaVerifier建立的Button

<button
    id="sign-in-button"
    class="sign-in-button" 
    type="submit" 
    (click)="btnOnClick()"
>
    送出
</button>

Service(LoginService)負責回傳window的參考

import { Injectable } from ‘@angular/core’;
@Injectable({
  providedIn: ‘root’
})
export class LoginService {
    constructor() { }
    get windowRef(){
        return window;
    }
}

至於為什麼要傳window的參數而不直接操作window？

因為Angular並不是只設計來給你的瀏覽器跑，而可能還可以是手機或是Server，這時候你的window可能就會不起作用，所以比較好的解決方式是透過依賴注入來完成。

(參考)

再來是最重要的TS

1.先import需要用到的庫

import * as firebase from 'firebase/app'; 
//這是剛剛建的Service，負責回傳window的參考
import { LoginService } from 'src/app/service/login.service';

2.宣告待會會用到的變數

phoneNumber = '';
windowRef: any;
constructor(
    public loginService:LoginService
) { }

3.ngOnInit()時建立出簡訊驗證所需要的物件

這邊要注意firebase.auth.RecaptchaVerifier的第一個參數需要對應到剛剛HTML的某個物件id，否則會報錯

Error: reCAPTCHA container is either not found or already contains inner elements

ngOnInit(){
  this.windowRef = this.loginService.windowRef
  this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(‘sign-in-button’, {
  size: ‘invisible’,
});
}

4.寄送簡訊

這邊phoneNumber要注意，如果你手機號碼是0989123456，那麼phoneNumber的值必須是"+886989123456"。

sendLoginCode(){
  const appVerifier = this.windowRef.recaptchaVerifier;
  firebase.auth()
    .signInWithPhoneNumber(this.phoneNumber, appVerifier)
    .then(result => {
      this.windowRef.confirmationResult = result;
      console.log(‘簡訊已寄出’,this.phoneNumber)
    })
    .catch( error => console.log(‘發簡訊失敗’, error) );
}

5.驗證身分

收到簡訊後，將收到的號碼填上去之後要知道有沒有正確

this.windowRef.confirmationResult
    .confirm(this.inputArray.join(‘’))
    .then( result => {
        console.log(‘登入成功’,result);
        this.router.navigateByUrl(‘/home/HomeOverview’);
    })
    .catch( error => 
        console.log(error, “Incorrect code entered?”)
    );

到目前就算是完成簡訊登入的基本功能了，還有一些東西可以參考官方文檔。

像是：啟用機器人驗證、ApplicationVerifier的參數規則、signInWithPhoneNumber Function的使用方式

簡訊登入補充

在短時間傳給同一個號碼簡訊驗證碼數次會被鎖定，那這樣你就要換個號碼或是等一段時間了。

Error補充

core.js:6210 ERROR TypeError: Cannot read property ‘RecaptchaVerifier’ of undefined
  at LoginParseComponent.ngOnInit (login-parse.component.ts:23)
  at callHook (core.js:2573)
  at callHooks (core.js:2542)
  at executeInitAndCheckHooks (core.js:2493)
  at refreshView (core.js:9495)
  at refreshEmbeddedViews (core.js:10605)
  at refreshView (core.js:9504)
  at refreshComponent (core.js:10651)
  at refreshChildComponents (core.js:9277)
  at refreshView (core.js:9530)

解決方法

在有使用到firebase.auth.RecaptchaVerifier的ts上引入庫

import ‘firebase/auth’;