Firebase Authenticationを学習しよう（Facebookログイン編）

# 完成予想図


![fb最新.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/b8c020ec-7168-3eea-4b30-8246e0168c08.gif)


# はじめに
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（１）」* となっている取り入れたファイル名をXcode内で *「GoogleService-Info」* に変更しましょう

を確認してファイルに取り入れましょう！

# Facebookログインの設定
まず、Firebase上でFacebookログインを有効にします！
<img width="1350" alt="スクリーンショット 2020-02-13 1.17.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/3483a241-1e35-911d-3532-9006decfbf14.png">

右上で有効にした後に、アプリケーションIDとアプリシークレットを入力します！
これらは、[facebook developer](https://developers.facebook.com/?locale=ja_JP)のサイトの番号を入力します。

<img width="1440" alt="スクリーンショット 2020-02-13 1.23.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/47cf2228-250d-b212-e159-fd56edfd84ed.png">

 ** 右上のマイアプリ＝>アプリの作成 ** 
その次に出てくる、表示名の項目は自由に決めてオッケーです！（ただしfacebookというワードはNGのようです）

<img width="1433" alt="スクリーンショット 2020-02-13 1.25.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/8dda237e-9e28-3f35-829e-3998fa81e2bb.png">

プライバシーポリシーやカテゴリも決めておきましょう！
そして、これらの情報に対応する部分を先ほどのfirebase（アプリケーションIDとアプリシークレット）に登録しましょう！

そして、詳細設定で、赤枠の部分を変更します！
<img width="1434" alt="スクリーンショット 2020-02-13 1.31.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/5c201233-0bc4-6045-bc6b-af63369f1d2a.png">

次に、左側のプロダクトを追加します！
その中のFacebookログインの設定を行います。

次に、左側の設定の*有効なOAuthリダイレクトURI*というところに、firebaseのfacebookの部分のURLを載っけます。（写真赤枠）
<img width="1350" alt="スクリーンショット 2020-02-13 1.17.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/35d25c43-88bc-920b-376c-43a06091b995.png">

![スクリーンショット 2023-07-03 10.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/a0d26f32-5632-ca00-12e1-088ff41c4103.png)


最後に、ここまで設定すれば、Firebase上のステータスをオンにすることができます！
オンに切り替えてください。

# FirebaseとFacebookの導入



```swift:AppDelegate.swift
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](https://developers.facebook.com/?locale=ja_JP)のサイトで設定したIDを赤い部分に入力しましょう
※赤い部分は両方とも同じIDが入ります！Item0の方はIDの前に”fb”を付け加えるのを忘れないようにしましょう！

<img width="708" alt="スクリーンショット 2020-02-13 16.05.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490120/ce6ad598-1fed-cea4-03bb-2a7ed9072615.png">
FirebaseDisplayNameも、facebookDeveloperのサイトで設定したプロダクト名を入力してください。

# Facebookログインボタンの表示
コードでボタンを配置します！
①必要なものをインポート
②ボタンをコード上で配置
③ログインボタンのプロトコル宣言をし、delegateを設定
④facebookログインに必要な関数をかく

```swift
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](https://developers.facebook.com/?locale=ja_JP)のサイトの設定が少し多いですがぜひやってみてください！