5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Firebase Authenticationを学習しよう(Facebookログイン編)

Last updated at Posted at 2020-02-13

完成予想図

fb最新.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(1)」 となっている取り入れたファイル名をXcode内で 「GoogleService-Info」 に変更しましょう

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

Facebookログインの設定

まず、Firebase上でFacebookログインを有効にします!
スクリーンショット 2020-02-13 1.17.44.png

右上で有効にした後に、アプリケーションIDとアプリシークレットを入力します!
これらは、facebook developerのサイトの番号を入力します。

スクリーンショット 2020-02-13 1.23.27.png

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

スクリーンショット 2020-02-13 1.25.41.png

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

そして、詳細設定で、赤枠の部分を変更します!
スクリーンショット 2020-02-13 1.31.33.png

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

次に、左側の設定の有効なOAuthリダイレクトURIというところに、firebaseのfacebookの部分のURLを載っけます。(写真赤枠)
スクリーンショット 2020-02-13 1.17.44.png

スクリーンショット 2023-07-03 10.40.01.png

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

FirebaseとFacebookの導入

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のサイトで設定したIDを赤い部分に入力しましょう
※赤い部分は両方とも同じIDが入ります!Item0の方はIDの前に”fb”を付け加えるのを忘れないようにしましょう!

スクリーンショット 2020-02-13 16.05.23.png FirebaseDisplayNameも、facebookDeveloperのサイトで設定したプロダクト名を入力してください。

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のサイトの設定が少し多いですがぜひやってみてください!

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?