Google Firebase
Google的Firebase是個前端工程師很好用的工具，他可以讓前端工程師省去後端資料庫的建立而可以專注在前端的開發，這裡面有身份驗證、realtime資料庫等好用的功能，只要是拿來做開發，而流量不大的話，通常你都不會達到需要付費流量。
Firebase auth 以Email/password 為例
可以先到firebase官網看一下的 Authentication 頁面，Get start中有提供範例code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...這裡面呢放上的東西可以參考上面那行網址，
簡單來說就是你在firebase(https://firebase.google.com/)
建立新專案時並且建立後會出現的一些資料，按照這些資料填入即可
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
//
|
要如何找到firebaseConfig裡面的資料？點到下圖的這個地方，右邊拉到底，新增一個網頁應用程式後就會出現相對應的api key。
而後記得在左側的建構建立一個authication服務，然後在右側sign-in method去新增供應商，選擇電子郵件/密碼後在左邊users設定你想要登入的帳號密碼(這是比較陽春的方式，你可以在網路上找一下透過網頁要求建立帳號密碼)
而剛剛上面的code，只是把firebase先初始化以及把auth資訊先準備好，接下來要呼叫登入的API。
email/password登入
登入
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
|
如果有需要創建帳號的code，在同個網頁也有
創建帳號
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
|
登出
1
2
3
4
5
6
7
8
| import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
|
登入後
執行完登入後，要怎麼知道是不是真正登入？
可以點開瀏覽器的開發者工具裡面的儲存空間如下，如果再相對應的位置有找到寫有你之前填入的API Key就代表登入成功，而且他還幫你存在暫存裡面。