【PHPBB應用】phpbb如何設定Facebook的OAuth認證?

我相當喜歡一些新的科技,與手機3C等產品,所以我也會把一些新科技與手機3C等產品的開箱、使用心得與介紹都放在這裡,當然,一些好的網路服務我也會放上來推薦給大家。
回覆文章
頭像
caishin
系統管理員
文章: 1774
註冊時間: 2019-06-01, 14:10
聯繫:

【PHPBB應用】phpbb如何設定Facebook的OAuth認證?

文章 caishin »


其實我也是花了好幾週的時間在網路上慢慢找資料然後慢慢測試,在昨天就莫名其妙的設定成功,但未免我日後要重架phpbb或幫別人架設phpbb時需要用到Facebook的OAuth認證這個設定,所以決定把Facebook的OAuth認證設定步驟寫下來。

先到Facebook for Developers建立一個應用程式,進入頁面之後,點擊右上角的(我的應用程式),然後選(建立應用程式)。
phpbb如何設定Facebook的OAuth認證?1.png
phpbb如何設定Facebook的OAuth認證?1.png (292.3 KiB) 已瀏覽 1460 次

接著在跳出來的視窗中的(顯示名稱)輸入你想要給這個應用程式的名稱,譬如(Test),輸入好後就點擊右下角的(建立應用程式編號)。
phpbb如何設定Facebook的OAuth認證?2.png
phpbb如何設定Facebook的OAuth認證?2.png (89.94 KiB) 已瀏覽 1460 次

然後在跳出來的安全驗證視窗中進行安全驗證,請把圖片內框起來的地方打勾後,點擊右下角的(提交)。
phpbb如何設定Facebook的OAuth認證?3.png
phpbb如何設定Facebook的OAuth認證?3.png (326.83 KiB) 已瀏覽 1460 次

稍等一下後就會進入應用程式的設定平台,請在進入設定平台後,點擊左方的(設定)、(基本資料),把應用程式相關的資訊打開來。
phpbb如何設定Facebook的OAuth認證?4.png
phpbb如何設定Facebook的OAuth認證?4.png (96.48 KiB) 已瀏覽 1460 次

進入應用程式的基本資料後,請先點擊(應用程式密鑰)的顯示,把應用程式密鑰打開來,這樣才能夠被複製使用。
phpbb如何設定Facebook的OAuth認證?5.png
phpbb如何設定Facebook的OAuth認證?5.png (99.29 KiB) 已瀏覽 1460 次

點擊(顯示)後,系統會跳出(請再次輸入密碼)的視窗,請在(密碼)那裡輸入你登入臉書的密碼,然後點擊右下角的(提交)。
phpbb如何設定Facebook的OAuth認證?6.png
phpbb如何設定Facebook的OAuth認證?6.png (118.08 KiB) 已瀏覽 1460 次

然後請把顯示出來的(應用程式編號)與(應用程式密鑰)記錄下來。
phpbb如何設定Facebook的OAuth認證?7.png
phpbb如何設定Facebook的OAuth認證?7.png (110.18 KiB) 已瀏覽 1460 次

接著就進入自己phpbb的ACP,在(客戶端通訊)這一欄點擊(認證設定)。
phpbb如何設定Facebook的OAuth認證?8.png
phpbb如何設定Facebook的OAuth認證?8.png (6.71 KiB) 已瀏覽 1460 次

然後在認證設定的頁面中(請選擇一個認證的方式)這裡選擇(OAuth)。
phpbb如何設定Facebook的OAuth認證?9.png
phpbb如何設定Facebook的OAuth認證?9.png (42.6 KiB) 已瀏覽 1460 次

再來把剛剛從Facebook for Developers那裡得到的(應用程式編號)與(應用程式密鑰)分別輸入進下方(Facebook)的欄位,(應用程式編號)輸入進(公鑰 (key)),(應用程式密鑰)輸入進(私鑰 (Secret))。
phpbb如何設定Facebook的OAuth認證?10.png
phpbb如何設定Facebook的OAuth認證?10.png (14.39 KiB) 已瀏覽 1460 次

輸入好後記得把網頁拉到下方點擊(送出)。
phpbb如何設定Facebook的OAuth認證?11.png
phpbb如何設定Facebook的OAuth認證?11.png (7.15 KiB) 已瀏覽 1460 次

接著請回到Facebook for Developers在(設定)、(基本資料)這裡的(應用程式網域)把你的網站網址輸入進去,譬如我就是輸入(https://www.caishin.tw),輸入好後再按下右下角的(變更)。
phpbb如何設定Facebook的OAuth認證?12.png
phpbb如何設定Facebook的OAuth認證?12.png (104.78 KiB) 已瀏覽 1460 次

再來點擊網頁左方的(產品)來(新增產品)。
phpbb如何設定Facebook的OAuth認證?13.png
phpbb如何設定Facebook的OAuth認證?13.png (100.96 KiB) 已瀏覽 1460 次

進入(新增產品)頁面後,在(Facebook 登入)這裡點擊(設定)。
phpbb如何設定Facebook的OAuth認證?14.png
phpbb如何設定Facebook的OAuth認證?14.png (51.99 KiB) 已瀏覽 1460 次

接著在跳出來的視窗中網頁左邊的(產品)、(Facebook登入)點擊(設定)。
phpbb如何設定Facebook的OAuth認證?15.png
phpbb如何設定Facebook的OAuth認證?15.png (151.65 KiB) 已瀏覽 1460 次

然後在右方跳出來的(用戶端 OAuth 設定)視窗中進行設定,把(用戶端 OAuth 登入)、(網路 OAuth 登入)、(嵌入的瀏覽器 OAuth 登入)全部調整為(是)。
phpbb如何設定Facebook的OAuth認證?16.png
phpbb如何設定Facebook的OAuth認證?16.png (101.68 KiB) 已瀏覽 1460 次

接著要在(有效的 OAuth 重新導向 URI)這個欄位輸入資料,這個步驟挺重要的。
phpbb如何設定Facebook的OAuth認證?17.png
phpbb如何設定Facebook的OAuth認證?17.png (98.71 KiB) 已瀏覽 1460 次

請在(有效的 OAuth 重新導向 URI)這個欄位依序輸入以下四筆連結,然後點擊右下角的儲存變更。
(請在你的網站網址這裡輸入你的網址,譬如我的就是:https://www.caishin.tw

代碼: 選擇全部

https://www.你的網站網址/ucp.php?i=ucp_auth_link&mode=auth_link&link=1&oauth_service=facebook
https://你的網站網址/ucp.php?i=ucp_auth_link&mode=auth_link&link=1&oauth_service=facebook
https://www.你的網站網址/ucp.php?mode=login&login=external&oauth_service=facebook
https://你的網站網址/ucp.php?mode=login&login=external&oauth_service=facebook

步驟走到這裡就算整個完成了,接下來就可以回到你的phpbb網站,先登出你的帳號後再登入,看看在登入頁面會不會出現一個Facebook的小按鈕,有的話就點擊看看,若點擊過後系統有跳到Facebook去要資料的要求,那就代表設定成功,若沒有,就請檢查一下(有效的 OAuth 重新導向 URI)這個地方的網址有沒有輸入錯誤,或者是你的網站還沒去開啟(安全超文本傳輸協議(HTTPS)),建議先去把(安全超文本傳輸協議(HTTPS))弄一弄,不然(有效的 OAuth 重新導向 URI)這裡會出現錯誤。
phpbb如何設定Facebook的OAuth認證?18.png
phpbb如何設定Facebook的OAuth認證?18.png (85.23 KiB) 已瀏覽 1460 次



沒意外的話,2024年5月30日,這個論壇網站就會自動消失。

我之後多會在噗浪這個社群平台活動。

請大家到噗浪找我:https://www.plurk.com/caishin

Link:
BBcode:
HTML:
Hide post links
Show post links
回覆文章