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

概要

ニフティクラウドmobile backendの『SNS連携（Facebook連携）』を利用して、Facebookのログイン機能を実装したサンプルプロジェクトです
Facebook連携で取得した会員データはニフティクラウドmobile backendの『会員管理機能』として扱うことができます
【iOS Swift】アプリにログイン機能をつけよう！も用意していますので、ぜひ活用してください☆
このコンテンツは簡単な操作ですぐにニフティクラウドmobile backendの機能を体験いただけます★☆

ニフティクラウドmobile backendって何？？

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

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

動作環境

Mac OS X 10.10(Yosemite)
Xcode ver. 7.2.1
iPhone6 ver. 8.2

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

手順

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

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

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

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

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

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

3. Xcodeでアプリを起動

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

4. APIキーの設定

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

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

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

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

iOSを選択し、アプリ名（任意）を入力し、「新しいFacebookアプリIDを作成」をクリックします
「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックしてFacebookアプリを作成します

「Quick Start for iOS」の画面が出ます
一番下まスクロールして、「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペしてください
次へをクリックします

一番上まで戻って、右上の「Skip Quick Start」をクリックします

ダッシュボードが表示されます
「アプリ名」と「アプリID」をXcodeプロジェクトのInfo.plistにコピペします

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

最後に「アプリレビュー」をクリックし、「アプリ名を公開しますか？」を「はい」にしておきます

6. 動作確認

Xcode画面で左上の実行ボタン（さんかくの再生マーク）をクリックします
ビルド時にエラーが発生した場合の対処方法
Xcodeのバージョンが古い場合import NCMBにエラーが発生し、上手くSDKが読み込めないことがあります
その場合は【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法をご覧いただき、別の読み込み方法をお試しください
シミュレーターが起動したら、Login画面が表示されます
Login ボタンをクリックします

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

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

操作はここまでです

解説

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

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

ニフティクラウドmobile backend のドキュメント（クイックスタート）をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
SwiftでmBaaSを始めよう！(＜CocoaPods＞でuse_framewoks!を有効にした方法)
＜CocoaPods＞SwiftでmBaaSを始めよう！
このサンプルは上記のuse_framewoks!を有効にした方法で行っていますが、Facebook連携でこの方法を使用する場合はエラーが発生します。そのため、【続】SwiftでFacebook連携しよう！（＜CocoaPods＞でuse_frameworks!を有効にした場合）の記事をベースに作業を行っています。
SwiftでFacebook連携しよう！と合わせてご活用ください。

ロジック

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) {
    NCMBFacebookUtils.logInWithReadPermission(["email"]) {(user, error) -> Void in
        if (error != nil){
            if (error.code == NCMBErrorFacebookLoginCancelled){
                // Facebookのログインがキャンセルされた場合
                    
            }else{
                // その他のエラーが発生した場合
                    
            }
        }else{
            // 会員登録とログイン後の処理
                
        }
    }
    
}

//
//  LogoutViewController.swift
//  SwiftFacebookLoginApp
//

// Logoutボタン押下時の処理
@IBAction func logoutBtn(sender: AnyObject) {
    // ログアウト
    NCMBUser.logOut()
    
}

参考

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

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

もっと深く知りたい方へ

ニフティクラウドmobile backend のドキュメント（SNS連携：Facebook連携）をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
SwiftでFacebook連携しよう！
【続】SwiftでFacebook連携しよう！（＜CocoaPods＞でuse_frameworks!を有効にした場合）
同じ内容の【Objective-C】版もご用意しています
https://github.com/natsumo/ObjcFacebookLoginApp

natsumo/SwiftFacebookLoginApp