はじめに
アプリを作成するにあたり、ログインの機能はよく使用します。
AppleIDを使ったログインやTwitter、Facebookを使ったログインの方法があります。
今回は、それらの実装の簡略化やログイン後のアカウント管理を
行うことができるFirebaseと、アプリを連携するまでの手順を記載していきます。
実際のログインの実装は別記事で紹介しています。
・FirebaseUIを使ってTwitterログイン機能を実装する
環境
・Swift version 5.3
・XCode version 12.3
CocoaPods version 1.10.1
実装方法
Qiitaでは一ヶ月に投稿できる画像の容量が決まっているらしいので、
なるべく節約した最小限の画像にしたいと思います。申し訳ございません・・・。
アプリ作成
ログイン機能を実装するアプリを作成します。
今回は、SampleAppleLoginというプロジェクト名で作成しました。
画像のBundle Identifierをコピーしておいてください。
Firebase 新規プロジェクト作成
Firebaseで新規プロジェクトを作成します。
Firebase consoleにアクセスしたら、+ プロジェクトを追加をクリック
-> プロジェクト名を指定して「続行」をクリック
-> このプロジェクトで Google アナリティクスを有効にするは無効にしてプロジェクトを作成
-> プロジェクトを作成できました。と表示されたら「続行」をクリック
Firebaseとアプリの連携
プロジェクトの概要からiOSのボタンをクリックしてアプリを追加します。
①アプリの登録にてiOS バンドル IDを入力するフィールドがあるので、
こちらに先ほど作成したアプリのBundle Identifierをコピペしてください。
その他の入力は任意なので「次へ」をクリックします。
GoogleService-Info.plistをクリックしてダウンロードして「次へ」をクリック
以降の項目の設定は後ほど行うので、
「次へ」 -> 「次へ」 -> 「コンソールへ進む」と進んでください。
これでFirebase側にアプリの登録をすることができたので、
アプリ側でFirebaseと連携するための処理を行います。
画面右上の虫眼鏡マークをクリックしてください。（もしくはcommand + スペースキー）
検索欄が出てくるので「ターミナル」と入力Enterを押します。
まず、ディレクトリの移動を行います。
cdコマンドでディレクトリを移動するのですが、
移動先は先ほど作成したアプリのPATHを入力してください。
私の場合は下記のようなコマンドになります。
よくわからない方は、作成したアプリのフォルダをドラッグ＆ドロップしてください。
$ cd Desktop/project/SampleAppleLogin
次にPodfileの作成を行います。
$ pod init
念のためPodfileが作成されていることを確認します。
私の場合は、Podfileが作成され下記の状態になりました。
$ ls
Podfile SampleAppleLogin SampleAppleLogin.xcodeproj
Podfileの編集を行います。
$ vi Podfile
インストール対象を追記します。
追記するものは下記の２つになります。
pod 'FirebaseUI'
pod 'Firebase'
まず編集モードにする必要があるので、iを押します。
すると左下に-- INSERT --と表紙されると思います。
その状態ですと文字を入力することができます。
追記すると次のようになると思います。
（バージョンによって記載内容は多少異なります。）
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'SampleAppleLogin' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for SampleAppleLogin
pod 'FirebaseUI' // 追加
pod 'Firebase' // 追加
end
追記後にファイルを保存する必要があるので、
escを押し編集モードを解除後、:wqを順に押し保存します。
その後、インストールを行います。
$ pod install
エラーが発生しなければOKです！
発生した場合はエラー内容でググってみてください。
（基本的にエラーは出ないはずです。）
Xcodeを一度閉じて、Finderからアプリを開くのですが、
この時プロジェクト名.xcworkspaceのファイルを開いてください。
次に、Firebaseでプロジェクトを作成する際にダウンロードした、
GoogleService-Info.plistをアプリ内に置きます。
ViewController.swiftなどと同じ階層に置きます。
GoogleService-Info.plistクリックすると真ん中の画面が変わると思います。
その中の、REVERSED_CLIENT_IDの行のvalueの列の値をコピーしてください。
com.googleuser 〜といった内容だと思います。
一番上の階層のプロジェクト名をクリックすると真ん中の画面が変わると思います。
タグの中からInfoを選択してください。
一番下のURl Typesを開き、+を押して追加します。
右上のURL Schemesに先ほどコピーしたものを貼り付けます。
次にAppDelegate.swiftを開き、下記のように編集します。
※ application( )メソッドは複数あるので間違えないようにしてください。
import Firebase // 追加
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
FirebaseApp.configure() // 追加
return true
}
さいごに
本記事は、FirebaseUIでログイン機能を実装する予定でしたので、
CocoaPodsでFirebaseUIをインストールしました。
別の方法でログインする場合はインストールする必要がない可能性があるので、
その方法にしたがってください。
また、ここまででは連携までしか終わっていないので、
実際のログイン機能の実装を行う必要があります。
そちらに関しての記事は下記になります。
・FirebaseUIを使ってTwitterログイン機能を実装する
以上、最後までご覧いただきありがとうございました。