[Swift] SwiftUI로 Facebook Login 구현하기

Facebook 공식문서를 보고 정리해 놓은 글입니다.

더 자세한 내용 아래 링크를 참고해 주세요 😊

(오타정정 및 피드백 대환영🙌🏻)

 

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

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

---

1. Facebook 관리자 앱 만들기

- Facebook 공식 문서에 들어가 "새 앱 만들기" 버튼을 누른다.

 

1-1. 앱 만들기 (앱 유형 선택)

- 원하는 유형을 선택한 후, "다음" 버튼을 누른다.

 

1-2. 앱 만들기 (앱 이름 추가)

- 앱 이름을 추가한 후, "앱 만들기" 버튼을 누른다.

 

1-3. 앱 만들기 (비밀번호  입력)

- 비밀번호를 입력한 후, "제출" 버튼을 누른다.

 

2. Facebook 로그인 기능 추가

- Facebook 로그인의 "설정" 버튼을 누른다.

 

3. Facebook 로그인 빠른 시작 (플랫폼 선택)

- "iOS" 버튼을 누른다.

 

3-1. Facebook 로그인 빠른시작 (개발 환경 설정)

- "다음" 버튼을 누른다.

 

3-2. Facebook 로그인 빠른시작 (번들 식별자 추가)

- 번들 ID를 입력한다. (아래 사진 참고)

   - ProjectAppName > TARGETS > Siging & Capabilities > Bundle Identifier

- "저장" 버튼을 누른다.

- "계속" 버튼을 누른다.

 

3-3. Facebook 로그인 빠른시작 (번들 식별자 추가)

- "SSO 활성화"를 "예"로 바꿔준다.

- "save" 버튼을 누른다.

- "다음" 버튼을 누른다.

 

4. Info.plist 구성 (Info.plist 코드 복사)

- "코드 복사"를 누른다. 

 

4-1. Info.plist 구성 (Info.plist 파일 보이게 하기)

- "TARGETS"를 누른다. 

- "Siging & Capabilities"를 누른다. 

- "+ Capability"를 누른다. 

- 창이 뜨면 "background Modes"를 입력 후, 더블 클릭 해준다.

 

4-2. Info.plist 구성 (Info.plist Source code로 열기)

- 마우스 오른쪽 버튼으로 "Info" 파일을 누른다.

- "OpenAs > Source Code"를 누른다. 

 

4-3. Info.plist 구성 (XML 픽셀 코드 수정)

- 5-4에서 복사한 코드를 파일의 본문(<dict>...</dict>)에 붙여 넣는다.

- fbAPP-ID를 fb[자신의 앱 ID]로 수정한다.

- APP-ID를 [자신의 앱 ID]로 수정한다.

- CLIENT-TOKEN을 [자신의 클라이언트 토큰]로 수정한다.

- APP-NAME을 [자신의 Facebook 관리자 앱 표시 이름]로 수정한다.

 

- 자신의 앱 ID는 사이트 상단 or 설정 > 기본 설정에서 확인 가능

- 자신의 클라이언트 토큰은 설정 > 고급 설정에서 확인 가능

- 자신의 앱 표시 이름은 사이트 상단 or 설정 > 기본 설정에서 확인 가능

<?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>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                    <!-- fb[자신의 앱 ID] -->
                    <string>fb3433916086845467</string>
                </array>
            </dict>
        </array>
        <key>FacebookAppID</key>
        <!-- [자신의 앱 ID] -->
        <string>3433916086845467</string>
        <key>FacebookClientToken</key>
        <!-- [자신의 클라이언트 토큰] -->
        <string>8bcfc7e19467b6178138b2e1506dbcab</string>
        <key>FacebookDisplayName</key>
        <!-- [자신의 Facebook 관리자 앱 표시 이름] -->
        <string>myLoginTest</string>
        <key>UIBackgroundModes</key>
        <array/>
    </dict>
</plist>

 

(선택사항) 필요시, 아래 과정을 수행

 

5. 앱 델리게이트 연결

- "[프로젝트명]APP"파일을 눌러서 아래와 같이 코드를 작성한다.

- iOS 13 이전 버전인 경우 SceneDelegate와 관련된 코드는 지워주면 된다.

import SwiftUI
import FacebookCore // 1. 라이브러리 추가

// 2. AppDelegate 클래스 생성 (따로 파일로 만들어도 됨)
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    // 2-1. 페이스북 사이트에 있는 코드 복붙
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

        ApplicationDelegate.shared.application(
                    application,
                    didFinishLaunchingWithOptions: launchOptions
                )
        
        return true
    }
    
    // 2-2. SceneDelegate 사용을 위해 추가함
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        let sceneConfiguration = UISceneConfiguration(name: nil, sessionRole: connectingSceneSession.role)
        
        sceneConfiguration.delegateClass = SceneDelegate.self
        
        return sceneConfiguration
    }
}

// 3. SceneDelegate 클래스 생성 (따로 파일로 만들어도 됨)
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
	
    // 3-1. 페이스북 사이트에 있는 코드 복붙
    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]
        )
    }
}

@main
struct myLoginApp: App {
    
    // 4. UIApplicationDelegateAdaptor 추가
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

6. 로그인 버튼 추가

- "ContentView"파일을 눌러서 아래와 같이 코드를 작성한다.

import SwiftUI
import FBSDKLoginKit // 1. 라이브러리추가

struct ContentView: View {
    var body: some View {
        VStack {
            // 2. 버튼 생성
            Button {
                // 2-1. 필수 구현 부분 (필요 시, permissions을 더 추가할 수 있음)
                LoginManager().logIn(permissions: ["public_profile","email"], from: nil) { result, error in
                    // 로그인 버튼 눌렀을 때 수행할 코드 여기에 작성 (아래 코드 자유롭게 수정!)
                    if let error = error {
                        // 로그인 창이 뜨지 않는 등 에러가 발생한 경우
                        print("Encountered Error: \(error)")
                    } else if let result = result, result.isCancelled {
                        // 로그인 창이 떴지만, 사용자가 취소를 한 경우
                        print("Cancelled")
                    } else {
                        // 로그인 창이 뜨고, 사용자가 로그인에 성공한 경우
                        print("Logged In")
                    }
                }
            } label: {
                Text("페이스북 로그인")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding(.vertical,13)
                    .padding(.horizontal,95)
                    .background(Color.blue)
                    .cornerRadius(5)
            }
        }
        .padding()
    }
}

 

7. 로그인 확인

01

 

7-1. 다른 사람 로그인 허용하기

- 개발모드에서는 페이스북 관리자 앱 > 앱 역할에 추가된 사람만  로그인이 가능하다.

- 앱 역할에 추가된 사람 외에 로그인을 허용하려면, 다음과 같이 라이브 모드로 변경해 주면 된다.

 

---

로그인 기본 구현은 7번이 끝이다.

그런데 빌드를 하게 되면 콘솔창에 꽤 많은 warning이 뜬다..!

이 내용은 다음 글에 정리해야겠다..!

또 깃허브에 토큰을 그대로 올릴 경우 깃허브에서 보안 메일이 온다.

이 부분도 다음 글에 정리하도록 하겠다.