---
# System prepended metadata

title: 第三方登入系統 - Google 登入
tags: [筆記]

---

---
tags : 筆記
---
# 第三方登入系統 - Google 登入
利用 Firebase 來儲存登入的資料，且可以直接從 Firebase SDK 中的 function 來取得會員資料。

# 建立 Firebase 專案
進入 [Firebase](https://firebase.google.com/) 的頁面並且登入帳號，即可新增專案

![新增專案](https://i.imgur.com/auyVR8x.png)

專案新增完後，首頁上將會看到新增應用程式的訊息，點選表示「網頁」的 icon 就會開始新增網頁應用程式

![點擊 icon](https://i.imgur.com/xyca8yr.png)

輸入完應用程式暱稱並新增完成後，就會看見我們所要在網頁上要引用的 Firebase SDK 了

![Firebase SDK](https://i.imgur.com/EFmteq3.png)

照著說明複制這一段的程式碼至 HTML 檔案中的 **<body>** 的最下方處

```htmlembedded=
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-analytics.js"></script>
<script type="module">
    let firebaseConfig = {
        apiKey:
        authDomain:
        projectId:
        storageBucket:
        messagingSenderId:
        appId:
        measurementId:
    };

    firebase.initializeApp(firebaseConfig);
</script>
```

# 開通 Google Authentication 功能
Firebase 專案及應用程式建立完後，從左側選單點選「Authentication」，接著右側會出現「設定登入方式」的按鈕

![設定登入方式](https://i.imgur.com/YpWCh0b.png)

接著點選「Google」，來進行設定

![Google登入](https://i.imgur.com/v8BXrWW.png)

除了「Google登入」還有許多的登入方式，可進行設定

![許多的登入方式](https://i.imgur.com/JG0O8gW.png)

頁面再往下拉，出現「已授權網域」的列表

![已授權網域](https://i.imgur.com/IktmHSo.png)

在以下的網域才可以進行使用 Firebase Auth 的功能，如果不在這份列表內的網域一律會報錯，如果要新增網域，點選右上角的「新增網域」，即可新增網域

> [name=目前為止引用了 SDK ，開啟了 Auth 功能以及設定可使用的網域，接著就要寫程式碼來使用了]

# Google 登入
Google 的登入有二種模式，一種是跳出一個 Popup 的視窗，在視窗中讓使用者登入自己的 Google 帳號；另一種是原頁跳轉到 Google 的登入頁面，登入後回到原始頁面用 function 去取得使用者資料，我所使用的是使用 Popup 的視窗來進行登入

### **Popup 介面**

![Popup 介面](https://i.imgur.com/7zrS5ws.png)

### **Popup 範本**

```javascript=
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
    let credential = result.credential;
    let token = credential.accessToken;
    let user = result.user;
}).catch(error => {
    let errorCode = error.code;
    let errorMessage = error.message;
    let email = error.email;
    let credential = error.credential;
}); // Error Data
```

user 是使用者的資料，可以將一部分資料抓下來儲存到資料庫當中

```
user.displayName: 顯示名稱
user.email: 電子信箱
user.emailVerified: 這個電子信箱是否有驗證
user.photoURL: 頭像的路徑
user.uid: Firebase Auth 派給這個使用者的 User ID
```

## 介面

因為我只用 Google 登入，所以需要的標籤比較少。

### 登入

只有一個使用 Google 登入的按鈕，但是看起來有點空虛，所以又加了兩個不能用的輸入框來美化介面

![登入介面](https://i.imgur.com/dKVwLlo.png)

```htmlembedded=
<button id="signIn" type="button" class="btn waves-effect green"><i class="fa fa-google-plus"></i> Google 登入</button>
```

### 登入成功

歡迎標題、用戶資訊、登出 / 刪除帳號鈕，這邊有的東西就比較多了，更詳細的程式碼後面會寫到

![登入成功介面](https://i.imgur.com/XO3nTst.png)

```htmlembedded=
<h4><i class="fa fa-snowflake-o"></i> 歡迎 !!! ${name}</h4>
<div class="card white">
    <div class="card-content blue-text">
        <img src="${image}" class="photo">
        <p>你的名稱：${name}</p>
        <p>你的 Email ：${email}</p>
        <p>Email 是否已驗證：${emailVerified}</p>
    </div>
    <div class="card-action">
        <button class="btn waves-effect indigo" onclick="SignOut();">登出</button>
        <button class="btn waves-effect red" onclick="DeleteUser();">刪除帳號</button>
    </div>
</div>
```

## 函數

總共要做三種功能：登入、登出、刪除帳號

### 登入

由 Popup 的範本再做延伸

```javascript=
// SignIn
let SignIn = () => {
    firebase.auth().signInWithPopup(providerGoogle).then(e => { 
	e.credential.accessToken; 
	const n = e.user;    // 全部的資料，為 Json 檔
	const name = JSON.stringify(n.displayName).replace('"',"").replace('"',"");    // 取得帳戶的名稱，並且刪除 ""
	const email = JSON.stringify(n.email).replace('"',"").replace('"',"");    // 取得電子郵件
	const emailVerified = JSON.stringify(n.emailVerified).replace('"',"").replace('"',"");    // 確認電子郵件是否通過驗證，變數為布林值
	const image = JSON.stringify(n.photoURL).replace('"',"").replace('"',"");    // 取得帳戶圖片的網址

    document.getElementById("login").style.display="none";    // 隱藏登入介面

    finish.innerHTML =
   `<h4><i class="fa fa-snowflake-o"></i> 歡迎 !!! ${name}</h4>
    <div class="card white">
        <div class="card-content blue-text">
            <img src="${image}" class="photo">
            <p>你的名稱：${name}</p>
            <p>你的 Email ：${email}</p>
            <p>Email 是否已驗證：${emailVerified}</p>
        </div>
        <div class="card-action">
            <button class="btn waves-effect indigo" onclick="SignOut();">登出</button>
            <button class="btn waves-effect red" onclick="DeleteUser();">刪除帳號</button>
        </div>
    </div>`
    }).catch(e => console.log(JSON.stringify(e)))    // Print Error
}
```

### 登出

```javascript=
// SignOut
let SignOut = () => {
    firebase.auth().signOut().then(() => {
        window.alert("登出成功，將重新整理一次頁面！");
        window.location.reload();    // 重新整理頁面
    }).catch(e => console.log(JSON.stringify(e)))    // Print Error
}
```

### 刪除帳號

```javascript=
// DeleteUser
let DeleteUser = () => {
    let e = firebase.auth().currentUser; 
    e.delete().then(() => {
        window.alert("刪除成功，將重新整理一次頁面！");
        window.location.reload();    // 重新整理頁面
    }).catch(e => console.log(JSON.stringify(e)))    // Print Error
} 
```

# 查看目前註冊人數

回到在 firebase 所新增的專案，點選「Authentication」中的「Users」，即可查看目前所註冊的人數及資料

![註冊人數](https://i.imgur.com/5Fwpczr.png)