Mirochiu's coding note

這幾天寫了好幾個功能，今天想要部屬到Firebase時發生了401部屬錯誤，完整訊息如下: Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. 該怎麼處理呢? 

一個會員網站提供上傳個人圖檔是一個很基本的應用。現在如AI解析及互動上也會需要用到圖檔、聲音，甚至是影片來提供服務，所以上傳檔案是一件稀鬆平常的事情。 當然，firebase中，可以透過使用Firebase storage的前端套件來快速的完成這件事情，不需要額外思考檔案上傳背後的問題。然而，當你沒有使用Firebase Auth來作會員登入系統，你馬上就面臨資料隱私的兩難問題。 你的Firebase storage存取規則無法檢驗存取的是否為用戶，且無法依照會員角色來區分存取權限。直到最後你只能妥協，將storage存取權限完全開放，使得上傳功能與用戶資料完全裸奔在網際網路上。在App router中透過Route Handler，我們可以管控會員是否有上傳與存取的權利。

相信許多人使用Firebase部屬網站，都會遇到這個危險網站的問題。本機電腦開發時都沒有問題，但是部屬後網站，只要點擊登入頁就會被Chrome標記成危險網站，使用者要登入都沒辦法。這到底該怎麼解決呢?

這裡使用範例MUI本身示範例，因為有時寫一寫會忘記一些步驟，乾脆就會整成一篇。以下整理成10點內容 1. 使用範例專案 pnpm create next-app {你喜歡的專案目錄名稱} --example https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 這裡使用MUI官方提供的Next.js的typescript範例，程式碼 請參考這裡 使用到的主要技術堆疊如下 a. MUI v5  b. Next.js v14 - App router c. typescript v5

 會有這個需求是因為建立一個完整的網站，至少會需要前台與後台，分離兩個在維護上會比較簡單，且可避免在前台App權限給的太多，導致其他問題。

在前面提到我有嘗試依照 Google官方針對Next.js整合到firebase推出的codelabs教學 ，部屬了一個App Hosting的服務。因為我不想增加gcp的使用額度，打算把它移除。進入Firebase主控台卻發現沒有提供移除App Hosting的按鈕，只好用firebase CLI來處理它。 上圖使用 Copilot設計工具 創造

Firebase與Next.js整合上還滿方便的，這裡整理簡單方式部屬既有的Next.js應用到Firebase上

這幾天照著 這個codelabs教學 跑了一下，遭遇滿多小問題的，不過拿來當實作得參考程式碼是不錯的。 上圖使用 Coplit設計工具 生成 https://firebase.google.com/codelabs/firebase-nextjs 上面這篇教學是使用Next.js並推廣firebase app hosting和github整合，當然也沒有缺少AI的部份(Gemini API)，不過所佔篇幅只有一個小節。使用到得服務有: Firebase authentication 使用者的Google整合登入 Firebase storage 儲存上傳圖片 Firestore 儲存/存取使用者評論與評分等 Gemini API  Cloud Secret Manager 儲存密鑰

 firebase的javascript函數庫有兩個firebase和firebase-admin 這篇分享一下firebase套件得初始化與開發模式初始化該如何作

近期使用較多的Firebase服務，在參考使用Firebase提供的Node.js的函數庫一段時間後，才意識到Firebase是有兩組不同的操作。 就算透過AI詢求幫助時，也總是會混合著解兩者的回應。所以個人就試錯後，將方法整理成一個簡短的使用範例。以下就針對Firebase的firebase-admin函數庫，來上傳檔案到Firebase storage。

 在code裡面引用setGlobalOptions 函數來設定 const { setGlobalOptions } = require ( "firebase-functions/v2" ); setGlobalOptions ({ region : "asia-east1" });

  這是在轉移之前寫的next.js功能到其他firebase專案時發生的權限問題 摘要錯誤訊息如下: i  functions: creating Node.js 18 (2nd Gen) function firebase-frameworks-***:ssr***(asia-east1)...     Unable to retrieve the repository metadata for projects/ *** /locations/asia-east1/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.     Functions deploy had errors with the following functions:             firebase-frameworks- *** :ssr***(asia-east1)