Facebook第三方登录对接

一、背景调研

1、什么是第三方登录?

第三方登录是基于用户在第三方平台上已有的账号和密码来快速完成己方应用的登录或者注册的功能。而这里的第三方平台,一般是已经拥有大量用户的平台,国外的比如Facebook,Twitter等,国内的比如微博、微信、QQ等。 第三方登录的目的是使用用户在其他平台上频繁使用的账号,来快速登录己方产品,也可以实现不注册就能登录。

2、第三方登录的优缺点分析

优点:

简化注册环节,减少可能因为注册繁琐带来的用户损失;简化用户设置个人信息过程,通过第三方登录,直接获取用户头像昵称等基本个人信息,无需用户自行设置;共享账号已有的用户关系,用户进入产品中就能找到熟悉的人,容易留住用户,发现同样使用该应用也用同样第三方方式登录的好友,会有惊喜感;节省用户的记忆成本,用户在使用多个应用时,只需使用第三方登录即可,无需记得每个平台的账户和密码;用户可以把平台上的某些内容一键分享到第三方平台。

缺点:

后台没有创建自己的账户体系时,只用第三方登录,不便于更多维度收集用户信息(主要是用户手机、邮箱),导致后期无法更精细化执行一些运营的策略,比如一些电商平台这一点尤其重要;后台创建了自己的账户体系时,若没有设计好合理的第三方和本地账户对接的方案,会导致同一个用户在平台上有多个账号的情况发生;会受到第三平台影响,比如第三方账户因为某种原因封号了,则会直接导致用户的流失;隐私可能会受到影响,导致自己的一些状态,或者信息间接的被第三方账户里的好友看到。

二、技术调研

登录具体流程时序图
在这里插入图片描述
1、用户点击Facebook登录按钮, 开始调用SDK的相关方法,进入登录流程
2、Facebook登录成功后,返回AccessToken 给APP
3、APP侧拿到AccessToken后,从中提取出部份数据,如userId, token等,调用我们自己用户服务端的登录接口
4、用户服务端判断该用户是否为新用户,如果是新用户,则要求绑定手机号。然后新增一条用户数据记录以及三方用户关联记录。
5、后端用户服务器返回登录的状态给APP

三、Android端详细接入方案

1、官方文档

https://developers.facebook.com/docs/facebook-login/android

2、准备相关资源

2.1 去官网上注册帐号
2.2 创建APP, 得到AppId
在这里插入图片描述

2.3 输入相关的信息
在这里插入图片描述

2.4 创建成功后会得到一个APPID
在这里插入图片描述

2.5 选择Login功能
在这里插入图片描述

2.6 根据需要选择各端的接入方案
在这里插入图片描述

3、实施步骤

3.1、具体步骤可以参看:https://developers.facebook.com/apps/317000860444250/fb-login/quickstart/
3.2、需要设置包名,key hash, 根据文档配置即可。
3.3、官方Demo https://github.com/facebook/facebook-android-sdk

4、示例代码

4.1 嵌入登录的按钮

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/info"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:textSize="18sp"
        />
 
    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp" />
 
</LinearLayout>

4.2 注册登录的回调

mLoginButton.registerCallback(
    mCallbackManager,
    new FacebookCallback<LoginResult>() {
      @Override
      public void onSuccess(@NonNull LoginResult loginResult) {
        setResult(RESULT_OK);
        finish();
      }
 
      @Override
      public void onCancel() {
        setResult(RESULT_CANCELED);
        finish();
      }
 
      @Override
      public void onError(@NonNull FacebookException e) {
        // Handle exception
      }
    });

4.3 登录后返回的数据LoginResult, 其数据结构如下:

data class LoginResult
@JvmOverloads
constructor(
    val accessToken: AccessToken,
    val authenticationToken: AuthenticationToken? = null,
    val recentlyGrantedPermissions: Set<String>,
    val recentlyDeniedPermissions: Set<String>
)

4.4 AccessToken的数据结构

constructor(
  accessToken: String,
  applicationId: String,
  userId: String,
  permissions: Collection<String?>?,
  declinedPermissions: Collection<String?>?,
  expiredPermissions: Collection<String?>?,
  accessTokenSource: AccessTokenSource?,
  expirationTime: Date?,
  lastRefreshTime: Date?,
  dataAccessExpirationTime: Date?,
  graphDomain: String? = DEFAULT_GRAPH_DOMAIN
)

5、Demo演示(以Instagram为例)

场景一:如果用户手机安装有Facebook,但没有登录,此时进入Instagram登录页,采用了Facebook登录,点击登录页的按钮,跳转到Facebook的登录页,登录成功后,再跳回到Instagram.
在这里插入图片描述
在这里插入图片描述

场景二:如果用户手机没有安装Facebook app, 此时进入Instagram登录页,采用了Facebook登录,点击登录页的按钮, 会打开一个H5页面,用户输入帐号,密码,登录成功后再跳转回Instagram 登录页,走后续流程。
在这里插入图片描述
在这里插入图片描述

.
场景三:如果用户的手机装有facebook app, 并且登录成功,在Instagram app首页的登录按钮会显示用户的Facebook呢称,点击登录,即可采用facebook帐号登录
在这里插入图片描述

6、其它

SDK 版本号
最小版本号使用 8.1, 建议使用最新版本
implementation ‘com.facebook.android:facebook-android-sdk:latest.release’

四、IOS端详细接入方案

1、 官方文档

https://developers.facebook.com/docs/facebook-login/ios

2、准备相关资源

2.1 去官网上注册帐号
2.2 创建APP, 得到AppId
在这里插入图片描述
2.3 输入相关的信息
在这里插入图片描述

2.4 创建成功后会得到一个APPID
在这里插入图片描述

2.5 选择Login功能
在这里插入图片描述

2.6 根据需要选择各端的接入方案
在这里插入图片描述

3、实施步骤

3.1、具体步骤可以参看:https://developers.facebook.com/apps/317000860444250/fb-login/quickstart/
3.2、需要设置包名,key hash, 根据文档配置即可。

4. Demo演示

核心方法:

1、 调用facebook登录事件,监听回调
在这里插入图片描述

已经登录过的页面
在这里插入图片描述

2、 监听登录结果
在这里插入图片描述

也可以直接以这种方式访问,accessToken SDK在登录完成以后会存储在keychain里面
在这里插入图片描述

3、返回的数据

得到的数据对象为 FBSDKAccessToken,具体属性查看下图

userID 作为用户标识
在这里插入图片描述
在这里插入图片描述

五、三方登录与现有用户系统整合

数据库表设计(参考):https://justauth.wiki/features/integrate-existing-systems/#%E5%8F%91%E7%8E%B0%E9%97%AE%E9%A2%98

注:由于网络限制,在使用国外平台时,需要额外配置代理服务器地址和端口号。需要IT统一提供。

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值