0
1

More than 1 year has passed since last update.

【iOS】Facebook ログインを実装してみる

Posted at

はじめに

Facebookログインの機能を実装したく、Meta for Developersへの登録もしてない状況でしたが、一からドキュメントを見てやってみました。

環境

Xcode 13.3
Swift 5.6
FBSDKLoginKit 13.2.0

作業内容

公式ドキュメント見ながらそのまんまやってみた(ものを書きました)

ディベロッパー登録

未登録でしたのでこちらから登録しました

FacebookアカウントでログインしてContinue
スクリーンショット 2022-05-18 23.38.31.png
Developerを選択して登録完了
スクリーンショット 2022-05-18 23.40.19.png
Create Appしていきます
スクリーンショット 2022-05-18 23.41.13.png
適当なものを選んでNext
スクリーンショット 2022-05-18 23.42.25.png
必要事項も適当に入力してCreate App
スクリーンショット 2022-05-18 23.44.08.png
無事ダッシュボードが表示されました
スクリーンショット 2022-05-18 23.46.03.png

実装準備

Facebook LoginのQuickstart(iOS)をやっていきます

スクリーンショット 2022-05-19 0.05.58.png
スクリーンショット 2022-05-19 0.07.18.png

Cocoapodsを使っていくので
Podfilepod 'FBSDKLoginKit', '~> 13.2.0'を追記してインストール

BundleIDの追加

BundleIDをコピペして保存

スクリーンショット 2022-05-19 0.09.30.png

シングルサインオンの選択

オンにしてみました

スクリーンショット 2022-05-19 0.13.13.png

「シングルサインオン(Single Sign-On)」は、「シングル 」と「サインオン」を組み合わせた造語で、「1度システム利用開始のユーザー認証 (ログイン) を行うと、複数のシステムを利用開始する際に、都度認証を行う必要がない仕組み」や「1度の認証で、以後その認証に紐づけられている複数のシステムやアプリ・サービスにも、追加の認証なしで利用できる製品・システム・ツール」を意味します。

plistの修正

スクリーンショット 2022-05-19 0.16.03.png

fbAPP-IDの文字を『fb + ダッシュボードで確認できるApp-ID』で書き換え
APP-IDの文字を『ダッシュボードで確認できるApp-ID』で書き換え
CLIENT-TOKENの文字を『ダッシュボードで確認できるClient token』で書き換え
APP-NAMEをアプリ名で書き換え

※ 他のSNSログイン等でplistに同項目の追加をしている場合は編集方法が異なる場合もあります

Code
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
</array>

Keychainの追加

スクリーンショット 2022-05-19 0.18.32.png

ここまでスムーズにできました

実装

App Delegateの修正

import FacebookCoreではなくimport FBSDKCoreKitで良さそう

スクリーンショット 2022-05-19 0.19.31.png

AppDelegate

このコードは、アプリの起動時にSDKを初期化し、LoginまたはShareアクションを実行すると、SDKがネイティブFacebookアプリからログインと共有を処理できるようにします。それ以外の場合は、アプリ内ブラウザーを使ってログインするために、ユーザーがFacebookにログインしている必要があります。

    
// AppDelegate.swift
import UIKit
import FacebookCore

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {    
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {          
        ApplicationDelegate.shared.application(
            application,
            didFinishLaunchingWithOptions: launchOptions
        )

        return true
    }
          
    func application(
        _ app: UIApplication,
        open url: URL,
        options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        )
    }  
}
SceneDelegate

iOS 13 では、オープニング URL 機能が SceneDelegate に移動しました。iOS 13 をお使いの方は、以下のメソッドを SceneDelegate に追加し、ログインや共有などの操作が意図したとおりに動作するようにしてください。


// SceneDelegate.swift
import FacebookCore
  ...
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }

    ApplicationDelegate.shared.application(
        UIApplication.shared,
        open: url,
        sourceApplication: nil,
        annotation: [UIApplication.OpenURLOptionsKey.annotation]
    )
}

ログインボタンの追加

import FacebookLoginではなくimport FBSDKLoginKitで良さそう

スクリーンショット 2022-05-19 0.21.04.png

ViewController
// Add this to the header of your file, e.g. in ViewController.swift 
import FacebookLogin

// Add this to the body
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
	
        let loginButton = FBLoginButton()
        loginButton.center = view.center
        view.addSubview(loginButton)
    }
}

見た目はこんな感じになりました

このままログインを続けると正常にログインでき、Log outボタンに変わりました

Quickstart(iOS)には含まれていませんでしたが
このままだとログイン&ログアウトはできても情報が取得できてないので
loginFBButton.delegate = selfとしてログイン・ログアウト時の処理を追加しました

extension ViewController: FBSDKLoginKit.LoginButtonDelegate {
    func loginButton(_ loginButton: FBLoginButton, didCompleteWith result: LoginManagerLoginResult?, error: Error?) {
        switch (result?.isCancelled, error) {
        case (_, .some(let error)):
            print(error)
        case (true, .none):
            print("エラー")
        case (_, .none):
            print("ログイン")
            let accessToken = AccessToken.current
        }
    }
    func loginButtonDidLogOut(_ loginButton: FBLoginButton) {
        print("ログアウト")
    }
}

ログイン状況の管理

スクリーンショット 2022-05-19 0.22.06.png

ViewController

override func viewDidLoad() {
    super.viewDidLoad()

    if let token = AccessToken.current,
        !token.isExpired {
        // User is logged in, do work such as go to next view controller.
    }
}

許可の取得

アプリには、一度に1人しかログインできません。アプリにログインしている各人をAccessToken.currentで表します。
LoginManagerがこのトークンを設定し、AccessToken.currentを設定すると、キーチェーンストアに自動的に書き込まれます。
AccessTokenにはuserIDが含まれており、これを用いてユーザーを特定することができます。
ロード時に既存のトークンをチェックするように、ビューコントローラを更新する必要があります。これにより、誰かがすでにアプリに権限を与えている場合に、ログインフローを再度表示する必要がなくなります。

スクリーンショット 2022-05-19 0.24.23.png

// Extend the code sample from 6a. Add Facebook Login to Your Code
// Add to your viewDidLoad method:
loginButton.permissions = ["public_profile", "email"]

サンプル通りのpermissionsで表示したところ、
public_profileは名前とプロフィール画像で必須項目、メールアドレスは任意となるようです。

ユーザーは、要求された権限をアプリに付与するよう促されます。一部のパーミッションでは、ログイン審査が必要になることに注意してください。

おまけ: データ利用チェックアップ

ダッシュボードにData Use Checkupの表示が...

データ利用チェックアップの期限は2022年7月18日まで
人々のプライバシーを保護することは、Facebookと、Facebookプラットフォーム上で開発を行う開発者にとっての主要な優先事項です。そのため、APIアクセスとデータ利用がFacebookのポリシーに準拠していることを確認するために、毎年チェックアップをお願いしています。詳細はこちら
APIアクセスを維持し、無効化を回避するために、2022年7月18日までに行う必要があることは次のとおりです。
1.過去に承認または追加した権限、機能、製品を確認します。
2.アプリが許可された使用方法に準拠していることを証明する。
3.acebookプラットフォーム利用規約と開発者ポリシー、およびその他の適用されるすべての規約とポリシーに準拠していることを証明します。
データ使用チェックは、アプリの管理者が年に1回完了しなければならない要件です。

スクリーンショット 2022-05-20 13.11.11.png
スクリーンショット 2022-05-20 13.15.23.png

おまけ: その他実装に関連することなどなど

Implement a Data Deletion Callback

Facebookからデータを削除する人々のリクエストに応えるために、データ削除コールバックを実装する。

Add App Events

アプリにイベントを追加して、アナリティクスを表示し、広告パフォーマンスを測定し、広告ターゲティングのためのオーディエンスを構築する。

Advanced Topics & Setup

iOSアプリのFacebookログインの高度なセットアップを確認します。

Permissions

アプリがFacebookログインを通じてアクセスできるデータを管理します。

Handling Errors

Facebook SDKから返されるエラーに対応する方法を確認する。

Testing a Login Flow

Facebookログインフローが動作することをテストし、確認する。

App Review

App Reviewは、アプリが承認された方法でAPIを使用しているかどうかを確認するもの。

おわりに

思っていたよりも簡単(ログイン機能だけなら)でしたが、実際のサービスで使うにはまだまだやることがあると思うと、それならやっぱりFirebase Authenticationを使う方がいいなと思ったり。
上級者向けのドキュメントもあるので、時間があるときにやっていきたいと思います。

参考

0
1
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
0
1