[iOS] 페이스북 로그인 SDK 적용

안녕하세요 🐾

오랜만에 찾아뵙네요. 최근 새집으로 이사도하고 인테리어까지 하느라 정신이 없었는데 이제야 여유가 생기고 있는것 같아요. 

다시 달립니다! 후다닷

 

오늘은 iOS 페이스북 로그인 SDK 적용을 위한 과정과 결과를 포스팅 하였습니다.

페이스북 외에도 다른 SNS 로그인 SDK 관련 글도 있으니 아래 링크 참고 부탁드립니다 :)

 

2023.12.26 - [iOS/Swift] - [iOS] 구글 로그인 SDK 연동하기

2023.06.21 - [iOS/Swift] - [iOS] 카카오톡 로그인 SDK 연동하기

2023.06.21 - [iOS/Swift] - [iOS] 네이버 로그인 SDK 연동하기

 

※ 23년 12월 SDK 기준으로 작성된 글 입니다.

---

 

 

1. 프로젝트 설정

1.1 프로젝트 앱 생성

페이스북 로그인 개발자 페이지에서 앱 만들기를 통해 앱 생성이 필요합니다.

 

아래와 같이 상단 체크상자를 선택

 

앱 이름 및 이메일 추가한 후 앱 만들기 버튼 선택

 

1.2 프로젝트 앱 설정

설치가 완료되면 프로젝트 앱 대시보드로 이동됩니다.

앱 설정 - 기본 설정 - 플랫폼 추가를 선택

 

플랫폼 - iOS - 다음

 

생성된 iOS 플랫폼 항목에 Xocde 프로젝트와 동일한 번들 ID입력후 변경내용 저장

 

이용사례에서 맞춤 설정 선택 

 

 

하단의 이메일 권한 추가버튼 선택하여 추가

 

1.3 SDK 설치

SDK는 아래와 같이 사용할 목적에 맞는 라이브러리를 추가해야 합니다.

FacebookLogin , FacebookCore패키지를 설치합니다.

 

SPM 설치

프로젝트 설정 → Package Dependancies → https://github.com/facebook/facebook-ios-sdk 추가 

 

CocoaPods 설치

in podfile,

pod 'FBSDKLoginKit'

pod 'FBSDKCoreKit'

in terminal,

pod install

 

1.4 Xocde 설정

info.plist 파일을 소스코드 뷰어 모드로 오픈

 

 

아래와 같이 <dict>...</dict> 사이에 코드블록을 삽입, 주석이 되어있는 코드만 넣어주세요!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>UIApplicationSceneManifest</key>
	<dict>
		<key>UIApplicationSupportsMultipleScenes</key>
		<false/>
		<key>UISceneConfigurations</key>
		<dict>
			<key>UIWindowSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneConfigurationName</key>
					<string>Default Configuration</string>
					<key>UISceneDelegateClassName</key>
					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
					<key>UISceneStoryboardFile</key>
					<string>Main</string>
				</dict>
			</array>
		</dict>
	</dict>
    
    <!-- ✨ 이곳에 붙여넣기 -->
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <!-- fb[APP_ID] 입력 -->
                <string>fb206382785860513</string>
            </array>
        </dict>
    </array>
    <!-- [APP_ID] 입력 -->
    <key>FacebookAppID</key>
    <string>206382785860513</string>
    
    <!-- [CLIENT_TOKEN] 입력 -->
    <key>FacebookClientToken</key>
    <string>329a1c089c16f5f45c3b322a74e15e03</string>
    
    <!-- [DISPLAY_NAME] 입력 -->
    <key>FacebookDisplayName</key>
    <string>LoginTest</string>
    
    <!-- Faceboook 앱을 통해 Share, Login 등의 작업을 수행할 경우 -->
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>fbapi</string>
      <string>fb-messenger-api</string>
      <string>fbauth2</string>
      <string>fbshareextension</string>
    </array>
</dict>
</plist>

 

※위 코드에서 채워야하는 정보들은 페이스북 프로젝트의 앱 설정에서 기본 설정과 고급 설정에서 확인 할 수 있으며 아래와 같습니다!

 

 

2. 코드 작성

2.1 AppDelegate.swift

import UIKit
import FacebookCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        ApplicationDelegate.shared.application( application, didFinishLaunchingWithOptions: launchOptions )//Facebook loing 하기 위해 사용된 코드
        FBSDKCoreKit.Settings.shared.appID = "206382785860513"
        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])
    }

    // MARK: UISceneSession Lifecycle
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }


}

 

2.2 SceneDelegate.swift

아래의 메소드만 추가

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])
}

 

2.3 ViewController.swift

Facebook 로그인 버튼을 통해 로그인이 이뤄지면, 델리게이트 메소드에서 사용자 정보를 가져오는 코드입니다.

로그인 된 사용자 정보 조회는 페이스북의 Graph API를 이용합니다.

//
//  ViewController.swift
//  FacebookLoginTest
//
//  Created by Assum on 2023/07/10.
//

import UIKit
import SnapKit
import FacebookLogin

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let loginButton = FBLoginButton()
        loginButton.center = view.center
        loginButton.permissions = ["public_profile", "email"]
        loginButton.delegate = self
        view.addSubview(loginButton)
    }
}

extension ViewController: LoginButtonDelegate {
    func loginButton(_ loginButton: FBLoginButton, didCompleteWith result: LoginManagerLoginResult?, error: Error?) {
        // tokenString이나 userID만 필요할 경우 아래의 코드만 수행
        /*
        guard let result = result else { return }
        let tokenString = result.token?.tokenString
        let userID = AccessToken.current?.userID
        */
        
        // Graph API를 사용하여 Current AccessToken에 있는 사용자 정보 조회
        let graphRequest: GraphRequest = GraphRequest(graphPath: "me", parameters: ["fields":"id,gender,birthday,email,name,picture.width(480).height(480)"], httpMethod: .get)
        graphRequest.start { (connection, result, error) in
            
            print("result is - \(result)")
            
            if let profile = result as? [String: Any] {
                let email = profile["email"] as? String ?? ""
                let name = profile["name"] as? String ?? ""
                
                print("email - \(email)")
                print("name - \(name)")
            }
        }
    }
    func loginButtonDidLogOut(_ loginButton: FBSDKLoginKit.FBLoginButton) {
        print("logout")
    }
}

 

 

만약 페이스북 SDK에서 제공되는 로그인 버튼을 사용하지 않고 커스텀 버튼을 이용할 경우라면,

아래의 코드로 대체할 수 있습니다!

import UIKit
import SnapKit
import FacebookLogin

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Add a custom login button to your app
        let loginButton = UIButton(type: .custom)
        loginButton.backgroundColor = .darkGray
        loginButton.frame = CGRect(x: 0, y: 0, width: 180, height: 40)
        loginButton.center = view.center
        loginButton.setTitle("My Login Button", for: .normal)

        // Handle clicks on the button
        loginButton.addTarget(self, action: #selector(loginButtonClicked), for: .touchUpInside)

        view.addSubview(loginButton)
    }
  
  
    // Once the button is clicked, show the login dialog
    @objc func loginButtonClicked() {
        let loginManager = LoginManager()
        loginManager.logIn(permissions: ["public_profile, email"], from: self) { result, error in
            if let error = error {
                print("Encountered Erorr: \(error)")
                // tokenString이나 userID만 필요할 경우 아래의 코드만 수행
                /*
                guard let result = result else { return }
                let tokenString = result.token?.tokenString
                let userID = AccessToken.current?.userID
                */
                
                // Graph API를 사용하여 Current AccessToken에 있는 사용자 정보 조회
                let graphRequest: GraphRequest = GraphRequest(graphPath: "me", parameters: ["fields":"id,gender,birthday,email,name,picture.width(480).height(480)"], httpMethod: .get)
                graphRequest.start { (connection, result, error) in
                    
                    print("result is - \(result)")
                    
                    if let profile = result as? [String: Any] {
                        let email = profile["email"] as? String ?? ""
                        let name = profile["name"] as? String ?? ""
                        
                        print("email - \(email)")
                        print("name - \(name)")
                    }
                }
            } else if let result = result, result.isCancelled {
                print("Cancelled")
            } else {
                print("Logged In")
            }
        }
    }
}

 

 

3. 결과 확인

실행 후 ViewController에서 입력한 print문이 아래와 같이 자알 나오고 있네요.

 

만약 틀린곳이 있다면 알려주세요.

읽어주셔서 감사합니다 :)