APP誕生全紀錄 - 容易忽略的必要功能3:OAuth登入

更新 發佈閱讀 4 分鐘

一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能

raw-image

如果你還沒有閱讀過「APP誕生全紀錄」,建議可以先看一下,至少知道哪些可能是容易忽略的必要功能,我們提過了推播APP跳轉,今天我們來探討第三種必要功能:OAuth登入。


什麼是OAuth?

OAuth 是開放授權的標準協定,允許使用者讓第三方應用存取該使用者在某一網站上儲存的私密的資源(如相片,影片,聯絡人列表),而無需將使用者名稱和密碼提供給第三方應用。

經由大型第三方已經認證過的帳號,所以我們可以直接相信和確保這個帳號的獨有性和擁有權,避免讓使用者重複跑繁複的Email或電話...等等的註冊流程,簡化使用者的操作,可以大幅提升你的APP友善程度。


登入流程架構

raw-image
  1. 使用者端發出驗證需求給指定的第三方
  2. 第三方提供認證介面
  3. 使用者輸入第三方驗證資料
  4. 驗證成功將提供token給使用者端並跳轉回原APP (這時候已經可以使用token取得一些相關的使用者資料)
  5. 將token傳給Firebase Authentication做紀錄認證


其實如果沒有使用Firebase Authentication也是可以執行到第4步驟後,直接由使用者端設備做處理,但第5步驟透過Firebase做登入處理可以方便許多,一者可以用來驗證是否有權限使用Firebase的其他服務,e.g. FireStore、FireStorage...etc,再來之後如果沒有登出,都會由使用者端和Firebase Auth之間來做自動連線認證和紀錄,對於開發者來說方便了許多,而且Authentication的服務目前是免費的。


實作測試

我們利用flutter + google_sign_in + firebase_auth實作Google登入看看吧!

// Trigger the authentication flow
final GoogleSignInAccount? googleUser = await _auth.signIn();
if (googleUser == null) return false;

// Obtain the auth details from the request
final GoogleSignInAuthentication googleAuth =
await googleUser.authentication;

// Create a new credential
final credential = GoogleAuthProvider.credential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);

//Firebase Auth
try{
 await FirebaseAuth.instance.signInWithCredential(credential);
} on FirebaseAuthException catch (e) {
if (e.code == "account-exists-with-different-credential") {
   // Already have a different signin method
return false;
}
return false;
}


總結

實作OAuth不會太過於困難,但卻是一個可以快速提升使用者體驗的驗證方式,不用猶豫了,快來為你的客戶們建立方便的使用者驗證吧!



留言
avatar-img
留言分享你的想法!
avatar-img
Amos的沙龍
4會員
7內容數
Amos的沙龍的其他內容
2023/12/21
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
2023/12/21
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
2022/08/17
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
2022/08/17
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
看更多
你可能也想看
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
firestore 是 google 所提供的雲端文件式資料庫服務,為各種開發工具提供了方便使用的 sdk,python 的套件名稱為 firebase-admin,用 pip 安裝後就可操作了。 pip install firebase-admin
Thumbnail
firestore 是 google 所提供的雲端文件式資料庫服務,為各種開發工具提供了方便使用的 sdk,python 的套件名稱為 firebase-admin,用 pip 安裝後就可操作了。 pip install firebase-admin
Thumbnail
現行在開發需求上遇到即時推播訊息,其中一個推播方式就是利用firebase發送,並且讓應用程式即刻的收到推播,本篇一步一步的建立專案並且可以發送訊息。 前提: 目前利用程式向firebase 發送推播有三種方式 SEND TO TOKEN (針對device所產生的token) SEND TO TO
Thumbnail
現行在開發需求上遇到即時推播訊息,其中一個推播方式就是利用firebase發送,並且讓應用程式即刻的收到推播,本篇一步一步的建立專案並且可以發送訊息。 前提: 目前利用程式向firebase 發送推播有三種方式 SEND TO TOKEN (針對device所產生的token) SEND TO TO
Thumbnail
Bitly是一個常見的短連結平台,提供所有使用者把原始網址轉換成較為簡短的連結字數,同時該平台也提供API給使用者串接使用 大概看過官方提供的api文件,算是功能齊全,只要本身帳號權限夠高,所有操作皆可在API中進行 自己也是有少量使用過bitly平台,那就嘗試動手串接一下API看看 取得通行證(A
Thumbnail
Bitly是一個常見的短連結平台,提供所有使用者把原始網址轉換成較為簡短的連結字數,同時該平台也提供API給使用者串接使用 大概看過官方提供的api文件,算是功能齊全,只要本身帳號權限夠高,所有操作皆可在API中進行 自己也是有少量使用過bitly平台,那就嘗試動手串接一下API看看 取得通行證(A
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
今天當你完成了你心目中完美的作品,迫不及待的想要放到商店上讓大家下載使用,卻沒想到是噩夢的開始?!從上架前的審查,到上架後的各種問題浮現,讓你焦頭爛額了嗎?這裡和你分享一下4種在APP「上線期」會遇到的問題和解決方法,讓你上線沒煩惱。
Thumbnail
今天當你完成了你心目中完美的作品,迫不及待的想要放到商店上讓大家下載使用,卻沒想到是噩夢的開始?!從上架前的審查,到上架後的各種問題浮現,讓你焦頭爛額了嗎?這裡和你分享一下4種在APP「上線期」會遇到的問題和解決方法,讓你上線沒煩惱。
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
Thumbnail
轉移自 LogDown 原文日期 June 10, 2016 14:33  Firebase 自從被 Google 收購後,從原本的即時資料庫,擴展更多的功能。 筆者這次研究的是架站功能,雖然玩過 Google App Engine 架站,但還是想體驗一下新技術。 目前 Firebase 官方支
Thumbnail
轉移自 LogDown 原文日期 June 10, 2016 14:33  Firebase 自從被 Google 收購後,從原本的即時資料庫,擴展更多的功能。 筆者這次研究的是架站功能,雖然玩過 Google App Engine 架站,但還是想體驗一下新技術。 目前 Firebase 官方支
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News