做的時候・加登入・免費
加上 Google 登入
30 秒懂
登入是讓網站知道「現在是誰在用」，才能幫每個人存好自己的東西。用 Google 帳號登入最省事，使用者不用再記一組密碼，你也不用自己保管密碼。除了登入成功，登出和還沒登入時的畫面也要處理好，使用者才不會卡住。
直接用
填好欄位，提示詞會自動組好，按「複製提示詞」貼給你的 AI 工具。
組好的提示詞
我在做一個網站「我的烘焙教室」，想加上會員登入，讓使用者用 Google 帳號登入。登入後才能用的功能是：查看我報名的課程、收藏食譜。 請幫我做到： - 頁面上方有「用 Google 登入」按鈕，登入後改成顯示名字或大頭貼，旁邊有「登出」。 - 還沒登入的人打開會員功能時，顯示說明和登入按鈕，登入後自動回到原本那一頁。 - 登出後，按上一頁或重新整理都看不到會員資料。 - 登入失敗或取消時，顯示看得懂的中文提示，不要出現空白頁或英文錯誤。 - 重新整理或關掉分頁再打開，登入狀態還在，除非按了登出。 Google 登入需要的 ID 和密鑰放在環境變數，不要寫在程式碼裡，也不要貼給我看。需要我自己到 Google 後台設定的地方，請一步一步告訴我。 一次只做登入這件事，不要動其他功能；不確定的地方先問我。完成後列出改了哪些檔案、我要怎麼確認。
這是預覽版，正式上架前會用主流 AI 工具實際測試。提示詞裡不要放密碼或金鑰；需要金鑰的地方，請 AI 改用環境變數。AI 做出來的結果，請照下面的清單自己確認。
怎麼確認 AI 做對了
- 用無痕視窗打開網站，按「用 Google 登入」，看登入後有沒有出現你的名字。
- 按登出，再按瀏覽器的上一頁，確認看不到會員資料。
- 沒登入時直接打開會員功能的網址，應該出現登入提示，而不是錯誤畫面。
- 登入後重新整理、關掉分頁再打開，確認還是登入的狀態。
- 用手機再登入、登出一次，確認手機上也正常。
常見陷阱
- 只把開發中的網址加到 Google 的設定裡，換成正式網址後一登入就出錯。
- 登出只是把按鈕換掉，按上一頁還看得到會員資料。
- 只把會員功能的按鈕藏起來，直接打網址還是進得去。
- 把 Google 的密鑰直接寫在程式碼裡，跟著程式一起上傳到 GitHub。
同一個主題的其他提示詞
想懂更多
這個主題在看懂軟體：創碼小鎮有完整的說明和練習。
