日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 运维知识 > Android >内容正文

Android

详细前后端分离实现facebook第三方登录的全过程（国内一般都是用Android和ios，并且资料稀少）

發布時間：2024/3/24 Android 67 豆豆
生活随笔 收集整理的這篇文章主要介紹了 详细前后端分离实现facebook第三方登录的全过程（国内一般都是用Android和ios，并且资料稀少） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現facebook第三方登錄全過程

  • 需求
  • 官方文檔與校驗工具
  • 詳細步驟
    • 1、注冊一個facebook的賬號
    • 2、登錄https://developers.facebook.com/
    • 3、點擊我的應用
    • 4、創建一個屬于自己的應用
    • 5、選擇類型和詳情
    • 6、回到我的應用界面上
    • 7、點擊應用名字，查看詳情
    • 8、記錄facebook登錄的設置
    • 9、應用權限審核
    • 10、一些基本的準備
    • 11、構建前端的登錄界面
    • 12、點擊登錄按鈕
    • 13、點擊按鈕，繼續
    • 14、訪問口令調試器
    • 15、延長訪問口令期限（一定要在后端完成）
    • 19、拿著長期的token去獲取數據
    • 20、以上就是基本步驟
  • 一些情況說明
    • 登陸頁面一閃而過
    • 實際開發怎么解決
    • 官方文檔錯誤
  • 總結

需求

實習，手上有個海外業務的項目，需要在網頁端實現facebook的第三方登錄。本身國內有防火墻，這個需求就極其稀少，而且一般都是在Android或者ios上實現的，造成了留存的資料少之又少。記錄下這篇博客，也許可以幫助后來者少走點彎路。

官方文檔與校驗工具

facebook官網
facebook登錄官方文檔
網頁版facebook登錄官方文檔
facebook 官方access_token調試工具
以上這些文檔和工具，就是我在開發過程中，所找到的一些較為有用的工具。可以提取不少信息。官方文檔其實都有說，就是沒那么明白。下面我將展示一下詳細的步驟

詳細步驟

1、注冊一個facebook的賬號

你得有一個facebook的賬號，然后才能成為facebook的開發者。

2、登錄https://developers.facebook.com/

利用你的facebook賬號登錄進去，你才是一個開發者。得有這個權限，才能開發第三方登錄。

3、點擊我的應用

4、創建一個屬于自己的應用

5、選擇類型和詳情


6、回到我的應用界面上


就可以看到剛剛創建的應用了。

7、點擊應用名字，查看詳情

要記下來你的client_id 和 client_secret!

8、記錄facebook登錄的設置


比如你的網域是：https://.aliyuncs.com/
有效Oauth跳轉的uri就必須是：https://.aliyuncs.com/path

9、應用權限審核


這個的作用，就是告訴facebook你要使用到用戶的哪些數據，比如，email，和 public_profile。這兩個是可以直接通過的，就是由一般訪問權提升為高級訪問權。已經申請的話會看到前面訪問登記是綠色的，就是高級訪問權了了。

其他的權限，申請了就要facebook審批，審批的周期一般是七天。

在第六步，有個數據使用情況檢查，就是你要在指定的某個時間段之前向facebook做你要使用這些數據的說明，還有承諾合理使用你已經獲得通過的數據權限，合理使用用戶的數據。

10、一些基本的準備

以上，就是你要開發第三方路所要準備的東西，開發的都必須要走https，http不行的。如果沒有這種https域名的，建議可以學習一下使用 ngrok。這個是一個內網穿透的工具，可以臨時使得你的內網和變成可以訪問的外網。

11、構建前端的登錄界面

最簡陋的代碼我貼在下面了，大家可以自取。
=注意點：
1、下面的地址，你要換成自己的應用的id
2、這個界面運行起來后，必須在公網能夠訪問得到，且必須是https開頭的

<html><head><script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v12.0&appId=填自己的應用id&autoLogAppEvents=1"></script><script>function login() {FB.login(function(response){console.log(response); // 在控制臺打印返回的access_token },{scope: 'public_profile,email,user_friends'});}</script></head><body><h1>Facebook login</h1><!-- 自定義登錄按鈕 --><button id="loginBtn" onclick="login();" >login</button></body> </html>

我部署完成之后是這樣子的！

界面如下：

12、點擊登錄按鈕

點擊登錄按鈕，會顯示如下的界面。

13、點擊按鈕，繼續

這樣子就用戶完成你的網站的授權了，你可以訪問facebook的一些關于當前用戶的數據。
我們打開控制臺。

最主要的，就是拿到access_token。這個是個臨時的access_token，大概有效時間只有1個小時。想要校驗當前的access_token的存活時間，你所能訪問用戶的權限，就可以用到上面的權限校驗工具。
訪問口令調試器

復制你的access_token到調試工具，就可以看到有效時間，你所能訪問的用戶的信息的權限等信息。

14、訪問口令調試器

將你的access_token放到這里，就可以看到你的access_token的相關信息。

15、延長訪問口令期限（一定要在后端完成）

這個token只有一個小時的有效時間，我們可能需要在很長一段時間內不定時去訪問用戶的數據。所以，我們必須延長訪問口令期限。

下面有個按鈕，直接就可以延長口令的訪問期限。因為我看到以前別人的博客給的鏈接是失效了，害我在這里白白浪費大半天，如果以后大家遇到我下面給的鏈接失效的情況，大家可以在這里直接調試，并利用瀏覽器自帶的network查看請求的去向后和必要的消息。
https://graph.facebook.com/v12.0/oauth/access_token?__a=1

這里我自己就是看了請求才找到的接口，以前的有一些錯誤或者失效了。還是自己可靠！

兌換長期access_token一定要在后端完成，因為涉及到client_secret，這里我只是為了方便快捷，就沒有使用java去獲取！
兌換長期access_token一定要在后端完成，因為涉及到client_secret，這里我只是為了方便快捷，就沒有使用java去獲取！
兌換長期access_token一定要在后端完成，因為涉及到client_secret，這里我只是為了方便快捷，就沒有使用java去獲取！
兌換長期access_token一定要在后端完成，因為涉及到client_secret，這里我只是為了方便快捷，就沒有使用java去獲取！
一般是拿到了短時效token，傳給后端，后端去獲取長時效token（這個過程中需要使用到client_secret，必須保證client_secret的安全）,并且，查詢數據的時候，也是后端拿著長期的token去查，所以，一定要讓后端去兌換，并且返回的長期token只能服務器知道，給前端的話可能會被人拿到，那就去做壞事你也沒辦法了，但是服務器就不一樣。

19、拿著長期的token去獲取數據

通過下面這個鏈接，可以獲取到用戶的name和id

https://graph.facebook.com/me?access_token=填你自己的access_token


拿到了用戶的id，可以去獲取用戶的其他數據。

https://graph.facebook.com/上面獲取到的用戶id?fields=id,name,email&access_token=填你的token


這就拿到了用戶在facebook上的數據了。
解釋一下其他東西，那個fields=id, 后面跟著的東西，就是你要獲取的用戶的數據，你想要獲取用戶的數據，就必須在用戶登錄的時候進行申請，不然會報錯的。

20、以上就是基本步驟

但是有一些接口啥的，可能過一段時間會改變，推薦大家去看官方文檔并結合我這個流程進行使用。

一些情況說明

登陸頁面一閃而過

比如，我登陸之后，再一次點擊登陸按鈕，還是會彈出那個界面但是一閃而過。
這個是facebook已經登陸了，他再去登陸一次，會覆蓋你原來的短時效token

進入到用戶對應的facebook官網

某個用戶在你的第三方網站登陸之后，facebook會進行一個通知它，這里解除掉登陸信息就可以再進入到登陸界面了。

實際開發怎么解決

facebook的官網文檔里面有提到一個特定的函數，可以檢驗當前用戶是否在授權你的網站登錄facebook并獲取他在facebook上的數據。可以拿著函數的結果去校驗，一旦登陸，就不再顯示當前按鈕即可。
官方文檔鏈接

FB.getLoginStatus(function(response) {statusChangeCallback(response); });

官方文檔錯誤

2021年12月29日15:49:00勘誤，官網使用短時效去兌換長時效的接口有錯誤。
兌換長期口令的文檔

實際上，用的請求方式必須為post。

總結

官方文檔真的得好好仔細研究。如果一個問題，你不知道怎么解決，那么有一個辦法，看官方文檔；如果還不行，那就是你的官方文檔沒看仔細，沒看明白，沒看透！

雖然兩天下來，很痛苦，不過拿到數據的那一刻，我是非常開心的，證明了自己不是只會做一些crud的簡單工作，雖然這個也簡單！

總結

以上是生活随笔為你收集整理的详细前后端分离实现facebook第三方登录的全过程（国内一般都是用Android和ios，并且资料稀少）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。