[SWIFT] 로그인 모듈 구성 [3/3] - 페이스북 로그인

마지막 시간인 페이스북 로그인에 대해서 공유 하려고합니다.

Firebase의 Auth 을 통한 FaceBook 로그인도 있지만, 제가 공유할 방식을 FaceBook Developer 사이트을 참고하여 작성하였습니다.

기본적인 시작은 Facebook SDK 설치를 참고해주세요.

Pod 의 Facebook 추가

pod 'FacebookCore'

pod 'FacebookLogin' 

pod 'FacebookShare', :git => 'https://github.com/1amageek/facebook-sdk-swift'

깃허브 연결하는 로직은 꼭 넣어줘야지 빌드 시 에러 발생하지 않습니다.

Facebook 로그인 후 콜백 세팅

제가 사용 시 Swift4 기준 FBSDKApplicationDelegate =>  SDKApplicationDelegate 로 변경 되어져 있어서 이 방식으로 적용하였습니다.

밑에 설정한 delegate는 Facebook 로그인 후 콜백을 받을 때 사용됩니다.

import UIKit
import FacebookCore
 
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
 
  var window: UIWindow?
 
  public func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey : Any]? = nil) -> Bool {
    // Override point for customization after application launch.
     return SDKApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
 
  public func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
       return SDKApplicationDelegate.shared.application(app, open: url, options: options)
  }
 
  public func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
    return SDKApplicationDelegate.shared.application(application, open: url)
  }
}

Facebook 버튼 추가

버튼을 생성하는 방식은 1) Facebook에서 제공하는 Button UI 사용, 2) 직접 만들기 두 가지 방식으로 구성됩니다. 

제가 한 방식은 1) Facebook에서 제공하는 Button 을 커스텀하여 사용하였습니다.

* Facebook 버튼 추가 순서

[1] Storyboard 에서 Facebook 버튼을 넣을 공간을 View을 넣어준다. (크기, 위치 설정)

[2] 실행 할 controller.swift 에서 생성한 View을 연결합니다. (IBOutlet)

[3] 소스로 추가한 View 의 크기를 체크하여, Facebook Button의 크기 위치를 설정합니다.

[4]  추가한 View에 subView로 생성한 Facebook Button 을 넣어줍니다.

[5] Delegate을 연결하여 Facebook Login 정보를 가져옵니다.

let btnFaceBook = KFBLoginButton(readPermissions: [.publicProfile, .email])btnFaceBook.frame = CGRect(x: 0, y: 0, width: viewFaceBook.frame.width, height: viewFaceBook.frame.height)btnFaceBook.delegate = selfColored by Color Scripter

Delegate

func kFBInfoCompletionHandler(_ connection: FBSDKGraphRequestConnection?, _ result: Any, _ error: Error?) {
    if (error == nil){
        let dict = result as! [String : AnyObject]
        //print(result!)
        print(dict)
        var info = UserInfo()
​
        let facebookEmail = dict["email"] as! String
        info.email = facebookEmail
        print("[LoginModule] email = \(facebookEmail)")
​
        let facebookId = dict["id"] as! String
        info.id = facebookId
        print("[LoginModule] id = \(facebookId)")
​
        let facebookName = dict["name"] as! String
        info.name = facebookName
        print("[LoginModule] name = \(facebookName)")
​
        info.joinAddress = "facebook"
        info.password = ""
​
        let appDelegate = self.getAppDelegate()
        appDelegate?.addUserProfile(uid: appDelegate?.getDatabaseRef().childByAutoId().key, userInfo: info)
        self.gotoMainViewController(user: info)
    }
}

Facebook 버튼 동작

Delegate로 KFBInfoDelegate을 추가할 시 Facebook 로그인에 대한 정보가 kFBInfoCompletionHandler로 넘어오게 됩니다.

Facebook Schemes 추가

1) Facebook Developer 사이트 접속

2) Facebook에서 생성 한 앱 ID  와 앱 시크릿 코드를 입력합니다. 

[Facebook 대시보드]

3) Xcode project의 Info tab 안에 있는 URL Types에 생성한 'fb + 앱 ID'을 추가합니다. 

4) info 의 Source Code 로 열어 Facebook 정보를 추가합니다.

<key>FacebookAppID</key>
<string>'FacebookAppID'</string>
<key>FacebookDisplayName</key>
<string>LoginModel</string>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
        <string>fb'FacebookAppID'</string>
        </array>
    </dict>
</array>

모든 설정을 마치고 실행 시 페이스북 로그인 되는 것을 확인 할 수 있습니다.

Facebook 로그인 모듈은 LoginHelperForFacebook-iOS 확인 가능합니다.

로그인 모듈 전체 소스는 LoginModule-iOS 확인 가능합니다.

[SWIFT3] 로그인 모듈 구성 [1/3] - 카카오 로그인

[SWIFT3] 로그인 모듈 구성 [2/3] - 구글 로그인

참고

https://stackoverflow.com/questions/44248118/facebookshare-causing-compiler-error-after-update/44534962#44534962

https://stackoverflow.com/questions/39632635/fb-login-using-swift-3-not-returning-any-values-and-not-get-back-the-user-to-the