# 如何從雲端轉貼圖片到 DocuSky ?
## - *FireBase Storage服務 使用&設定教學*

<!-- 標籤 -->
###### tags: `使用導引`, `文件狀態：維護中`

<!-- 內文編輯更新資訊，若有更動此份文件內容，請更新此項資訊 -->
> [name=Kuan-Lin Chen, 陳冠霖]
> [time=Tue, Sep 2, 2020 1:11 AM]

<!-- 摘要 -->
:::success

<!-- 當前負責人使用高亮標示，新接替維護人員請加在第一個 -->
- **建立者**：陳冠霖
- **維護者**：==陳冠霖==

:::

<!-- 筆記正文開始 -->

:::info
***本文的連結都可以透過點擊 來看此格式連結結果***
:::

## 聯絡方式

有任何問題 或 有特殊設定的構想
可透過下列方式聯繫我

* FB : 搜尋 陳冠霖 or https://www.facebook.com/asdleon/
(回覆較快)
* E-mail : [e-mail]
(回覆可能較慢)
* 直接在本hackmd留言
(回復可能非常慢or非常快)

## 前情提要

如果 想轉貼圖片到DocuSky or 任何線上編輯及文件上
最簡單就是 上傳圖片到任何 **圖像平台**(imgur、imageshack...etc)
或者 **個人雲端服務**(google drive、mega nz、icloud...etc)

但是 上傳圖像得到的連結 都是不規則亂碼
有方法處理嗎? ...

## Why Firebase ?

**以下圖 Caturday.png 為例**


上傳到 imgur
會得到: https://i.imgur.com/yEyUq08.png

但是當有一百張圖片
Dom_001.png, Dom_002.png ... Dom_099.png, Dom_100.png

我們更希望能用像是

https://i.imgur.com/固定的參數/Dom_001.png
https://i.imgur.com/固定的參數/Dom_002.png
.
.
.
https://i.imgur.com/固定的參數/Dom_099.png
https://i.imgur.com/固定的參數/Dom_100.png

來存放自己的圖片

而不是紀錄一百個如 yEyUq08.png 的亂碼
或去Imgur上手動產生連結再貼上 重複個一百次 ...

而**Firebase經過設定**後 就可以達成這個需求了

## 事前準備

### Q1. 需要準備甚麼?
:::info
* **Answer:**
Firebase只接受Google帳號
沒有的話 請先註冊一個

:::

### Q2. 我需要會甚麼能力?
:::info
* **Answer:**
~~得需要藉由 Security Rules language 語法更動設定檔案，來讓外部網路存取程式化以 ...~~

放心~~ 已經提供設定碼 只要會**複製貼上**就可以了

:::

## 開始設定
FireBase提供多種服務，此次只會用到storage
其提供的Security Rules language來對存取邏輯進行設計
來達到我們期望的

https://xxx.com/某些固定的參數/自己的命名.jpg/另些固定的參數

下面會依序 step by step 解說

---
### 開啟 Firebase Storage 服務
1. **找到官網**(google 搜尋 firebase)
**或 https://firebase.google.com/
並點選右上 登入**

:::warning
如果右上已經有登入的google帳號 可以直接跳到 step3
:::

2. **登入google帳號**

3. **選右上 前往主控台**

4. **點選建立專案**

5. **輸入自定義專案名稱 並點選接受條款**
:::warning
如果名稱已有人使用 會自動加上後贅編碼
:::

6. **取消 "啟用這項專案的 Google Analytics (分析) 功能" 直接建立專案**
:::warning
不取消的話 只是會單純多一個步驟去選分析地點
:::

7. **等待其跑完**

8. **點選左邊選單中的 開發**

**點選下拉選單中的 Storage**

9. **點擊 開啟使用**

**點擊下一步** 

**將Cloud Storage選成 asia-east2**

:::warning
這是設定雲端儲存的資料站位置 基本選東亞2站
如果有額外需求 可以根據自己地區改選
p.s. 選擇位置**可能**影響傳輸速率
:::

10. **進入管理頁面如下**

**Files** : 上傳管理資料及資料夾
**Rules** : 可程式化 管理自己資料庫的外部存取邏輯
**Usage** : 顯示使用的空間大小 本日存取檔案次數 本日流量

---

### **如何開始設定 Firebase Storage 規則**

* **在上方工作選單中選擇Rules**

**便能看到其設定區域 原始碼如下**

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {
          allow read, write: if request.auth != null;
        }
      }
    }

---

## 設定規則

:::info
接下來會以Firebase的**Security Rules language**編寫rules
**不需要**理解其設定語法

下面已**直接提供程式碼** 只要**複製貼上**即可

*(有興趣者 可以前往 https://firebase.google.com/docs/storage/security/core-syntax?hl=en
查閱其規則及延伸應用)*
:::

下面提供兩個方法 可直接**點擊**跳轉頁面

1. [**開放特定資料夾供讀取**](#第一種設定法:%2d開放特定資料夾供讀取) : **只有特定資料夾底下的檔案 才可以被外部讀取**
2. [**開放所有檔案供讀取**](#第二種設定法:%2d開放所有檔案供讀取) : **所有檔案都可以被外部讀取**
:::danger
!!! 注意 !!!
此類設定相對較危險 & 不適合放不想公開的私人檔案
但設定和管理方便一點點 & 想新增公開資料夾也不用設定
:::

---
## 第一種設定法: 開放特定資料夾供讀取

1. **在檔案管理頁面 Files 中 點選新增資料夾按鈕**
 **中間有+號icon的那個**

2. **輸入自訂資料夾名稱**
(範例為 Opened_dir)


3. **返回Rules頁面 將設定碼改成下述**
(直接複製貼上)

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{dir}/{allPaths=**} {
          allow read : if dir == "Opened_dir";
        }
        match /{allPaths=**} {
          allow read, write: if request.auth != null;
        }
      }
    }

:::warning
記得將第五行 allow read : if dir == "Opened_dir";
裡面的 Opened_dir 改成 自己設定的資料夾名稱
:::

4. **點擊發布**

:::success
這樣就完成設定 在Opened_dir底下的檔案可直接存取 不需要token或手動連結
同時 資料夾外的檔案保持無法直接存取

*p.s.* 更改rules可能會等數分鐘系統才會套用 剛剛改完後不能連結為正常現象
:::

---

## 第二種設定法: 開放所有檔案供讀取

:::danger
!!! 注意 !!!
這個設定會使Firebase中所有檔案都可以被外部讀取
:::

1. **進入Rules頁面 將設定碼改成下述**
(直接複製貼上)

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {
          allow write: if request.auth != null;
          allow read;
        }
      }
    }

2. **點擊發布**

* **現在所有檔案都可以不需要token進行存取了**

---

## **額外工具 : 套用公式的Excel**

* **為何需要這個工具 ? :**
要一直手動更改url ...
還得自己記錄前後固定的網址部分 ...
甚至要處理 \/ 轉換成ascii的 %2F ...

* **達成的結果 :**
只需要輸入**一次**自己的固定網址 之後只要輸入圖片名稱 就可以得到網址了

* **下載連結 :** [**點我**](https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Ffirebase%E6%AA%94%E6%A1%88%E9%80%A3%E7%B5%90%E7%94%9F%E6%88%90.xlsx?alt=media)
(跟本文圖片放置同一Firebase中 無法下載請參照[**聯繫**](#聯絡方式))

:::info
excel內預設的檔案連結範例 為本文中的範例otter_1.jpg
:::

* **下面將逐步解說如何使用**

1. **設定區域**

**根據指示填上 個人固定網域名直至 /o**

如 : https://firebasestorage.googleapis.com/v0/b/專案id.appspot.com/o

2. **填上資料夾名稱** (若無則改成空白)

3. **在檔名欄填上檔名**

4. **檔名連結@url欄 會自動產生對應的檔案連結**

:::warning
產生的檔案url 為超連結格式 可以將公式替換成設定區域中的
非超連結用
:::

---

## **延伸閱讀**

**(\*可略)**

:::warning
此區內為延伸閱讀 紀錄firebase的資料存取概念
**沒有** 設定相關的操作
設定可直接點擊右邊跳到 [**開始設定**](#開始設定)
:::

---

### **延伸01 : 如何確定自己的圖片存取權限設定正常?**

:::info
下面會用範例來示範存取權限 是否正常
**沒有** 設定相關的操作
設定可直接點擊右邊跳到 [**開始設定**](#開始設定)
:::

---

1. **上傳兩張圖 cat_1.jpg cat_2.jpg 在資料夾外**
**上傳兩張圖 otter_1.jpg otter_2.jpg 在資料夾 Opened_dir 內**

2. **以原本流程 點擊 超連結: otter_1.jpg 得到 direct link:** https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_1.JPG?alt=media&token=55a39e27-04d5-4cac-be63-c04ea4f717a8

3. **去除其 token(如下) 並點擊 證明無token連結 讀取圖片正常運作**
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_1.JPG?alt=media

4. **拆解分析連結**

https://firebasestorage.googleapis.com/v0/b
/klchen-f9d45.appspot.com
/o
/Opened_dir%2Fotter_1.JPG
?alt=media

* **可以發現第四行: Opened_dir%2Fotter_1.JPG
正是剛剛我們設定的資料夾名稱(Opened_dir) + %2F + otter_1.JPG**

:::success
以此類推 將 otter_1.JPG 抽換成 otter_2.JPG
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_2.JPG?alt=media
就能成功連結到圖片 otter_2.JPG 了
:::

:::info
%2F 其實是 / 的編碼
所以 Opened_dir%2Fotter_1.JPG
其實就是 Opened_dir/otter_1.JPG
但是直接用 / 會造成網頁解碼錯誤

所以如果是 **資料夾1** 裡面的 **資料夾2** 裡面的 **照片1.jpg**
用 **資料夾1** %2F **資料夾2** %2F **照片1.jpg** 便可連結
:::

* **下面會檢查資料夾外的圖片 cat_1.jpg cat_2.jpg 是不是隱私的**

根據前面的
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_2.JPG?alt=media
將其改成 cat_2.jpg版本
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_2.jpg?alt=media
會發現其拒絕存取
只能依照原本的方法 用點擊超連結來取得 有token的版本
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_2.jpg?alt=media&token=d0a6cfd9-b2d1-4ff1-943a-4f757e515d1c
才可以連線
而此連結改成 cat_1.jpg 也無法連結
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_1.jpg?alt=media&token=d0a6cfd9-b2d1-4ff1-943a-4f757e515d1c

---

### **延伸02 : Firebase預設圖片連結到底怎麼運作?**

:::info
下面會用案例說明 Firebase圖片預設取用方式
**沒有** 設定相關的操作
設定可直接點擊右邊跳到 [**開始設定**](#開始設定)
:::

**預設取得照片的直接連結(direct link)**

1. **上傳兩個檔案 cat_1.jpg cat_2.jpg 並點選cat1.jpg**

2. **點擊 超連結: cat_1.jpg**

3. **跳到新網頁如下**

4. **從上方網址區可得到direct link**

---
* **下面會稍微解析一下得到的direct link**

---
得到的direct link如下:
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_1.jpg?alt=media&token=9b91572e-dce0-404b-8c84-bbd657b0d8ca

將其稍微拆解分析

https://firebasestorage.googleapis.com/v0/b
/klchen-f9d45.appspot.com
/o
/cat_1.jpg
?alt=media
token=9b91572e-dce0-404b-8c84-bbd657b0d8ca

理想狀態是將第四行的cat_1.jpg 抽換成 cat_2.jpg便可以直接存取別張照片
如下示:
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_2.jpg?alt=media&token=9b91572e-dce0-404b-8c84-bbd657b0d8ca

但是實際上卻無法依此連結 cat_2.jpg
而真正照流程走一遍 超連結cat_2.jpg

產生的正確direct link:
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_2.jpg?alt=media&token=d0a6cfd9-b2d1-4ff1-943a-4f757e515d1c

比較後發現 token是完全不同的
而其看起來也不固定或可被計算出
捨去token的連結也無法運作
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/cat_2.jpg?alt=media

如何讓檔案能用下面的方式直接存取

https://firebasestorage.googleapis.com/v0/b/你的專案id/o/你命名的圖片名稱?alt=media

而不用去處理token 請參照 [**設定規則**](#設定規則)

---

## **常見 Q&A**

### Q1. 手動更改url來編輯檔案路徑好麻煩，而且很容易忘記自己的網域名，以及一些雖然固定但看起來像亂碼的東西...
:::info
* **Answer:**
1. 可以參照 [**額外工具 : 套用公式的Excel**](#額外工具%2d:%2d套用公式的Excel) 來使用工具幫助處理

2. 用預設的取得連結方法，開啟資料夾內的其中一個檔案，得到路徑後去除token，就可以得到資料夾的路徑
接著只要更改檔名部分。

* **詳情請見** - [**延伸02 : Firebase預設圖片連結到底怎麼運作?**](#延伸02%2d:%2dFirebase預設圖片連結到底怎麼運作?)
:::

### Q2. Firebase穩定及安全嗎? 其主要服務到底是甚麼?
:::info
* **Answer:**
Firebase是行動和網路應用程式開發者的平台，始於2011年，並在2014年被google收購，目前有約150萬個應用程式採用此平台，我們這次只是使用其storage雲端儲存的部分服務，其儲存位置為google伺服器站。也就是**其安全穩定程度很高，尤其是storage服務，可視為跟Google Drive、Google Cloud Platform同層級**。

* **詳情請見** - [**Firebase Wiki**](https://zh.wikipedia.org/wiki/Firebase)
:::

### Q3. Firebase免費用戶的限制在哪方面? 其向上收費價格是?
:::info
* **Answer:**
下面將只針對**Storage服務**進行列表
(付費用戶 一樣能享有免費用戶的每日額度 屬於**超額收費機制**)

*p.s.* 價錢和免費用量可能浮動 請以官網公告為準

---
* **免費用戶**
* 空間大小: 5GB
* 下載流量: 每天1GB
* 上傳次數: 每天2萬次
* 下載次數: 每天5萬次

* **付費價格**
* 空間大小: 1GB = 0.026美金
* 下載流量: 1GB = 0.012美金
* 上傳次數: 1萬次 = 0.005美金
* 下載次數: 1萬次 = 0.0004美金

---

* **詳情請見** - [**Firebase Pricing**](https://firebase.google.com/pricing?authuser=0)

:::

### Q4. Firebase免費額度用完後會不會直接扣錢?
:::info
* **Answer:**
免費用戶統一為 **spark服務**，在沒升級服務前，用完額度不會扣款(即便google帳戶已綁定信用卡)，只會停止當日使用

*p.s.* 用戶服務可能更改名稱 請以官方公告為準

* 詳情請見 - [**Firebase常見問題 : 價錢**](https://firebase.google.com/support/faq?authuser=0#pricing)

:::

### Q5. 怎麼知道今天用了多少額度或者過去使用紀錄?
:::info
* **Answer:**
請點選 **Usage** 進入頁面
便可看到報表如下
報表為數小時更新一次 **並非**完全及時更新
:::

### Q6. 為什麼我連結一直跑到一堆文字的畫面?
:::info
* **Answer:**
如果檔案路徑是正確的話
請檢查一下連結最尾端有沒有加上 **?alt=media**
以前面 otter_2.jpg 為例子
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_2.JPG
會導引至下圖畫面

而加上 **?alt=media**
https://firebasestorage.googleapis.com/v0/b/klchen-f9d45.appspot.com/o/Opened_dir%2Fotter_2.JPG?alt=media
才是正確的圖片 direct link
:::

### Q7. 檔案沒辦法能從外面更改內容嗎?
:::info
* **Answer:**
剛剛上面的設定都只跟read(讀取)有關，想要新增的話，要在設定中來編寫有關write的部分。

大致為將
allow read;
改成
allow read, write;
:::
:::danger
!!! 注意 !!!
這會導致儲存在雲端的檔案可能被任意竄改
:::

### Q8. 想要公開的資料夾不只一個怎麼辦?
:::info
* **Answer:**
**只公開一個資料夾的設定碼 大致如下**

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{dir}/{documentId} {
          allow read : if dir == "原本的公開資料夾名稱";
        }
        match /{allPaths=**} {
          allow read, write: if request.auth != null;
        }
      }
    }

**加上**

        match /{dir}/{documentId} {
          allow read : if dir == "新增的公開資料夾名稱";
        }

**將其擴充改成**

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{dir}/{documentId} {
          allow read : if dir == "原本的公開資料夾名稱";
        }
        match /{dir}/{documentId} {
          allow read : if dir == "新增的公開資料夾名稱";
        }
        match /{allPaths=**} {
          allow read, write: if request.auth != null;
        }
      }
    }

需要兩個資料夾以上的話 以此類推

*p.s.* 可直接複製貼上 再把 **原本的公開資料夾名稱** 以及 **新增的公開資料夾名稱** 改成自己設定的
:::