• 2024/11/27
• 8分

【Swift UI】Facebookでサインイン機能を実装する方法！公式SDK

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：16.0
• iOS：18.0
• Swift：5.9
• macOS：Sonoma 14.6.1
• Facebook-iOS-SDK：14.1.0

iOSアプリでFacebookサインイン機能の実装方法

iOSアプリでFacebookアカウントを使用してサインイン機能を実装する方法は2つあります。Firebaseを使用した方法では他のプロバイダでのログインなどをも簡単に実装でき、ユーザー情報もFirebase上で管理できるのでこちらを活用することのが多いかもしれません。

• 【公式】Facebook-iOS-SDK
• Firebase Authentication

ただ公式SDKを使用した実装方法も意外と簡単だったので手順をまとめていきたいと思います。

Swift UIでFacebookサインイン機能を実装する流れ

1. Facebookアカウントの作成
2. Developers Facebookアカウントの登録
3. アプリ登録
4. プロジェクトにSDKの導入
5. バンドルIDとシングルサインオン設定
6. info.plistに追記
7. KeyChainの追加
8. SDKを使用してサインイン機能の実装

1.Facebookアカウントの作成

iOSアプリからFacebookアカウントでサインインできる機能を開発するためにはまず普通のFacebookアカウントが必要になります。これは通常のFacebookアカウントなので既に持っている方はスキップして問題ないです。

未作成の場合は「Facebookアカウント-新規登録」から作成しておいてください。

2.Developers Facebookアカウントの登録

続いてDevelopers Facebookアカウントの登録を行います。「こちら」にアクセスすると以下のように開発者アカウント作成画面が表示されます。

電話番号などを入力してSMS認証を行いながら進めていき登録を完了させておきます。

3.アプリ登録

完了するとダッシュボードへ遷移するので「Create App」をクリックします。

最初に「アプリ名」と「連絡先メールアドレス」を記述します。

続いて「Use Cases」では「Facebook Login」にチェックを入れておきます。

「ビジネス ポートフォリオに紐づけるかどうか」を問われるので特に紐付けない場合は「I dont〜」を選択して進みます。

あとはそのまま進めて「Go to dashboard」をクリックすればアプリの登録は完了です。

完了するとダッシュボードへ遷移するので「Facebookログインボタンの追加をカスタマイズする」をクリックします。

「クイックスタート」タブを選択して「iOS」を選択します。

ここからは指示に従って進めていきます。

4.プロジェクトにSDKの導入

一番最初にプロジェクトに「Facebook SDK」を導入します。今回はSwift Package Managerを使用して導入していきます。

Cocoa Podsの場合

PodFile
pod 'FBSDKLoginKit'

上部のメニューから「File」＞「Add Packages...」をクリックします。

検索欄にhttps://github.com/facebook/facebook-ios-sdkと入力し「facebook-ios-sdk」を選択して「Add Package」をクリックします。

SDKは色々用意されていますが「FacebookCore」と「FacebookLogin」の2つをとりあえず使用したいのでターゲットを変更しておきます。

5.バンドルIDとシングルサインオン設定

対象アプリのバンドルIDを入力します。

「シングルサインオン」(一回ユーザー認証後、複数のシステムで都度認証を行う必要がない仕組み)の有効/無効を選択します。

6.info.plistに追記

「info.plist」に必要な項目を追加していきます。簡単に追加できるように以下のようなスニペットが用意されているので「info.plist」を「Open As」＞「Source Code」で開き以下を<dict>...</dict>の中にペーストしておくとスムーズです。

info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

アプリID(Facebook)はFacebookコンソールの「App Setting」＞「Basic」の中から確認することができます。
クライアントトークンはFacebookコンソールの「App Setting」＞「Advanced」＞「Security」の中から確認することができます。
fbAPP-IDはアプリIDに接頭辞fbを付与して「fb+アプリID」の形式で指定します。

7.KeyChainの追加

続いて「Signing & Capabilities」タブから「+ Capability」をクリックして「KeyChain Sharing」を追加します。

8.SDKを使用してサインイン機能の実装

これでようやく前準備が整ったで実際にSDKを使用してサインイン機能を実装していきます。FacebookSDKのUI部品はUIKitベースで定義されていますが、今回はSwift UIで実装するように進めていきます。

まずはAppDelegateクラスを用意してFacebook SDKの初期化とFacebook認証プロセスが完了したときに、Facebook SDKがアプリに戻る際のコールバックを処理するコードを追加します。

import SwiftUI
import FacebookCore

class AppDelegate: UIResponder, UIApplicationDelegate {
    /// アプリ起動時に呼び出される
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // FacebookSDKの初期化
        ApplicationDelegate.shared.application(
            application,
            didFinishLaunchingWithOptions: launchOptions
        )
        return true
    }
    
    /// アプリが外部リソースからURLを開くときに呼び出される
    func application(
        _ app: UIApplication,
        open url: URL,
        options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        // Facebook認証プロセスが完了したときに、Facebook SDKがアプリに戻る際のコールバックを処理
        ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        )
    }
}

@main
struct FaceBookTestAppApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

続いて今回はSwift UIで使用したいのでUIViewRepresentableを使用してSwift UIのViewにFBLoginButtonを変換します。

import FacebookLogin

struct FBLoginButtonView: UIViewRepresentable {
    func makeUIView(context: Context) -> FBLoginButton {
        let button = FBLoginButton()
        //button.permissions = ["public_profile", "email"] // 必要な権限を指定
        return button
    }
    
    func updateUIView(_ uiView: FBLoginButton, context: Context) { }
}

あとはSwift UIで定義したFBLoginButtonViewを呼び出せば完成です。FBLoginButtonを使用するだけで簡単にFacebookログインボタンUIを実装することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Welcome to Facebook Login")
                .font(.title)
                .padding()
            
            FBLoginButtonView()
                .frame(height: 50)
                .padding()
        }
    }
}

アプリをビルドして動作を確認してみます。ログインボタンを押下すると最初に以下のようなポップアップが表示されます。

「続ける」をクリックすることでFacebookへログインする画面がWebViewが起動するのでここにアカウント情報を入力してログインします。

アプリに戻るとログインボタンが「Log out」に変わって正常にログインできていることを確認できます。このボタンからそのままログアウトすることが可能になっています。

ログイン中かどうかを識別する

アプリ内からログイン中の情報はAccessToken.currentで管理されておりキーチェーンにも自動で保存しているようです。isExpiredでトークンが期限切れしていないか(有効なログイン状態であるか)を確認できます。またアプリIDやユーザーIDもここから取得することが可能になっています。

Button {
    if let token = AccessToken.current,
        !token.isExpired {
        print("サインしているよ")
        print(token.appID)
        print(token.userID)
    }
} label: {
    Text("Status")
}

追加の読み取り権限を要求

permissionsプロパティに追加で読み取りたい情報を指定することでサインイン時に特定のFacebookの情報も取得できるようになるようです。例えばpublic_profileではユーザー名やプロフィール写真、emailならメールアドレスを取得できるようになるため、その情報をアプリで表示させるみたいなことができるようになるようです。

let button = FBLoginButton()
button.permissions = ["public_profile", "email"] // 必要な権限を指定

一旦上記のように設定してみましたがなぜか以下のようなエラーが出てしまったので他に何か設定が必要なのかもしれません。ここはまた時間のある時に調査してみたいと思います。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。