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.center
        view.addSubview(loginButton)
    }
}

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

LoginManager方案

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

import FBSDKLoginKit

let loginManager = LoginManager()

// 自定义按钮点击事件
@objc func customLoginButtonTapped() {
    loginManager.logIn(permissions: [.publicProfile, .email], from: self) { (result, error) in
        if 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 登录,带来更好的用户增长与留存。

### 如何在 UniApp 中集成第三方登录 #### 微信登录实现 对于微信登录,在用户操作流程上,当用户点击微信登录按钮后,应用会通过 `uni.getProvider` 方法获取可用的服务提供商列表。确认微信作为服务提供方存在之后,调用 `uni.login` 函数并指定参数 `provider: 'weixin'` 来发起登录请求[^1]。 ```javascript async function wechatLogin() { try { const { provider } = await uni.getProvider({ service: 'oauth' }); if (provider.includes('weixin')) { const response = await uni.login({ provider: 'weixin' }); console.log(response.authResult, 'wechat_login_result'); // 处理后续逻辑,比如发送authResult给服务器验证 } } catch (error) { console.error(error); } } ``` #### QQ 登录实现 同样地,为了支持QQ登录,也需要先检测QQ是否被列作有效的OAuth服务商之一。一旦确定可以使用,则再次利用 `uni.login` 接口来执行具体的登录动作,并设置相应的 `provider` 参数为 `'qq'`[^2]。 ```javascript async function qqLogin() { try { const { provider } = await uni.getProvider({ service: 'oauth' }); if (provider.includes('qq')) { const response = await uni.login({ provider: 'qq' }); console.log(response.authResult, 'qq_login_result'); // 继续处理其他业务逻辑... } } catch (error) { console.error(error); } } ``` #### Facebook 和 Google 登录实现 Facebook和Google的登录过程与上述两种方式相似,都是先判断是否存在对应的OAuth服务提供商,再通过 `uni.login` 完成实际的身份认证工作。不同之处在于需要分别设定 `provider` 的值为 `'facebook'` 或者 `'google'`[^3][^4]。 ```javascript // Facebook Login Functionality async function facebookLogin() { try { const { provider } = await uni.getProvider({ service: 'oauth' }); if (provider.includes('facebook')) { const { authResult } = await uni.login({ provider: 'facebook'}); console.log(authResult, 'fb_login_rs'); // 发送authResult至后台完成最终登录状态更新 } } catch (err) { console.error(err); } } // Google Login Functionality async function googleLogin() { try { const { provider } = await uni.getProvider({ service: 'oauth' }); if (provider.includes('google')) { const { authResult } = await uni.login({ provider: 'google'}); console.log(authResult, 'google_login_rs'); // 后续处理如向服务器提交授权码等 } } catch (err) { console.error(err); } } ``` 针对iOS平台上的谷歌登录情况特殊说明如下:可以通过特定插件方法提前查询用户的登录状况,这有助于改善用户体验,减少不必要的重复登录操作[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值