開発ブログ

株式会社Nextatのスタッフがお送りする技術コラムメインのブログ。

電話でのお問合わせ 075-744-6842 ([月]-[金] 10:00〜17:00)

  1. top >
  2. 開発ブログ >
  3. Kotlin >
  4. 【Compose Multiplatform】KMPAuthを使用したFirebaseソーシャルログイン(iOS編)

【Compose Multiplatform】KMPAuthを使用したFirebaseソーシャルログイン(iOS編)

logo.png
みなさんこんにちは。今回はCompose Multiplatform入門記事第6回目ということで、Firebaseと連携してソーシャルログインを実装していきます。
前回Androidでのソーシャルログインを実装したので、今回はiOSをやっていきます。

これまでのCompose Multiplatform記事はこちら
Compose Multiplatform入門(環境構築編)
Compose Multiplatform入門(プロジェクト作成編)
Compose Multiplatform入門(画面遷移編)
Compose Multiplatform入門(ロギング編)
KMPAuthを使用したFirebaseソーシャルログイン(Andorid編)

 

iOSでのSNSログイン

KMPAuthのREADMEにもある通り、iOSでソーシャルログインを実装するには別途準備が必要になります。

Firebaseアプリケーションの登録

Firebaseのコンソールから、iOSアプリの登録を行います。 アプリケーションIDの登録をすると、GoogleService-Info.plistファイルが生成されるので、こちらをダウンロードしてiosApp/iosApp フォルダ内に入れます。
google-service-info.png
また、もともと入っているInfo.plistファイルも更新が必要です。以下のテキストを追加しましょう。クライアントIDなどは適宜置き換えてください。ダウンロードしたGoogleService-Info.plistファイルに書かれています。

    <key>GIDServerClientID</key>
    <string>YOUR_SERVER_CLIENT_ID</string>
    <key>GIDClientID</key>
    <string><YOUR_IOS_CLIENT_ID</string>
    <key>CFBundleURLTypes<key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
        </array>
      </dict>
    </array>

パッケージのインストール

まずはXcodeを使用してパッケージを取得していきます。
XcodeでiosAppフォルダ内のiosApp.xcodeprojファイルを開き、FirebaseSDKとGoogleSignInのパッケージを取得します。 「File」タブの「Add Package Dependencies...」から「googlesignin-ios」と「firebase-ios-sdk」を検索して追加します。
xcode-add-package.png
 

iosApp/iosApp/iOSApp.swiftの更新

READMEにもiOSApp.swiftの更新をするよう書かれていますが、READMEのコード丸写しだと動きません。少し修正が必要です。

import ComposeApp
import FirebaseCore
import GoogleSignIn
import SwiftUI

class AppDelegate: NSObject, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
    ) -> Bool {
        FirebaseApp.configure()
        AppInitializer.shared.onApplicationStart()

        return true
    }

    func application(
      _ app: UIApplication,
      open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        var handled: Bool

        handled = GIDSignIn.sharedInstance.handle(url)
        if handled {
            return true
        }

        // Handle other custom URL types.

        // If not handled by this app, return false.
        return false
    }
}

@main
struct iOSApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate

var body: some Scene {
WindowGroup {
            ContentView().onOpenURL(perform: { url in
                GIDSignIn.sharedInstance.handle(url)
            })
}
}
}

MainViewControllerの更新

iOSのほうでも、AppInitializer.onApplicationStart()を呼んでおきます。

import androidx.compose.ui.window.ComposeUIViewController

fun MainViewController() = ComposeUIViewController(configure = {
    AppInitializer.onApplicationStart()
}) { App() }

不具合の修正

ここまでやって準備は完了なのですが、KMPAuthのIssueに、iOSのときにMissingResourceExceptionが発生するという問題が記載されていたので、その対処を行います。

リソースの追加

Isuueのリンク先にあるように、composeApp/src/iosMain内に「resources」フォルダを追加します。
set-resources.png

build.gradle.ktsの更新

iosMainのところにsrcDirsを記載します。

        iosMain {
            resources.srcDirs("src/commonMain/composeResources","src/iosMain/resources")
            dependencies {
                implementation(libs.stately.common)
            }
        }
これで全ての修正が完了...したかに思いましたが、まだ動作しませんでした。

KMPAuthのバージョンを調整

KMPAuthのバージョンが2.0.0だとうまく動きませんでした。
追加したはずのresourcesが認識されず、MissingResourceExceptionになってクラッシュしてしまいました。

Uncaught Kotlin exception: org.jetbrains.compose.resources.MissingResourceException: Missing resource with path: <参照しようとしていたPath>
Androidでは動いていたので大丈夫かと思っていましたが、どうやら罠だったようです。 バージョン1.4.0だと動作したので、バージョンを下げておきます。 libs.versions.tomlを更新します。

kmp-auth = "1.4.0"
これでiOSでもFirebaseでGoogleアカウントログインが実装できました。 ボタンを押してGoogleのログイン処理を終えた後に、アカウントの名前が表示されれば成功です。
ios-firebase-auth.png

さいごに

最後に罠がありましたが、なんとか動いてよかったです。KMPAuthのバージョン2.0.0にもいずれ対応策が出てくるかもしれないので、動向を注視しておきたいです。 次回はHTTP通信に関しての記事です。最後までご覧いただきありがとうございました。
  • posted by りっちゃん
  • Kotlin
TOPに戻る