iOS三方登录 - Facebook登录

引言

在出海APP的开发中，集成主流社交平台的三方登录已成为必不可少的一环。Facebook 作为全球最大的社交网络平台之一，其提供的 Facebook 登录功能能够大大简化用户注册和登录流程，提高用户体验，减少流失率。对于开发者而言，接入 Facebook 登录不仅能提升用户的便捷性，还能为产品带来更广泛的用户群体。在本篇博客中，我们将介绍如何在 iOS 项目中集成 Facebook 三方登录，帮助你快速实现这一功能。

准备工作

首先，需要前往 Facebook 开发者平台注册开发者账号，并创建一个新的应用。在创建应用时，您需要填写相关的应用信息。完成应用创建后，获取用于 Facebook 登录的必要信息，包括APP ID​​​​​​​ 和 CLIENT-TOKEN。

可以在 Facebook 开发者平台 完成这些步骤。

集成Facebook SDK

官方推荐使用Swift Package Manager集成，但查看

CocoaPods的方案仍然也可以安装Facebook SDK。

​

添加facebook-ios-sdk

需要先设置开发环境，可以选择使用Swift软件包管理工具（SPM）

1. 在 Xcode 中，点击 File（文件）> Swift Packages（Swift 软件包）> Add Package Dependency（添加软件包依赖项）。
2. 在出现的对话框中，输入存储库网址：GitHub - facebook/facebook-ios-sdk: Used to integrate the Facebook Platform with your iOS & tvOS apps.。
3. 选择合适版本号。
4. 完成提示，选择要在项目中使用的库。

​

​

配置项目Info.plist文件

在Info.plist文件中配置项目信息，可以直接采用源码的形式。

1. 右键点击Info.plist，然后选择Open as（打开方式）-> Source Code（源代码）
2. 将下俩的XML代码复制并粘贴到文件正文中。
3. 在[CFBunldeURLSchemes]键内的 <array><string> 中，将 APP-ID 替换为您的应用编号。
4. 在 FacebookAppID 键内的 <string> 中，将 APP-ID 替换为您的应用编号。
5. 在 FacebookClientToken 键内的 <string> 中，将 CLIENT-TOKEN 替换为您在应用面板设置 > 高级 > 客户端口令中找到的值。
6. 在 FacebookDisplayName 键内的 <string> 中，将 APP-NAME 替换为您的应用名称。
7. 如要使用任何 Facebook 对话框（如登录、分享、应用邀请等），实现将应用切换至 Facebook 应用的功能，则应用程序的 Info.plist 还需包含以下代码：

<key>CFBundleURLTypes</key>
<array><dict><key>CFBundleURLSchemes</key><array><string>fbAPP-ID</string></array></dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

<key>LSApplicationQueriesSchemes</key>
<array><string>fbapi</string><string>fb-messenger-share-api</string>
</array>

初始化Facebook SDK

将 AppDelegate.swift 方法中的代码更换为以下代码。此代码会在启动应用时初始化 SDK，并在您执行登录或分享操作时，允许 SDK 处理原生 Facebook 应用的登录及分享。否则，用户便须登录 Facebook 才能使用应用内浏览器进行登录。

// AppDelegate.swift
import UIKit
import FacebookCore@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {    func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {          ApplicationDelegate.shared.application(application,didFinishLaunchingWithOptions: launchOptions)return true}func application(_ app: UIApplication,open url: URL,options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {ApplicationDelegate.shared.application(app,open: url,sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,annotation: options[UIApplication.OpenURLOptionsKey.annotation])}  
}

​​​​​​​

iOS 13 将打开网址的功能移到了 SceneDelegate 中。如果您使用的是 iOS 13，请将以下方法添加到 SceneDelegate 中，以便相关操作（如登录或分享等功能）可按照预期运作：

// SceneDelegate.swift
import FacebookCore...
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {guard let url = URLContexts.first?.url else {return}ApplicationDelegate.shared.application(UIApplication.shared,open: url,sourceApplication: nil,annotation: [UIApplication.OpenURLOptionsKey.annotation])
}

实现Facebook登录

Facebook为我们提供了一个预先设计好的Facebook登录按钮FBLoginButton，它封装了登录所需的所有流程，可以简化登录操作。但是通常情况下为了使按钮更符合自己APP的风格都会进行自定义，那么我们可以使用LoginManager类来进行登录操作。

FBLoginButton方案

要向应用添加具有 Facebook 品牌标识“登录”按钮，请将下列代码片段添加至视图控制器。

// Add this to the header of your file, e.g. in ViewController.swift 
import FacebookLogin// Add this to the body
class ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()let loginButton = FBLoginButton()loginButton.permissions = ["public_profile", "email"]loginButton.center = view.centerview.addSubview(loginButton)}
}

此时，应该能运行应用并使用 Facebook“登录”按钮登录。

LoginManager方案

在定义的点击事件中使用LoginManager的实例进行登录。

import FBSDKLoginKitlet loginManager = LoginManager()// 自定义按钮点击事件
@objc func customLoginButtonTapped() {loginManager.logIn(permissions: [.publicProfile, .email], from: self) { (result, error) inif let error = error {print("Error during login: \(error.localizedDescription)")return}guard let result = result, !result.isCancelled else {print("User cancelled login")return}print("Login successful, permissions: \(result.grantedPermissions)")// 你可以在这里处理登录成功后的逻辑}
}

检查当前登录状态

您的应用一次只能允许一位用户登录。我们使用 AccessToken.current 代表登录应用的每位用户。

LoginManager 会为您设置此口令，而且在设置 AccessToken.current 时，也会将其写入 Keychain 存储。

AccessToken 包含的 userID 可用于识别用户。

您应该更新视图控制器，在加载时便检查当前口令。这有助于在用户已经向您的应用授予权限后，避免不必要地重复显示登录流程：

override func viewDidLoad() {super.viewDidLoad()if let token = AccessToken.current,!token.isExpired {// User is logged in, do work such as go to next view controller.}
}

结语

通过以上步骤，我们成功地在 iOS 项目中集成了 Facebook 三方登录功能。借助 Facebook 登录，用户可以更加便捷地注册和登录应用，同时也能提升用户体验。希望这篇博客能帮助你在项目中顺利实现 Facebook 登录，带来更好的用户增长与留存。