2021

Angular 與 Firebase

使用Firebase

前言

目前使用版本: 8.2.5

官方文件: https://firebase.google.com/docs/auth/web/firebaseui

安裝

Using Firebase via CDN

./src/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js"></script>

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

新建一個config檔案: src/app/xxx_config.ts

1
2
3
4
5
6
7
8
9
10
export const firebaseConfig:object = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

./src/app/logging-page/logging-page.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { firebaseConfig } from '../xxx_config';

export class LoggingPageComponent implements OnInit {

    constructor() {}
    
    @Input() firebaseConfig: object;

    ngOnInit(): void {
        const firebase = globalThis.firebase;
        const firebaseui = globalThis.firebaseui;
        firebase.initializeApp(firebaseConfig);
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        //...
        var uiConfig = {
            //...
            signInSuccessUrl: '/setting',
        }
        ui.start('#firebaseui-auth-container', uiConfig);
        
    }    
    
}

./src/app/logging-page/logging-page.component.html

1
<div id="firebaseui-auth-container" class="self-center"></div>

Using Firebase via NPM

1
$ npm install firebaseui --save
1
2
var firebase = require('firebase');
var firebaseui = require('firebaseui');

實作

在Angular使用Firebase

1
2
$ npm install firebase --save
$ npm install firebaseui --save

在需要使用auth的component中引入firebase模組

1
2
import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';

./src/app/logging-page/logging-page.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import { firebaseConfig } from '../xxx_config';

export class LoggingPageComponent implements OnInit {

    constructor() {}
    
    @Input() firebaseConfig: object;

    ngOnInit(): void {
        // const firebase = globalThis.firebase;
        // const firebaseui = globalThis.firebaseui;
        firebase.initializeApp(firebaseConfig);
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        //...
        var uiConfig = {
            //...
            signInSuccessUrl: '/setting',
        }
        ui.start('#firebaseui-auth-container', uiConfig);
        
    }    
    
}

將firebaseui.css建立在 ./src/assets/ 下，才能夠直接被Angular的index.html引用

./src/index.html

1
<link rel="stylesheet" href="assets/firebaseui.css">

自訂FirebaseAuth介面

由於Angular在component中的scss會編譯為scoped css，會抓不到像是 .firebasui-container這樣的元件，因此要將code寫在styles.scss這個檔案中，才會被編譯為全域css。

./src/styles.scss

1
2
3
4
5
#firebaseui-auth-container{
  .firebaseui-container {
    box-shadow: none;
  }
}
閱讀全文