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
Amos的沙龍
5會員
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
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
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
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News