[Swift/iOS] 소셜로그인 - Facebook Login

소셜 계정을 이용하여 간편하게 로그인할 수 있는 소셜로그인을 구현하는 방법을 알아보자.

(iOS 앱을 출시할 때 소셜로그인이 필요하다면, 반드시 Apple 로그인을 함께 붙여주어야 한다.)

 

오늘은 첫번째로 Facebook 로그인에 대해 적어보겠다!

 

 

사실 이대로만 하면 된다. 😀

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

iOS - Facebook 로그인 - 문서 - Facebook for Developers

 

Facebook Login SDK 추가하기

먼저 XCode에 페이스북 로그인 SDK를 추가해준다.

나는 SPM을 사용하여 추가해주었다.

File > Swift Packages > Add Package Dependency

facebook sdk 저장소 주소를 복사 붙여넣기 해준다.

github.com/facebook/facebook-ios-sdk

 

 

 

단순히 로그인만 구현할 것이라면 FacebookCore, FacebookLogin 2가지만 추가해주면 된다.

 

 

 

Facebook 개발자 사이트에서 앱 등록하기

개발자 사이트에서 이 앱에서 Facebook SDK를 사용할 것이라고 등록해주어야 한다.

 

 

 

 

 

Bundle Identifier는 XCode Project에서 확인할 수 있다.

 

 

 

SSO는 앱에서 별도의 로그인 없이 페이스북으로 바로 인증할 수 있는 시스템이다.

SSO를 활성화 하는 것이 사용자가 ID와 비밀번호를 입력할 필요 없이 "페이스북으로 로그인" 버튼 한번만 누르면 되기 때문에 더 간편하고, 더 안전한 방법이라고 소개하고 있다.

요건 권고사항이지만 일단 개발자 맘대로!

 

 

 

Info.plist 설정

sdk를 사용하면서 필요한 정보들을 key - value 형태로 저장하는 곳이다.

좌측 navigatior 탭에서 Info.plist 우클릭 > Open As > Source Code 를 눌러준다.

 

 

 

가장 상위의 <dict></dict> 태그 사이에 다음 코드를 넣어준다.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>[APP_ID]</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>
<string>[APP_ID]</string>

<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>

 

가장 상위의 <dict></dict> 태그 안에만 넣으면 된다. 나는 그 중에서도 가장 아래쪽에 넣어주었다.

 

 

여기서 [APP_ID]와 [APP_NAME]은 페이스북 개발자 사이트에서 확인할 수 있으니, 각자 맞는 내용을 넣어주면 된다!

 

 

 

 

페이스북 앱을 실행하여 로그인을 하도록 하려면 다음과 같은 코드를 추가해야한다.

기기에 설치되어 있는 앱의 버전에 따라 자동으로 선택되어 실행되도록 하는 부분이다.

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fbapi20130214</string>
  <string>fbapi20130410</string>
  <string>fbapi20130702</string>
  <string>fbapi20131010</string>
  <string>fbapi20131219</string>
  <string>fbapi20140410</string>
  <string>fbapi20140116</string>
  <string>fbapi20150313</string>
  <string>fbapi20150629</string>
  <string>fbapi20160328</string>
  <string>fbauth</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

 

 

AppDelegate, SceneDelegate 설정

 

AppDelegate는 앱의 라이프사이클을 관리하는 부분이다.

따라서 앱이 실행될 때마다 해주어야 하는 작업은 여기에 작성해준다.

 

네이티브로 Facebook 앱을 열기 위해서는 앱을 실행할 때 마다 SDK를 초기화해주어야 한다고 한다.

앱이 실행될 때마다 Facebook SDK 를 초기화 해 준다. 

 

ApplicationDelegate.shared.application(_:, didFinishLaunchingWithOptions: )
Facebook SDK를 올바르게 사용하려면 호출해야합니다. SDK 초기화의 일부로 앱 이벤트의 기본 자동 로깅이 발생하며 이는 프로젝트 정보 plist 파일의 'FacebookAutoLogAppEventsEnabled'키를 통해 제어 할 수 있습니다.

AppDelegate.swift

import FBSDKCoreKit

...

/// 앱이 실행 된 후 호출
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    ApplicationDelegate.shared.application(
    	application, 
        didFinishLaunchingWithOptions: launchOptions
    )
    return true
}

 

 

아래 코드는 Facebook 앱을 URL로 열 때 필요한 부분인데, iOS 13 이후부터는 AppDelegate가 아닌 SceneDelegate에서 전담하여 처리한다. 따라서 13 이상부터는 여기 말고 SceneDelegate에서 작동하는 코드로 적어주자!

// iOS13 부터는 SceneDelegate에서 처리
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]
    )
}

 

 

아래 코드가 기존에 AppDelegate에서 작성하던 코드와 같다고 봐도 무방하다.

ApplicationDelegate.shared.application(_:, open:, sourceApplication:, annotation)
SSO 인증 흐름 또는 Facebook 대화 상자의 일부로 기본 Facebook 앱 또는 Safari와 상호 작용하는 동안 적절한 응답 처리를 위해 호출되어야합니다.

SceneDelegate.swift

import FBSDKCoreKit

...

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

 

ViewController에 Facebook 로그인 버튼 추가하기

커스텀 버튼도 가능하지만, 일단 테스트니까 디폴트로 제공하는 버튼을 사용해보았다.

ViewController.swift의 viewDidLoad()에 다음과 같은 코드를 추가한다.

let loginButton = FBLoginButton()
loginButton.center = view.center
view.addSubview(loginButton)

 

그러면 짠!

화면 중앙에 Facebook으로 계속하기 버튼이 표시된다.

버튼을 누르면 facebook으로 이동할건지 묻는 alert가 뜨고, 사파리로 이동한다.

시뮬레이터에는 페이스북 앱이 깔려있지 않아서 그렇지만, 페이스북 앱이 깔려있다면 앱으로 전환된다!

 

 

 

 

그리고 로그인 여부, 또는 액세스 토큰을 확인하고 싶다면 필요한 부분에서 다음 코드를 사용하면 된다.

if let token = AccessToken.current, !token.isExpired {
	print("Facebook Access Tocken: \(token)")
	// User is logged in, do work such as go to next view controller.
}

 

커스텀 버튼 활용하기

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let facebookLoginButton = UIButton(type: .custom)
        facebookLoginButton.backgroundColor = .blue
        facebookLoginButton.setTitle("Facebook Login", for: .normal)
        facebookLoginButton.frame = CGRect(x: 0, y: 0, width: 180, height: 40)
        facebookLoginButton.center = view.center
        view.addSubview(facebookLoginButton)
        
        facebookLoginButton.addTarget(self, action: #selector(clickFacebookLogin), for: .touchUpInside)
    }
    
    @IBAction
    func clickFacebookLogin() {
        let manager = LoginManager()
        manager.logIn(permissions: ["public_profile"], from: self) { result, error in
            if let error = error {
                print("Process error: \(error)")
                return
            }
            guard let result = result else {
                print("No Result")
                return
            }
            if result.isCancelled {
                print("Login Cancelled")
                return
            }
            // result properties
            //  - token : 액세스 토큰
            //  - isCancelled : 사용자가 로그인을 취소했는지 여부
            //  - grantedPermissions : 부여 된 권한 집합
            //  - declinedPermissions : 거부 된 권한 집합
        }
    }

 

 

개발 모드 -> 라이브 모드

하지만 여기서 실제 로그인은 이루어지지 않는데, 그 이유는 현재 facebook login이 "개발모드"이기 때문이다.

정상적으로 작동하기 위해서는 "라이브모드"로 전환해주어야 하는데, 저 스위치를 켜주면 개인정보처리방침과 데이터 삭제 정보를 제공해야한다는 메세지가 뜬다. 각 필드에 URL을 채워주면 라이브모드로 전환이 가능하다.

"개인정보처리방침 URL"은 노션이나 블로그 게시글을 활용하여 링크를 달아주어도 무관하다!

 

"사용자 데이터 삭제" 부분은 당신 서비스에서 페이스북 사용자 데이터를 사용하는 건 좋은데, 사용자가 삭제를 원할 때는 당신 서버에서 모든 정보를 지울 수 있는 방법을 마련해 놓으라는 것이다. 데이터 삭제 콜백 URL과 데이터 삭제 안내 URL 중에 선택할 수 있다.

데이터 삭제 콜백은 다음 가이드를 참고하여, 실제 내 서버 DB에 저장된 사용자 정보를 삭제할 수 있는 URL을 만들어 추가해주면 된다. 데이터 삭제 안내는 콜백이 호출되지 않더라도, 어떻게 하면 삭제될 수 있는지 알려주는 안내 문구가 담겨있는 링크를 추가해주어야 한다.

 

모두 완료하면 비로소 라이브모드를 켤 수 있게 되고, 로그인도 할 수 있게 된다!

 

 

테스트 계정 추가

만약 이 링크들을 당장 만들기 어렵다면 일부 테스트 계정을 추가하여 로그인을 허용할 수 있다.

 

왼쪽 메뉴바에서 '역할 > 역할 > 테스터 > 테스터 추가' 를 클릭한다. 여기서 추가된 페이스북 사용자는 개발모드에서도 로그인 테스트를 할 수 있다. 최대 50명까지 테스터로 추가할 수 있다!