Firebaseを使ってFacebookのボタンをカスタムデザインで実装する方法【Swift】

4 min readJul 7, 2020

FirebaseのAuthenticationを使ってチュートリアルみながらiOSアプリにFacebook loginを実装できた！けど、自分のデザインしたボタンで実装したい…😣

という方に！

今日はカスタムボタンでFacebook loginを実装する方法をご紹介します👏

Firebaseの設定、Facebook ログインをアプリに統合するなどの実装は既に済みの状態から説明するので、まだだよ！という方は公式のチュートリアルから実装しておいてください。

手順

1. 必要なモジュールをインポート

FirebaseとFacebook SDKの必要なモジュールをインポートします。

import Firebase
import FacebookCore
import FacebookLogin

※まだXcode プロジェクトに以下のモジュールをインストールしていない場合はCocoaPodsからインストールしてください。

pod 'Firebase/Auth'
pod 'FacebookCore'
pod 'FacebookLogin'

自分の好きなデザインのボタンを作成します。

ここでは見本で以下のようなボタンのデザインを作成します。

まずUIButtonを継承したLoginButtonを作成します。

LoginButtonを使ってFacebook login ボタンを作成します。

var fbButton = LoginButton()
fbButton.custom(text: "Facebookで進む", icon: "fb")

Facebookのロゴは公式サイトからGETしてください。

ボタンがタップされた時にFacebook Loginの許可フローが走る実装します。

loginManager

FaceBookのログインと許可の管理をするクラス

readPermissions

取得したいユーザー情報の配列

ユーザーの名前、メールアドレス、ユーザー画像が欲しかったので.publicProfileと.emailを設定しています。

loginManager.login

Facebookのプラットフォームにログインします。

ログインが成功すればafterLoginWithFacebook関数（あとで記述）を呼びたします。

fbLoginTappedを先ほど作成したfacebook loginのボタンがタップされた時に呼び出すようにしておきます。

fbButton.addTarget(self, action: #selector(fbLoginTapped), for: .touchUpInside)

Facebookのプラットフォームにログインが成功したらFirebase Authenticationにユーザーデータを作成します。

Facebookでログインが成功すると発行されるアクセストークンを使ってAuth.auth().signInを実装します。

ちなみに、FirebaseのAuthenticationに格納されたユーザー情報は以下のようにして取得できます👏

// email
Auth.auth().currentUser?.email// username
Auth.auth().currentUser?.displayName// user image
Auth.auth().currentUser?.photoURL

これでお洒落なログインボタンを実装できたでしょうか？

お疲れ様でした！