[AI線上應用實戰] Bubble.io 用戶登入 + OAuth

ECOE-avatar-img
ECOE
發佈於資訊、程式 等 個房間
更新於 發佈於 閱讀時間約 2 分鐘

系列文章傳送門:[AI線上應用實戰] 如何快速建立你的AI線上應用 使用Bubble.io #Bubble.io教學


如果自行撰寫應用後端，光是使用者管理就是挺麻煩的一件事。筆者之前撰寫Fastapi+OAuth+database就花上不少時間。Bubble.io可以則可以快速完成登入機制

此外，我們也可以搭配OAuth，允許使用者使用第三方登入，這樣甚至可以不用在Bubble應用中，處理reset password等問題。

raw-image

實際流程

raw-image
raw-image
  1. 加入Google Plugin至APP
  2. 創建一個以GOOGLE登入按鈕，撰寫點擊觸發Workflow:
    只需要使用Signup/login with Google這個方塊就好了喔，後面可以再加上額外邏輯
  3. 想要在workflow貨元件中存取當前使用者資訊，可以簡單使用Current User這個參數，例如Current User.Email
  4. 於Google Cloud Console創建新的OAuth2.0用戶端，設定重新導向URI，以及複製專案編號及Secret Key
raw-image
raw-image


  1. 在Plugin頁面中設定API KEY/Secret Key
raw-image


想要更有系統的學習嗎?

歡迎至Google Books、Readmoo購買《零基礎開發AI應用: Bubble實戰指南》。在本書中我們深入淺出的教您使用Bubble平台，並結合最新最潮的AI技術，讓你輕鬆完成你的創業夢。

raw-image













ECOE的沙龍資訊、程式ECOE的沙龍Bubble.io教學
留言
avatar-img
留言分享你的想法！
avatar-img
ECOE的沙龍
4會員
41內容數
ECOE的沙龍的其他內容
2025/02/03
數學公式快速轉latex 數學公式識別 OCR
付費工具：Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex，用於latex文件或是Markdown，但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2025/02/03
數學公式快速轉latex 數學公式識別 OCR
付費工具：Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex，用於latex文件或是Markdown，但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2024/12/31
一台電腦主機有多重?
在購買電腦支架時，常常需要考量電腦主機的重量，一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/12/31
一台電腦主機有多重?
在購買電腦支架時，常常需要考量電腦主機的重量，一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/11/15
如何專業地分析GPU VRAM使用: Nsight 快速上手
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份， VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率，避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
2024/11/15
如何專業地分析GPU VRAM使用: Nsight 快速上手
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份， VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率，避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
渡狼／DL
蝦皮開箱｜TOMICA 吉伊卡哇 烏薩奇兔兔小車
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空，一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮，突然發現幾家商場都又開始重新上架，價格也都回到正常水準，估計是官方又再補了一批貨，想都沒想就立刻下單！ 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷！
#吉伊卡哇#開箱#蝦皮分潤計畫
Thumbnail
avatar-avatar
渡狼／DL
蝦皮開箱｜TOMICA 吉伊卡哇 烏薩奇兔兔小車
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空，一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮，突然發現幾家商場都又開始重新上架，價格也都回到正常水準，估計是官方又再補了一批貨，想都沒想就立刻下單！ 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷！
#吉伊卡哇#開箱#蝦皮分潤計畫
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
小黑與程式的邂逅
[Go]OAuth2.0
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入，就導向認證伺服器。 認證伺服器顯示授權頁面，等待用戶授權。 用戶確認授權後，授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
#授權#認證#OAuth
Thumbnail
avatar-avatar
小黑與程式的邂逅
[Go]OAuth2.0
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入，就導向認證伺服器。 認證伺服器顯示授權頁面，等待用戶授權。 用戶確認授權後，授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
#授權#認證#OAuth
Thumbnail
avatar-avatar
newman的沙龍
技術筆記-用 python 操作 google firestore 的基本方法
firestore 是 google 所提供的雲端文件式資料庫服務，為各種開發工具提供了方便使用的 sdk，python 的套件名稱為 firebase-admin，用 pip 安裝後就可操作了。 pip install firebase-admin
#firestore#python#資料庫
Thumbnail
avatar-avatar
newman的沙龍
技術筆記-用 python 操作 google firestore 的基本方法
firestore 是 google 所提供的雲端文件式資料庫服務，為各種開發工具提供了方便使用的 sdk，python 的套件名稱為 firebase-admin，用 pip 安裝後就可操作了。 pip install firebase-admin
#firestore#python#資料庫
Thumbnail
avatar-avatar
DDDDD的沙龍
實作 Laravel 串接Google Sheet API
最近剛好分配一個需求，要批次更新一些基礎設定資料，而新系統基礎設定資料都統一由別的團隊維護在Google Sheet 上，一開始是要我寫 Laravel Seeder 塞資料表，後來發現也太多數據要批次更新了，數據要對到何時何年，乾脆來研究串 Google Sheet API 整批塞入在對總行數就好
#Laravel#Google#程式筆記
Thumbnail
avatar-avatar
DDDDD的沙龍
實作 Laravel 串接Google Sheet API
最近剛好分配一個需求，要批次更新一些基礎設定資料，而新系統基礎設定資料都統一由別的團隊維護在Google Sheet 上，一開始是要我寫 Laravel Seeder 塞資料表，後來發現也太多數據要批次更新了，數據要對到何時何年，乾脆來研究串 Google Sheet API 整批塞入在對總行數就好
#Laravel#Google#程式筆記
Thumbnail
avatar-avatar
DDDDD的沙龍
實作Laravel 註冊、登入搭配JWT
本篇純粹紀錄實作流程，以方便未來可以照此版繼續優化改進作法，這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記，回頭再看的時候，就可以發現實作差異並進行改正，沒搞懂的底層操作也能在覆盤的時候理解，建議大家都要筆記自己的實作流程。
#Laravel#PHP#會員系統
Thumbnail
avatar-avatar
DDDDD的沙龍
實作Laravel 註冊、登入搭配JWT
本篇純粹紀錄實作流程，以方便未來可以照此版繼續優化改進作法，這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記，回頭再看的時候，就可以發現實作差異並進行改正，沒搞懂的底層操作也能在覆盤的時候理解，建議大家都要筆記自己的實作流程。
#Laravel#PHP#會員系統
Thumbnail
avatar-avatar
茶桁的沙龍
14. 练习：登录注册系统
Hi，大家好。我是茶桁。 上一节课，我们详细的介绍了文件读写的流程和原理，并用Python进行实际操作了一下。 那么这节课呢，我们利用之前所学的内容，尝试做一个小练习：建立一个登录注册系统。上节课我们在结尾的时候讲练习内容贴了出来，还记得要求吗？  实现功能：  1. 用户输入用户名和密码以及
#Python#系统#注册
Thumbnail
avatar-avatar
茶桁的沙龍
14. 练习：登录注册系统
Hi，大家好。我是茶桁。 上一节课，我们详细的介绍了文件读写的流程和原理，并用Python进行实际操作了一下。 那么这节课呢，我们利用之前所学的内容，尝试做一个小练习：建立一个登录注册系统。上节课我们在结尾的时候讲练习内容贴了出来，还记得要求吗？  实现功能：  1. 用户输入用户名和密码以及
#Python#系统#注册
Thumbnail
avatar-avatar
技術叢林
BitlyAPI如何完整串接範例教學
Bitly是一個常見的短連結平台，提供所有使用者把原始網址轉換成較為簡短的連結字數，同時該平台也提供API給使用者串接使用 大概看過官方提供的api文件，算是功能齊全，只要本身帳號權限夠高，所有操作皆可在API中進行 自己也是有少量使用過bitly平台，那就嘗試動手串接一下API看看 取得通行證(A
#bitly#開發#專案
Thumbnail
avatar-avatar
技術叢林
BitlyAPI如何完整串接範例教學
Bitly是一個常見的短連結平台，提供所有使用者把原始網址轉換成較為簡短的連結字數，同時該平台也提供API給使用者串接使用 大概看過官方提供的api文件，算是功能齊全，只要本身帳號權限夠高，所有操作皆可在API中進行 自己也是有少量使用過bitly平台，那就嘗試動手串接一下API看看 取得通行證(A
#bitly#開發#專案
Thumbnail
avatar-avatar
Amos的沙龍
APP誕生全紀錄 - 容易忽略的必要功能3：OAuth登入
一個APP在規劃的時候可能覺得主要功能就只有這一兩個，實作起來應該不難，卻忘了現代人的胃口已經越養越大，很多不在你預期內但對於使用者來說卻是很基本的功能；另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能：OAuth登入。
#OAuth#第三方登入#登入
Thumbnail
avatar-avatar
Amos的沙龍
APP誕生全紀錄 - 容易忽略的必要功能3：OAuth登入
一個APP在規劃的時候可能覺得主要功能就只有這一兩個，實作起來應該不難，卻忘了現代人的胃口已經越養越大，很多不在你預期內但對於使用者來說卻是很基本的功能；另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能：OAuth登入。
#OAuth#第三方登入#登入
Thumbnail
avatar-avatar
Karen Huang的沙龍
機械式交易之雲端工具 - 開始與備份
首先要先去Google Cloud Platform申請一個帳號，愉快的點下啟用
#機械化#交易#投資
Thumbnail
avatar-avatar
Karen Huang的沙龍
機械式交易之雲端工具 - 開始與備份
首先要先去Google Cloud Platform申請一個帳號，愉快的點下啟用
#機械化#交易#投資
Thumbnail
avatar-avatar
Vic Lin的沙龍
Laravel Socialite - Google 第三方登入
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後，開始填寫資料: 建立憑證: 假如有多個應用程式平台，如網頁、app，都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
#Socialite#Laravel#OAuth20
Thumbnail
avatar-avatar
Vic Lin的沙龍
Laravel Socialite - Google 第三方登入
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後，開始填寫資料: 建立憑證: 假如有多個應用程式平台，如網頁、app，都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
#Socialite#Laravel#OAuth20
Thumbnail
avatar-avatar
Kate的沙龍
Firebase 架站
轉移自 LogDown 原文日期 June 10, 2016 14:33  Firebase 自從被 Google 收購後，從原本的即時資料庫，擴展更多的功能。 筆者這次研究的是架站功能，雖然玩過 Google App Engine 架站，但還是想體驗一下新技術。 目前 Firebase 官方支
Thumbnail
avatar-avatar
Kate的沙龍
Firebase 架站
轉移自 LogDown 原文日期 June 10, 2016 14:33  Firebase 自從被 Google 收購後，從原本的即時資料庫，擴展更多的功能。 筆者這次研究的是架站功能，雖然玩過 Google App Engine 架站，但還是想體驗一下新技術。 目前 Firebase 官方支
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News