NCMB의 Swift SDK로 Facebook 인증 구현

니후쿠라 mobile backend는 다양한 언어를 위한 SDK를 제공합니다. 그 중 가장 새로운 Swift SDK에 대한 사용법을 소개합니다.

이번에는 Facebook 인증 사용법을 소개합니다.

SwiftUI App로 구현

이번에는 LifeCycle을 SwiftUI App로 구현하겠습니다. Facebook SDK를 구현하는 방법에 대해서도 정보가 거의 없으므로 최적의 구현이 아닐 수도 있습니다.

SDK 설치는 CocoaPods에서

Facebook SDK와 NCMB SDK는 CocoaPods를 통해 설치됩니다.

target 'YOUR_APP' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for todoapp
  pod 'NCMB', :git => 'https://github.com/NIFCLOUD-mbaas/ncmb_swift.git'
  pod 'FBSDKLoginKit'
end

관리 화면 설정

NCMB 관리 화면에서 Facebook 앱 ID를 설정합니다.

SDK 가져오기

이번에는 Auth라는 앱 이름으로 했으므로 AuthApp.swift를 열고 SDK를 가져옵니다.

import SwiftUI
import NCMB         // 追加
import FBSDKCoreKit // 追加

body를 수정합니다. onOpenURL 와 onChange 에서 각각 ApplicationDelegate.shared.application 를 사용해 초기화 처리를 실시하고 있습니다.

@Environment(\.scenePhase) private var scenePhase // 追加（最初からあるかも？）
var body: some Scene {
    WindowGroup {
        ContentView()
            .onOpenURL(perform: { url in
                // Facebook SDKの初期化（OpenURLで戻ってきた場合）
                ApplicationDelegate.shared.application(
                    UIApplication.shared,
                    open: url,
                    sourceApplication: nil,
                    annotation: UIApplication.OpenURLOptionsKey.annotation)
            })
    }.onChange(of: scenePhase) { scene in
        switch scene {
        case .active:
            // Facebook SDKの初期化
            ApplicationDelegate.shared.application(
                UIApplication.shared,
                didFinishLaunchingWithOptions: nil
            )
            // NCMBのSwift SDKの初期化
            NCMB.initialize(applicationKey: "YOUR_APPLICATION_KEY", clientKey: "YOUR_CLIENT_KEY")
        case .background:
            print(".background")
        case .inactive:
            print(".inactive")
        @unknown default: break
        }
    }

ContentView.swift 수정

다음으로 ContentView.swift 의 수정입니다. 먼저 SDK를 로드합니다.

import SwiftUI
import NCMB           // 追加
import FBSDKLoginKit  // 追加

상태를 추가합니다.

struct ContentView: View {
    @State var user: NCMBUser?
    @State var manager = LoginManager()

버튼을 배치하고 이벤트를 facebookLogin으로 설정합니다.

var body: some View {
    NavigationView {
        VStack(alignment: .center) {
            if user == nil {
                Text("ログインしていません")
                    .padding()
            } else {
                Text(user!.userName!)
                Text(user!.objectId!)
            }
            Button(action: facebookLogin, label: {
                Text("Facebookログイン")
            })
    }.onAppear {
        self.user = NCMBUser.currentUser
    }

}

처음에는 NCMBUser.currentUser가 nil이므로 로그인하지 않았다고 나옵니다.

Info.plist 편집

Info.plist를 XML로 열고 <dict></dict> 안에 다음을 설명합니다. () 안을 각각 자신의 것으로 재작성합니다.

<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>fb(Facebook App Id)</string>
    </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>(Facebook App Id)</string>
<key>FacebookClientToken</key>
<string>(Facebookアプリ名)</string>
<key>FacebookDisplayName</key>
<string>(Facebookアプリ名)</string>

Facebook 인증 구현

그럼 여기에서 Facebook 인증의 구현입니다. 함수 이름은 facebookLogin입니다.

func facebookLogin() {
    // この中に実装します
}

우선 Facebook 측의 로그인 처리를 실행합니다. 오류이거나 취소하면 여기에서 끝납니다.

self.manager.logIn(permissions: ["public_profile", "email"], from: nil) {(result, err) in
    if err != nil {
        print(err!.localizedDescription)
        return
    }
    if ( result != nil && (result?.isCancelled)! ) {
        print("Canceled")
        return
    }
    // 後述

토큰을 받으면 자신의 정보를 얻습니다.

let token = result?.token!
if  result != nil && (result?.grantedPermissions != nil) {
    GraphRequest(graphPath: "me", parameters: ["fields": "id, name, first_name, last_name, email"]).start(completionHandler: { (connection, result, error) in
        if error != nil {
            print("プロフィール取得エラー")
            return
        }
    // 後述

응답에서 ID(사용자 ID)를 가져옵니다.

let res = result as! [String : Any]
let id = res["id"] as! String

토큰 정보와 ID를 사용하여 NCMBFacebookParameters를 만듭니다.

let params = NCMBFacebookParameters(id: id, accessToken: token!.tokenString, expirationDate: token!.dataAccessExpirationDate)

이제 준비가 되었으므로 인증을 수행합니다. 인증이 성공하면 .success 가 되어 NCMBUser.currentUser 를 취득할 수 있습니다.

let user = NCMBUser()
user.signUpWithFacebookToken(facebookParameters: params, callback: { (result) in
    switch result {
    case .success:
        print("認証成功")
        self.user = NCMBUser.currentUser
        break
    case let .failure(error):
        print(error)
        break;
    }
})

요약

SwiftUI App로 구현하는 경우 Facebook SDK의 초기화가 두 곳으로 나뉘는 등 구현면에서 차이가있었습니다. 버튼을 누른 후 Facebook 인증을 실시하거나 NCMB로 로그인하는 흐름에 대해서는 특별히 변함없이 할 수 있습니다.

Swift SDK를 사용하면 소셜 인증도 쉽게 구현할 수 있습니다. 꼭 시험해 주세요.

문서 : 개발자용 문서 | 니후쿠라 mobile backend