OneAll 第三方登入整合平台

OneAll 與 Facebook、Google、LINE 的設定紀錄

OneAll

OneAll 是個第三方登入的整合服務,提供單一的 SDK 或 API 可以整合進我們自己的產品提供用戶第三方登入的功能,OneAll 支援的平台超過四十個,下面會示範 OneAll 與 Facebook、Google、LINE 的設定流程。

雖然說 OneAll 已經提供了單一的接口,但在程式串接面以外的部份,包括在各大平台開立帳號、註冊應用、取得密鑰、送審等行政流程還是少不了的,所以即使用了 OneAll,其實還是要對各大平台的審查規範要有所了解。

OneAll 建立站台

本文跳過申請 OneAll 帳號的部份。

在登入 OneAll 後會進入 OneAll 後台,在後台建一個站台:

OneAll - Create a new Site

上圖的那個 domain name 只是識別用,並非用於限定調用 OneAll API,所以可以放心填。限定調用 OneAll API 的設定在下一頁:

OneAll - Quickly review the settings

上圖這頁才是設定 API 網址與限定呼叫網域的地方。

站台建立成功後,進入站台的控制台:

OneAll - Sites

上面的綠色訊息提示我們要在自己的 app 內裝設 OneAll 的 Plugin 或 SDK,左邊選單的「Plugins & Tools」裡面可以看到 OneAll 提供了幾乎所有主流平臺/框架/語言的整合工具,不過看看就好,我們繼續回到 OneAll 設定第三方登入,之後再做整合的工作。

在 Sites → Social Networks 頁面可以看到一大堆第三方登入的平台:

OneAll - Social Networks

上面的黃色訊息提示我們大部分的第三方登入都需要在它們的平台上申請 app ID/密碼/密鑰之類的憑證,再把憑證填入 OneAll 的平台,由 OneAll 統一幫我們串接那些第三方登入平台,而我們自己的 app 則只要串接 OneAll API 即可,雖然各大平台的憑證還是要自己花時間申請,但對串接程式撰寫時間確實是可以大幅節省的,並且各大平台 API 也都會改版,這部分也都是 OneAll 會處理好,我們只要串好 OneAll 即可。

上圖中每個圖示左方的色條顯示了這個平台的第三方登入啟用狀態,紅色表示未啟用,綠色表示啟用,可以看到上圖有一些已經是綠色的,那是因為某些少數平台不需要憑證的關係。

下文是台灣比較多人用的 Facebook、Google、LINE 的設定紀錄,至於我們自己的 app 與 OneAll 的串接部分則會另外做一集說明。

設定 Facebook 登入

要設定 Facebook 登入,需要在 FB 開立一個 app,再在 app 內申請 Facebook 登入的權限。而這可能還會牽扯到相關企業管理平台的商家驗證或開發人員的個人驗證,下文會以都已驗證過的情況進行。

以下操作都在 FACEBOOK for Developers 網站進行。

新增應用程式,程式用途為「任何其它用途」:

FACEBOOK for Developers - 建立應用程式編號

下一步要填一些基本資料:

FACEBOOK for Developers - 建立應用程式編號

就照自己的實際狀況填入,在 OneAll 的網頁也有手把手的教學,可以參考 OneAll 提供的範本填入。

進到 app 的主控板,可以看到一系列 FACEBOOK 的開發者產品,我們要申請「Facebook 登入」:

FACEBOOK for Developers - 新增產品

平台選「網站」:

FACEBOOK for Developers - 快速入門

網址依照實際網址填入:

FACEBOOK for Developers - 快速入門

後續的 2. 設定 Facebook JavaScript SDK、3. 檢查登入狀態、4. 新增「Facebook 登入」按鈕、5. 後續步驟都快速走過看過即可,這些步驟 OneAll 都已經處理好。

接著到「Facebook 登入」→「設定」:

應用程式主控板 - 用戶端與 OAuth 設定

參照 OneAll 的說明設定與填入 OAuth 重新導向 URI。

接著設定基本資料,來到「設定」→「基本資料」:

應用程式主控板 - 基本資料

這邊的隱私政策網址請參照 OneAll 說明的提供,類別也依照 OneAll 說明設定,其它的部分依實際狀況填入。

最單純的 Facebook 登入只會提供用戶的姓名和信箱,是不用把 app 送審的,所以只要把頁面最上面的「調整中」切換成「上線」即完成 FB 這段的設定。

上圖的應用程式編號與應用應用程式密鑰則須回填到 OneAll 的 Facebook 設定頁內,如下圖:

OneAll - Facebook - Setup

接著回到 OneAll 的 Facebook 設定頁,應該會看到如下圖的頁面:

OneAll - Facebook

可以透過 Connection Test 試一下功能的正確性,或是看一下圖示順不順眼,有必要的話回到 FACEBOOK for Developers 做調整。

設定 Google 登入

Google 登入的套路與 Facebook 登入相似,也是要在 Google 開立一個 app(在 Google Cloud 稱為專案),並申請登入 API 的權限,取得密鑰,回填 OneAll,不過因為 Google API 現在都是在 Google Cloud 平台做管理,基本上要先有 Google Cloud 的基礎知識,才有辦法順利設定,如果你又是用 Google Cloud 組織成員帳號做申請,則會牽扯到更複雜的權限設定,在 Google 登入設定上有問題的朋友可以在下方留言討論。

下面的操作都會在 Google Cloud 平台作業,另外請搭配 OneAll 的 Google 設定說明一起服用。

一開始先登入到 Google API 管理資源區,建立一個專案:

Google APIs - 新增專案

名稱和 ID 可以自行取名,換掉 Google Cloud 幫我們預帶的值,勇敢地建下去!

建完回到管理資源,應該會如下圖:

Google APIs - 管理資源

接著在左上角的導覽選單 → API 和服務 → 資料庫,會列出 Google 的 API 產品,從左邊進入「社交」類別,如下圖:

Google APIs - 社交

Google 登入屬於 Google People API,猛擊進入 Google People API 頁面,把它啟用:

Google APIs - Google People API

啟用後會跳轉到 People API 的設定頁面:

Google APIs - People API

上面的訊息提示我們要有憑證,因此我們再進到導覽選單 → API 和服務 → 憑證:

Google APIs - 憑證

好像在打 RPG 一樣,它又提示我們要要去設定同意畫面,如下圖:

Google APIs - OAuth 同意畫面

此處參照 OneAll 的說明,選「外部」,按「建立」進入下個步驟,填表單文書作業:

Google APIs - OAuth 同意畫面

內容請參照 OneAll 提供的值填入。

應用程式首頁連結填我們自己網站的首頁,隱私權政策連結也是填入自己網站上的隱私權政策頁面的網址。

另外右邊的說明最好也讀過,確保遵守 Google 的規則,注意如果有上傳標誌,則必須經過 Google 的驗證,這點比 FB 嚴格。

填完後就「儲存」,又被跳轉到下一頁:

Google APIs - OAuth 同意畫面

因為我有放 logo 的關係,所以必須送交驗證,先把驗證放一邊,回到主線任務,回到左邊的憑證頁面建立憑證,選擇「OAuth 客戶端 ID」,然後繼續進行填表文書作業:

Google APIs - 建立 OAuth 用戶端 ID

這頁要填的內容依照 OneAll 提供的值填入,然後按「建立」,跳轉回憑證區首頁:

Google APIs - OAuth 用戶端已建立

這裡跳出的客戶端 ID 和密碼要填回 OneAll 的設定頁:

OneAll - Google

如果是免驗證的專案,到這邊就完成了。

如果是要驗證的專案,一樣要邊參考 OneAll 的說明邊進行。

回到 Google 的「API 和服務」→ 「網域驗證」:

Google APIs - 網域驗證

沒有第二條路,只能「Add domain」:

Google APIs - 網域驗證

這裡要填的網域請參考 OneAll 提供的值。

接著 Google 又要求要到 Search Console 去驗證這網域,繼續解任務。

Google 網站管理員中心把網域加入,驗證步驟選「其他方法」的「HTML 標記」如下圖:

Google 網站管理員中心 - 驗證

把那行 <meta> 標籤先貼回 OneAll 更新 OneAll 設定後再回到 Google 網站管理員中心按驗證,驗證成功應該會長這樣:

Google 網站管理員中心 - 驗證

接著回 Google API 和服務 → 網域驗證,再加一次 OneAll 提供的網域應該就會成功了:

Google APIs - 網域驗證

文書作業還沒結束,還要回到「OAuth 同意畫面」那邊編輯應用程式:

Google APIs - OAuth 同意畫面

送審前再次確認:

  • 送審的應用程式標誌和網站上是一樣的嗎?應該要是一樣的,但允許不同的版型或配色變體。
  • 應用程式首頁上應該要出現隱私權政策的連結。

完整的規範請看 Google API Services User Data PolicyOAuth API verification FAQs

確定都符合規範後,看到最下面的「送交驗證」,勇敢地按下去,然後又是文書作業,把答案寫一寫交卷。送交驗證後就開始等待,祈禱 Google 的效率比公務員高一點。

設定 LINE 登入

設定 LINE 登入的套路也跟上面的很像。

以下步驟請搭配 OneAll 說明服用。

先到 LINE Developers Console,登入後 Create 一個 provider,取名 OneAll。

接著 Create a new channel,選「LINE Login」,然後開始文書作業:

LINE Developers - Create a channel

因為 LINE Developers Console 有改版,有些欄位名稱與位置和 OneAll 的文件對不上,不過差異不大,正常人應該都可以自行腦補轉換,除非是比較特別的不然就不特別提了。

按下 Create 後回到這個 Channel 的主頁,有四個頁籤如下圖:

LINE Developers - Basic Settings

在 Basic settings 這頁下方有 OpenID Connect 的區塊,必須申請才可以取得用戶的信箱,所以請勇敢的申請,screenshot 應該上傳網站對用戶宣告個資運用的截圖,或者是偷懶上傳網站圖示也有機會通過,因為目前 LINE 對這塊是採程序核准,非人工核准。

接著切換到「LINE login」頁,依照 OneAll 給的 Callback 網址填入,如下圖:

LINE Developers - LINE Login

接著把上面的「Developing」模式切換成「Published」。

接著在 Basic settings 頁找到 Channel ID 和 Channel secret,把它們填回 OneAll 的 LINE 設定頁,並且在 OneAll 的 LINE 設定頁按「Change Requested Data」,把「Email Address」勾選,讓 OneAll 幫我們向 LINE 索取用戶信箱。

LINE 申請起來感覺是最簡單的,FB 居中,Google 是最煩瑣的,充斥著大量的文書作業。

OneAll 的商業模式

最後談談我對 OneAll 商業模式的觀察,在 OneAll 的收費標準裡,免費版的主要限制是每年允許兩千五百個獨立用戶登入,換算下來相當於每個月兩百個獨立用戶,以這樣的標準來看,每月兩百獨立用戶以上的產品,規模可說是相當大了,大到團隊內有足夠的資源可以自行串接各大平台的第三方登入,而省去被 OneAll 收取的費用,總的來說 OneAll 對免費用戶相當慷慨,但尷尬的是用戶可以在產品初期享用 OneAll 的免費額度,直到產品與團隊都夠大了,卻又因為團隊夠大而捨 OneAll 而去,導致 OneAll 對小用戶免費,對大用戶卻也收不了錢的窘境。