专栏首页Danny的专栏Facebook第三方登录流程总结

Facebook第三方登录流程总结

授权Facebook第三方登录流程


有时候为了迅速获客,会在注册登录页支持第三方登录,比如国内一些小众论坛的qq登录

简书的社交账号登录

CSDN的社交账号登录

一些国际的软件/网站支持的比较多的第三方登录是Google第三方登录、Facebook第三方登录等。这里记录下Facebook第三方登录的过程。下面是一个Facebook第三方登录流程示例:

  1. 用户点击Facebook登录按钮,客户端(App、Browser等)向Facebook发起请求,用户在Facebook的页面输入登录信息(用户名、密码……),登录成功后Facebook回调客户端并带回用户的Facebook信息
  2. 客户端把用户登录Facebook的token发送至服务端,服务端调Facebook的token验证接口验证token是否有效
  3. 如果有效,至此Facebook第三方登录就成功了。

上面流程图只是个例子,再往下就是根据业务需求,看都需要用Facebook的那些用户信息,再在经过授权的情况下去调用Facebook接口查询。如果需要继续绑定手机号就再继续走下面绑定手机号的流程。

开发步骤


Facebook应用配置
  1. https://developers.facebook.com 开通Facebook开发者账号
  2. 创建应用
  3. 配置相关参数,在这里把AppId(应用编号)和AppSecret(应用秘钥)记下来。
  1. 添加产品

可以添加Android、IOS、web页面等类型的授权登录

前端授权
  1. 配置回调地址。这里以网页版的授权为例,如果开发网页版的Facebook授权登录,需要在Facebook后台配置有效OAuth跳转URI,就是用户在Facebook登录页面登录成功之后需要回调到部署你自己的登录页面的服务器地址
  1. 授权登录sdk,Facebook官方提供了详细的说明,也有现成的sdk和完整的demo。官方文档: https://developers.facebook.com/docs/facebook-login/web 示例:login.html
<html>
    <head>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=746492673568696&autoLogAppEvents=1"></script>
        <script>
            function login() {
                FB.login(function(response){
                    console.log(response);
                });
            }
        </script>
    </head>
    <body>
        <h1>Facebook登录</h1>
        <!-- 自定义登录按钮 -->
        <button id="loginBtn" onclick="login();" >登录</button> 
    </body>
</html>

           这个网页不能直接用浏览器打开,需要部署在支持https的服务器上。

           下面是登录过程的截图

           登录成功之后可以看到控制台打印出了登录成功后Facebook返回的信息,有accessToken、userID等:

后端校验

       前端拿到登录token后,需要后端校验一下,防止别人拿其他平台的appId授权的token来请求。

       可以用 https://graph.facebook.com/debug_token?access_token={App-token}&input_token={User-token}这个接口来校验token,User-token为用户登录的token(比如上面用户登录返回的accessToken),App-token是由appId和appSecret拼接而成,格式为 {appId}%7C{appSecret}%7C就是|urlencode之后的编码。

       比如appId是746492673568696,appSecret是71cf85a8ba36c84b22bc3461e143e16b,那就可以直接用发送get请求https://graph.facebook.com/debug_token?access_token=746492673568696%7C71cf85a8ba36c84b22bc3461e143e16b&input_token=前端用户登录返回的accessToken,返回结果的格式如下

{
    "data": {
        "app_id": "746492673568696",
        "type": "USER",
        "application": "shop",
        "data_access_expires_at": 1594896505,
        "expires_at": 1587124800,
        "is_valid": true,
        "scopes": [
            "user_birthday",
            "user_likes",
            "user_photos",
            "user_friends",
            "user_status",
            "email",
            "public_profile"
        ],
        "user_id": "110029804771531"
    }
}

       其中is_valid就是token是否校验成功。如果还需要获取其他用户信息,可以参考Facebook提供的api https://developers.facebook.com/docs/graph-api/using-graph-api

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js中Facebook第三方登录api实现[亲测可用]

    demo 地址请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417096994417412

    芈渡
  • 浅谈第三方登录用户表结构设计方案

    国民两大流量入口,大家不说也想到了,分别是微信和QQ。所以为了方便获取用户来源都对接了微信登录或者QQ登录,这一类型的第三方登录入口。今天就以对接微信登录、QQ...

    java乐园
  • Facebook的Gmail验证机制存在的CSRF漏洞

    本文分享的是一个Facebook CSRF漏洞,用Gmail或G-Suite账户来验证新创建Facebook账户时存在的CSRF令牌验证机制漏洞,攻击者利用该漏...

    FB客服
  • Facebook OAuth漏洞导致的Facebook账户劫持

    平时在用“Login with Facebook”功能进行跳转登录时,因为其用到了多个URL重定向跳转,所以总会给我有一种不安全的感觉。但是,要想发现Faceb...

    FB客服
  • uni-app入门教程(7)第三方登录和分享

    本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uni-app实...

    cutercorley
  • laravel5实现微信第三方登录功能

    最近手头一个项目需要实现用户在网站的第三方登录(微信和微博),后端框架laravel5.4。

    砸漏
  • github 授权登录教程与如何设计第三方授权登录的用户表

    需求:在网站上想评论一篇文章,而评论文章是要用户注册与登录的,那么怎么免去这麻烦的步骤呢?答案是通过第三方授权登录。本文讲解的就是 github 授权登录的教程...

    夜尽天明
  • Facebook 改漏洞悬赏政策:报告平台第三方应用可获奖

    北京时间9月18日上午消息,Facebook平台上的第三方应用可访问用户数据,但这些应用近期被发现诸多漏洞。随着相关批评越来越多,Facebook近日宣布,将其...

    C4rpeDime
  • 网站的无密码登录

    大部分网站,都要求用户登录。 常见的做法,是让用户注册一个账户。 ? 这种做法并不让人满意。 对于用户来说,每个网站必须记住一个密码,非常麻烦;对于开发者来说,...

    ruanyf

扫码关注云+社区

领取腾讯云代金券