!危險網站!解決Firebase上部屬Next.js網站使用NextAuth.js整合LINE登入遭遇的問題
相信許多人使用Firebase部屬網站,都會遇到這個危險網站的問題。本機電腦開發時都沒有問題,但是部屬後網站,只要點擊登入頁就會被Chrome標記成危險網站,使用者要登入都沒辦法。這到底該怎麼解決呢?
在台灣很常使用Facebook和LINE作為訊息傳遞媒介,會希望可以快速開發一個具備會員系統的電商網站,會希望這些會員可以快速成為自己的網站會員,就會提供FB和LINE登入。
然而Firebase auth本身並沒有直接支援LINE登入的,這也使得我會考慮使用NextAuth.js這套非常完整的登入解決方案,只要透過一些設定就可以快速支援多達27種快速登入方式。
因此就會想在Next.js中使用NextAuth.js套件以減少開發時間。待我設定並部屬到Firebase後才發現,這個方案是個大雷包,部屬後就被google設為危險網站。
針對這個危險網站的問題,在不更換NextAuth.js套件的情況下,我自己有測試可行的解法有2種,而第3種解法是網友提供的,接著就將這些解法介紹給大家。
1. 設定自訂網域
<這個方案適用於已經用有網域的人>
以我在自己的網域 mirochiu.page 中,進入Firebase主控台hosting功能,在網域部份[新增自訂網域],如下圖是 member-system.mirochiu.page
2. 改NextAuth.js登入的路徑
<這個方案適用於沒有自己網域的人>
一開始是很想咎責NextAuth.js套件,github上也有數篇討論是針對這個問題詢問的,身為工程師,就來追根究底一下。
查看網站存取log,網站端並沒有收到request,所以實際上危險網站是觸發在比較前面的部份,連要咎責NextAuth.js都沒辦法,因為它都還沒開始處理呢!
從這裡推論,導致chrome顯示危險網站的可能是chrome瀏覽器本身的白名單。
先了解NextAuth.js本身機制,套件預設的登入路徑是/api/auth/xxxx,要規避這個瀏覽器白名單機制,就需要改這個登入的路徑。我這裡就要改成/miro-auth/xxxx。
以NextAuth v4使用Next.js App router的實作來解釋,程式碼都放在/src下時
2.1 移動route.ts的位置
原本是 /src/app/api/auth/[...nextauth] 目錄
移動到 /src/app/miro-auth/[...nextauth] 目錄下
2.2 設定NEXTAUTH_URL環境變數
開發用的NEXTAUTH_URL設成 http://localhost:3000/miro-auth
部屬用的NEXTAUTH_URL設成 https://你的firebase專案.web.app/miro-auth
上述是NextAuth.js是v4得設定;如果你是使用v5是設定AUTH_URL環境變數
2.3 修改SessionProvider
如果你的專案使用到next-auth/react的 useSeesion, signIn, signOut
請在SessionProvider加入basePath="/miro-auth"
完整的範例如下 NextAuthProvider.tsx
2.4 變更你得LINE登入callback
進入你得LINE developer console變更Callback URL
開發用改成 http://localhost:3000/miro-auth/callback/line
原本是 http://localhost:3000/api/auth/callback/line
部屬用改成 https://你的firebase專案.web.app/miro-auth/callback/line
原本是 https://你的firebase專案.web.app/api/auth/callback/line
2.5 重新部屬網站
因為危險網站是只有部屬後才發生的狀況,所以本機只能查看LINE登入機制是否還正常運作。實際狀況就是需要重新部屬你的網站。
3. (網友提供) 將網站登記到google search console
<這個方案是不需要改程式的簡單方案>
只是需要等待google回覆,以便解除危險網站的設定。
以上三種方案可以解決Next.js+NextAuth.js+Firebase登入功能被視為危險網站的問題
留言