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

Image for post
Image for post

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

という方に!

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

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

手順

  1. 必要なモジュールをインポート
  2. Facebook loginのボタンを作成
  3. Facebookのプラットフォームにログイン
  4. Firebase Authenticationにユーザーを作成

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

import Firebase
import FacebookCore
import FacebookLogin

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

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

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

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

Image for post
Image for post

まず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)

4. Firebase Authenticationにユーザーを作成

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

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

お疲れ様でした!

https://twitter.com/yukimonkey3

アプリ作ったことないのに社長の思いつきで開発することになったエンジニア

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store