完成予想図
はじめに
FirebaseでSNSユーザー認証をしたい時に参考にしてください!
メールアドレスとパスワードで認証するノーマルバージョンを試したい場合は、
https://firebase.google.com/docs/auth/ios/start?hl=ja(公式ドキュメント)
と
https://dev.classmethod.jp/smartphone/iphone/firebase-authentication-ios/
がわかりやすいです!
今回は、facebookログインをやってみます!
Firebase Authenticationとは
Firebase Authentication は、 Google のフェデレーション認証で、 Google 以外にも Facebook 、 GitHub 、 Twitter などのサードパーティの認証情報を使用して、クライアントアプリケーションのログインを行うことができます。また、フェデレーション ID 以外にもパスワード認証や電話番号認証にも対応しています。
※フェデレーションとは...一度認証を通れば、その認証情報を使って、許可されているすべてのサービスを使えるようにする仕組みのこと。
引用元
https://www.topgate.co.jp/firebase01-what-is-firebase
インポート
podfileを作成後、
firebaseやfacebook関連のものをファイルに取り込みましょう!
pod 'Firebase/Auth'
pod 'FacebookSDK'
pod 'Firebase/Core'
pod 'FacebookCore'
pod 'FacebookLogin'
pod 'FacebookShare'
pod 'SDWebImage/WebP'
Firebaseの設定
https://qiita.com/ShinokiRyosei/items/f71c73ab8b0de145c5bc
ここに設定手順が記載されているので参考にしてください!
https://qiita.com/Ritsuya/items/0ad42ae40337ae36f472
Firebase全般に関してわからない方はこちらを参照してみてください!
プロジェクトファイルに「GoogleService-Info」 のファイルを入れるときの注意点です!
① 「Copy items if needed」 にチェックが入ってること
② 「GoogleService-Info(1)」 となっている取り入れたファイル名をXcode内で 「GoogleService-Info」 に変更しましょう
を確認してファイルに取り入れましょう!
Facebookログインの設定
まず、Firebase上でFacebookログインを有効にします!
右上で有効にした後に、アプリケーションIDとアプリシークレットを入力します!
これらは、facebook developerのサイトの番号を入力します。
** 右上のマイアプリ=>アプリの作成 **
その次に出てくる、表示名の項目は自由に決めてオッケーです!(ただしfacebookというワードはNGのようです)
プライバシーポリシーやカテゴリも決めておきましょう!
そして、これらの情報に対応する部分を先ほどのfirebase(アプリケーションIDとアプリシークレット)に登録しましょう!
次に、左側のプロダクトを追加します!
その中のFacebookログインの設定を行います。
次に、左側の設定の有効なOAuthリダイレクトURIというところに、firebaseのfacebookの部分のURLを載っけます。(写真赤枠)
最後に、ここまで設定すれば、Firebase上のステータスをオンにすることができます!
オンに切り替えてください。
FirebaseとFacebookの導入
import Firebase
import FBSDKCoreKit //FacebookSDK
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
//追加
FirebaseApp.configure()
//Facebookログイン
ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
return true
}
//追加
func application(_ application : UIApplication,open url: URL, sourceApplication: String?, annotation: Any)->Bool{
return ApplicationDelegate.shared.application(application, open: url, sourceApplication: sourceApplication, annotation: annotation)
}
//追加
func applicationDidBecomeActive(_ application: UIApplication) {
AppEvents.activateApp()
}
info.plistの設定
info.plistに以下の項目を追加し、facebook developerのサイトで設定したIDを赤い部分に入力しましょう
※赤い部分は両方とも同じIDが入ります!Item0の方はIDの前に”fb”を付け加えるのを忘れないようにしましょう!
Facebookログインボタンの表示
コードでボタンを配置します!
①必要なものをインポート
②ボタンをコード上で配置
③ログインボタンのプロトコル宣言をし、delegateを設定
④facebookログインに必要な関数をかく
import UIKit
import FBSDKCoreKit
import FBSDKLoginKit
import FacebookCore
import FacebookLogin
import Firebase
class ViewController: UIViewController , LoginButtonDelegate{
let fbLoginButton: FBLoginButton = FBLoginButton()
var displayName = String()
var pictureURL = String()
var pictureURLString = String()
override func viewDidLoad() {
super.viewDidLoad()
fbLoginButton.delegate = self
fbLoginButton.frame = CGRect(x: view.frame.size.width / 2 - view.frame.size.width / 4, y: view.frame.size.height / 4, width: view.frame.size.width / 2, height: 30)
//許可するもの
fbLoginButton.permissions = ["public_profile, email"]
view.addSubview(fbLoginButton)
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
//ナビゲーションバーを消す
navigationController?.isNavigationBarHidden = true
}
func loginButton(_ loginButton: FBLoginButton, didCompleteWith result: LoginManagerLoginResult?, error: Error?) {
//loginする
if error == nil{
if result?.isCancelled == true{
//キャンセルされた場合は何もしないで返す
return
}
}
let credential = FacebookAuthProvider.credential(withAccessToken: AccessToken.current!.tokenString)
//ここからfirebase
Auth.auth().signIn(with: credential) { (result, error) in
if let error = error {
return
}
self.displayName = (result?.user.displayName)!
//string型に強制変換
self.pictureURLString = (result?.user.photoURL!.absoluteString)!
//画像の大きさを変更(大きくした)
self.pictureURLString = self.pictureURLString + "?type=large"
//次の画面遷移で画像を表示させるために、userdefaultを用いて保存&ログイン保持
let ud = UserDefaults.standard
ud.set(1, forKey: "loginOK") //ログイン保持
ud.set(self.pictureURLString, forKey: "pictureURLString")
//次の画面の遷移先を指定
let nextVC = self.storyboard?.instantiateViewController(identifier: "next") as! NextViewController
self.navigationController?.pushViewController(nextVC, animated: true)
}
}
func loginButtonWillLogin(_ loginButton: FBLoginButton) -> Bool {
return true
}
func loginButtonDidLogOut(_ loginButton: FBLoginButton) {
//ログアウト
}
}
最後に
次の画面遷移で画像を表示させるのは、userdefaultから値を取ってきて代入するだけです!
facebookログインは、facebook developerのサイトの設定が少し多いですがぜひやってみてください!