/SwiftFacebookLoginApp

Primary LanguageSwift

【iOS Swift】アプリにFacebookログイン機能をつけよう！

画像1

概要

ニフクラ mobile backendって何？？

スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！

注1：詳しくはこちらをご覧ください

画像2

動作環境

  • Mac OS 12.5.1 (Monterey)
  • Xcode Version 14.0
  • iPhone X (iOS 16)

※上記内容で動作確認をしています。 ※古いバージョンだと動作しないい可能性があります。 ※Simulatorでは動作しない可能性があります。実機ビルドが必要な場合はこちらをご覧ください。

手順

1. ニフクラ mobile backendの会員登録とログイン→アプリ作成

  • 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

画像3

  • アプリ作成されると下図のような画面になります
  • この２種類のAPIキー（アプリケーションキーとクライアントキー）はXcodeで作成するiOSアプリにニフクラ mobile backendを紐付けるために使用します

画像4

  • 動作確認後に会員情報（アクセストークン）が保存される場所も確認しておきましょう

画像5

2. GitHubからサンプルプロジェクトのダウンロード

  • この画面(GitHub)の画像10ボタンをクリックし、さらに画像11ボタンをクリックしてサンプルプロジェクトをMacにダウンロードします

3. Xcodeでアプリを起動

  • ダウンロードしたフォルダを開き、画像09をダブルクリックしてXcode開きます 画像08

画像6

4. APIキーの設定

  • AppDelegate.swiftを編集します
  • 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます

画像07

  • それぞれYOUR_NCMB_APPLICATION_KEYとYOUR_NCMB_CLIENT_KEYの部分を書き換えます
  • このとき、ダブルクォーテーション（"）を消さないように注意してください！
  • 書き換え終わったらcommand + sキーで保存をします

5. FacebookSDKを使用するための準備と設定

  • facebook for developersにログイン（Facebookアカウントがない場合はアカウントを作成して）して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します

画像12

  • iOSを選択し、アプリ名（任意）を入力し、「新しいFacebookアプリIDを作成」をクリックします
  • 「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックしてFacebookアプリを作成します
  • 「Quick Start for iOS」の画面が出ます
  • 二番の「バンドルIDを追加する」を「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペしてください
  • 「Save」ボタンをクリックします

画像14

  • ダッシュボードに戻ります。

画像15

  • 「アプリ名」と「アプリID」をXcodeプロジェクトのInfo.plistにコピペします

画像16

  • またこの「アプリID」はニフクラ mobile backendにも設定します
  • 「アプリ設定」＞「SNS連携」を開いてFacebook連携の「Facebook連携の許可」にある「許可する」を選択し、「保存する」をクリックします

画像23

  • 最後に上の「開発中」を「ライブモード」に変更します。「ライブモードに切り替えますか？」を「モード切り替え」にしておきます

画像18

6. 動作確認

  • Xcode画面で左上の実行ボタン（さんかくの再生マーク）をクリックします

  • ビルド時にエラーが発生した場合の対処方法

  • Xcodeのバージョンが古い場合import NCMBにエラーが発生し、上手くSDKが読み込めないことがあります

  • その場合は【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法をご覧いただき、別の読み込み方法をお試しください

  • シミュレーターが起動したら、Login画面が表示されます

  • Login ボタンをクリックします

画像19

  • Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います
  • ログインに失敗した場合は画面にエラー内容が表示されます（Facebookログインのブラウザ画面でキャンセルした場合は表示されません）
  • 万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます
  • ログインに成功したらログアウトします

画像21 画像20

  • 保存に成功したら、ニフクラ mobile backendのダッシュボードから「会員管理」を確認してみましょう！
  • authDataにはアクセストークンが保存されます

画像1

操作はここまでです

解説

サンプルプロジェクトに実装済みの内容のご紹介

SDKのインポートと初期設定

ロジック

  • FacebookSDKを使用するための処理をAppdelegate.swiftに記述しています
import UIKit
import NCMB
import FBSDKCoreKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    //********** APIキーの設定 **********
    let applicationkey = "YOUR_NCMB_APPLICATIONKEY"
    let clientkey      = "YOUR_NCMB_CLIENTKEY"
    
    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        //********** SDKの初期化 **********
        NCMB.setApplicationKey(applicationkey, clientKey: clientkey)

        FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
        
        return true
    }

    func applicationDidBecomeActive(application: UIApplication) {
        FBSDKAppEvents.activateApp()
        
    }
    
    func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?,annotation: AnyObject) -> Bool {
        return FBSDKApplicationDelegate.sharedInstance().application(application, openURL: url, sourceApplication: sourceApplication, annotation: annotation)
    }

}
  • Main.storyboardでデザインを作成し、LoginViewController.swiftとLogoutViewController.swiftにロジックを書いています
  • Facebook連携はブラウザのFacebookページに遷移し、行われます。Facebookログインボタン押下時の処理は以下のように記述されます
//
//  LoginViewController.swift
//  SwiftFacebookLoginApp
//
// Loginボタン押下時の処理
@IBAction func FacebookLoginBtn(sender: AnyObject) {
    // labelを空にする
    self.label.text = ""
    if (AccessToken.current != nil) {
        self.performSegue(withIdentifier: "login", sender: self)
    } else {
        let fbManager = LoginManager()
        let permission = ["email", "public_profile"]
        
        fbManager.logIn(permissions: permission, from: self, handler: { (result, error) in
            if (error != nil){
                if(result!.isCancelled){
                    // Facebookのログインがキャンセルされた場合
                    print("Facebookのログインがキャンセルされました")
                    self.label.text = "Facebookのログインがキャンセルされました"
                } else {
                    // その他のエラーが発生した場合
                    print("エラーが発生しました：\(String(describing: error))")
                    self.label.text = "エラーが発生しました：\(String(describing: error))"
                }
            } else {
                // 会員登録とログイン後の処理
                if(result!.token?.userID != nil){
                    let facebookInfo:NSDictionary = [
                        "id":result!.token?.userID as Any,
                        "access_token":result!.token!.tokenString,
                        "expiration_date":result!.token!.expirationDate
                    ]
                    let user = NCMBUser()
                    user.signUp(withFacebookToken: facebookInfo as [NSObject : AnyObject], with: { (error) in
                        if(error != nil){
                            //会員登録に失敗した場合の処理
                            print("Facebookの会員登録とログインに失敗しました：\(String(describing: user.objectId))");
                        } else {
                            //会員登録に成功した場合の処理
                            print("Facebookの会員登録とログインに成功しました：\(String(describing: user.objectId))");
                            self.performSegue(withIdentifier: "login", sender: self)
                        }
                    })
                } else {
                    print("エラーが発生しました：\(String(describing: error))")
                    self.label.text = "エラーが発生しました：\(String(describing: error))"
                }
            }
            
        })
        
    }
    
}
//
//  LogoutViewController.swift
//  SwiftFacebookLoginApp
//

// Logoutボタン押下時の処理
@IBAction func logoutBtn(sender: AnyObject) {
    print("ログアウトしました")
    let fbManager = LoginManager()
    // 非同期でログアウト
    NCMBUser.logOutInBackground { (error) in
        if (error != nil) {
            //エラー処理
            print("Logout error \(String(describing: error))")
        } else {
            fbManager.logOut()
            self.dismiss(animated: true, completion: nil)
        }
    }
    
}

参考

FacebookSDKを使ってFacebook会員認証するのとニフクラ mobile backendSDKを使ってFacebook会員認証するのは何が違うのか？

画像22

  • もちろん直接FacebookSDKを呼ぶことも可能ですが、ニフクラ mobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBUserメソッドが備わっているので、１つ呼べば、Facebookへのログインとニフクラ mobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
  • また一度会員登録してしまえば、あとはニフクラ mobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます

もっと深く知りたい方へ