实现 Facebook 第三方授权登录

warning: 这篇文章距离上次修改已过238天,其中的内容可能已经有所变动。

最近做项目要实现Facebook的第三方登录,这简单的记录一下。

目前Facebook的第三方登录有很多方案,且官方提供SDK方便接入。但是我这个项目同时要实现网页和客户端。所以选择了 Facebook 手动构建登录流程的方案。

是不是听着很耳熟?对!和 《实现 Google 第三方授权登录》 一样~

Facebook 手动构建登录流程Facebook 手动构建登录流程


配置 Facebook 应用

访问此处:https://developers.facebook.com/apps/?show_reminder=true

新建一个应用

选择打造关联体验选择打造关联体验


配置测试用户

配置测试用户配置测试用户


配置回调地址

配置回调地址配置回调地址


Facebook OAuth页面Facebook OAuth页面

生成OAuth链接

其实Facebook的文档也很详细:传送门

https://www.facebook.com/v10.0/dialog/oauth
?client_id={app-id}
&redirect_uri={redirect-uri}
&state={state-param}
&response_type=token
参数说明
client_id可在应用面板中找到的应用编号
redirect_uri您希望将登录的用户重定向回的网址。该网址将捕获来自“登录”对话框的响应。如果您在桌面应用中的网页视图中使用该网址,则必须将其设置为 https://www.facebook.com/connect/login_success.html
state您的应用创建的字符串值,用于维持请求和回调之间的状态。此参数应用于防止跨站请求伪造,并会在重定向 URI 中原样传回给您。
response_type返回的授权码类型,这里用的token

服务器获取通信凭据

根据回调获得的code和失效时间,服务器GET下面的地址:

GET
https://graph.facebook.com/oauth/access_token
?client_id={your-app-id}
&client_secret={your-app-secret}
&grant_type=client_credentials
参数说明
client_id可在应用面板中找到的应用编号
client_secret可在应用面板中找到的应用密钥
grant_typeclient_credentials,获取token

验证服务器通信凭据是否有效

GET
https://graph.facebook.com/debug_token
?input_token={token-to-inspect}
&access_token={app-token-or-admin-token}
参数说明
input_token您需要检查的凭据
access_token应用访问口令,或应用开发者的访问口令

验证用户身份

根据用户登录成功的回调数据,服务器GET下面的地址:

GET
https://graph.facebook.com/v10.0/oauth/access_token
?client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
参数说明
client_id可在应用面板中找到的应用编号
redirect_uri此为必需参数,且必须与开始 OAuth 登录流程时使用的原始 request_uri 相同。
client_secret唯一的应用密钥,显示在应用面板中。绝不能将此应用密钥绝放入可能被反编译的客户端代码或二进制文件中。保持密钥的绝对机密至关重要,因为密钥是应用和所有用户的安全核心。
code从上述“登录”对话框重定向接收的参数。

获取用户访问口令

GET
https://graph.facebook.com/v10.0/oauth/access_token
?client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
参数说明
client_id可在应用面板中找到的应用编号
redirect_uri此为必需参数,且必须与开始 OAuth 登录流程时使用的原始 request_uri 相同。
client_secret唯一的应用密钥,显示在应用面板中。绝不能将此应用密钥绝放入可能被反编译的客户端代码或二进制文件中。保持密钥的绝对机密至关重要,因为密钥是应用和所有用户的安全核心。
code从上述“登录”对话框重定向接收的参数。

获取用户邮箱

GET
https://graph.facebook.com/v10.0/{your-user-id}
?fields=id,name,email
&access_token={your-user-access-token}

获取的用户邮箱和ID获取的用户邮箱和ID

ok,现在可以使用邮箱和ID关联账户了~

已有 2 条评论

  1. whitetree whitetree

    博主大大,麻烦问下您这篇文章的目录是如何实现的呢?

    1. 目前我用的是@老高大哥的插件《Table Of Contents 自动文章目录》,这个插件是遍历正则匹配标签,并插入id,然后输出目录列表并插入文章最开头,现在我用的是自己魔改了下的版本。
      下载地址:http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》