SwiftでFacebook連携しよう！

【Swift×mBaaS】シリーズ概要

• Swiftでニフティクラウドmobile backend(通称：mBaaS)を使ってSwiftで開発を始めたい人向けのドキュメントです。
• ニフティクラウドmobile backendのiOS(Objectiv-C SDK)用ドキュメントをSwift用に書き換えて動かしてみたものをまとめました。
• 初心者でもわかりやすいよう心掛けて作っていますが、わかりにくい部分がありましたらコメントをいただければ訂正しますのでお気軽にご意見をお願いします^^*
• 今回は＜SNS連携編＞としてFacebook連携です！

※Twitter連携、Google連携は近日公開予定です！2016/03/03現在

事前準備のお願い

• 事前にニフティクラウドmobil backendの登録とアプリの新規作成をし、 ＜CocoaPods＞SwiftでmBaaSを始めよう！をご覧いただき、必要な初期設定(SDKのインストールなど)をXcode上で行った上でご利用ください。

SwiftでFacebook連携しよう！

• 完成イメージはこんな感じ。「f Login」のボタンをタップするとfacebookログインのブラウザの画面に遷移します。
  

• でも、どうしてわざわざNCMBを使ってFacebookログイン機能を付けるのでしょう？直接FacebookSDKをたたけば良いじゃないか？と思うと思います。まずはそこから考えましょう！

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

• イメージはこんな感じです。
  

• もちろん直接FacebookSDKを呼ぶことも可能ですが、ニフティクラウドmobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBFacebookUtilsメソッドが備わっているので、１つ呼べば、Facebookへのログインとニフティクラウドmobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです。

導入の流れ

1. Facebook SDKのインストール
2. Facebook for developers でアプリ登録をする
3. info.plistの編集
4. Facebook認証の実装
5. mBaaSダッシュボードでの設定
6. 実機でビルドする（動作確認）

• Facebook SDKのインストールの方法は、iOS SDKのインストール方法同様「CocoaPodsを利用する方法」と「frameworkを利用する方法」の２種類あります。iOS SDKのインストールの仕方に応じて準備が必要です。
• 今回はより簡単な「CocoaPodsを利用する方法」について解説します。
• frameworkを利用する場合は、iOS SDKの再アーカイブを行い、作成されたNCMB.frameworkを利用する必要があり少し面倒です。もしFacebook連携を行いたい場合はスタート時の準備から＜CocoaPods＞SwiftでmBaaSを始めよう！で行うことをおすすめします！
• frameworkを利用する場合の記事に関しましては、申し訳ありませんが今現在(2016/03/02)アップする予定がありません。。すみません…m(__;)m

Facebook SDKのインストール

iOS SDKのインストール時に編集したPodfileを再編集します。

• 下記の２行を追加してください。

Podfile

# Uncomment this line to define a global platform for your project
platform :ios, '8.0'
# Uncomment this line if you're using Swift
# use_frameworks!

target '--プロジェクト名--' do
    # *******以下の２行を追加します********
    pod 'FBSDKCoreKit', '~> 4.1.0'
    pod 'FBSDKLoginKit', '~> 4.1.0'
    # *************************************
    pod 'NCMB', :git => 'https://github.com/NIFTYCloud-mbaas/ncmb_ios.git'

end

• ターミナルを開いて、プロジェクト名.xcworkspaceのディレクトリに移動します。
• 参考コマンド：
  • $ cd ディレクトリ名 でディレクトリ移動します。
  • $ ls でディレクトリ内のファイルを表示します。
• 次のコマンドを入力して、FacebookSDKをインストールします。
  • $ pod install
• 「プロジェクト名.xcworkspace」ファイルをダブルクリックしてプロジェクトを立ち上げます。
• 「Pods」フォルダの中に「FBSDKCoreKit」と「FBSDKLoginKit」の２つのファイルが作成されていればOKです。

Facebook for developers でアプリ登録をする

• Facebook SDK for iOS - Getting Startedを開きます。
• 「1.Download the SDK」は完了していますので、スルーします。
• 「2. Create a Facebook App」の「Create a New App」をクリックします。
  • ここからFacebookアカウントにログインが必要です。アカウントを持っていない場合は新規でアカウントを取得してください。Facebook for developersの利用登録を行います。（流れに沿って進む）

• ここから新規でFacebook for developersの利用登録を行った場合と、既に行っている場合で画面が少しことなりますので、それぞれ説明していきます。

新規でFacebook for developersの利用登録を行った場合

• ログインを要求されますので、お持ちのFacebookアカウントでログインします。（アカウントが無い場合は、新規作成してログインしてください。）

• 下図のように「Facebook開発者として登録」と出てくるので、質問に対して答えを「はい」に変えて、「登録する」をクリックし、次の画面で「完了」をクリックします。
  
  

• これでFacebook for developersの利用登録はOKです！

• 次にFacebookに新しいアプリを作成する画面が出ます。iOSをクリックします。

• 下図のように「Quick Start for iOS」が表示されます。アプリ名（任意）を入力して「Create New Facebook App ID」をクリックします。※例はアプリ名を「TEST」で作成しています。

• 「Create a New App ID」が表示されます。該当するカテゴリを選択して「アプリIDを作成」をクリックします。これでアプリが作成されました！

• もしかするとここで下図のようなエラーが出るかもしれません！Facebookアカウントの認証として携帯電話番号あるいはクレジットカードの登録をしなければいけないようです。出来ていない方は「Close」で一度閉じて認証設定を先に行ってください。

Facebook for developersの利用登録を既に行っている場合

• 下記画面が出ます。「表示名」入力し、カテゴリを選択します。他は触らなくて大丈夫です。
  • 2016/03/03追記 ：操作によっては利用登録済みでも新規と同じ画面が出るかもしれません！その場合は上を見てください^^;

• 「アプリIDを作成」をクリックすると、下図のようなDashboard画面が出来てきます。

• 上のFacebookのDashboard画面で、Get Started with the Facebook SDKの「Choose a Platform」をクリックします。
• 下図が出るのでiOSをクリックします。

info.plistの編集

• 利用登録の状況に応じて手順を進めると、下記画面が表示されます。（ここからFacebookの手順と一緒です！）
  

• Configure your info.plist の項目にあるXMLのコード３ヶ所（下図参照）をinfo.plistにコピー＆ペーストします。

  • Xcodeの左側にあるファイルディレクトリでinfo.plist右クリックします。
  • 「Open As」をクリックし、「Source Code」クリックします。
  • 上の３ヶ所のXMLコードを<dict>...</dict>の中にコピー＆ペーストしてください。

• コピペできたら、保存（command + s キー）し、再びinfo.plist右クリックします。

• 「Open As」をクリックし、「Property List」クリックします。

• 下図のようにFacebookAppID、FacebookDisplayName、URL SchemesのItem 0 のところにそれぞれ、FacebookのDashboard画面と同じAppID、FacebookのDashboard画面と同じアプリ名、AppIDの頭に「fb」が付いた文字列が入っていることを確認できればOK！

Facebook認証の実装

Xcodeのファイルを編集していきます。

• mBaaSのiOS SDKを導入時に作成したブリッジファイルにFBSDKCoreKitとFBSDKLoginKitをインポートするコードを追加します。

XXXXXXX-Bridging-Header.h

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

※ブリッジファイルなど初期設定については、【Swift×mBaaS】のクイックスタートを作ってみました！＜CocoaPods編＞を参照してください。

• AppDelegate.swiftに処理①～③を追記します。

AppDelegate.swift

@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)

        /** 追加② **/
        return FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    func applicationDidBecomeActive(application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
        /** 追加① **/
        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)
    }

}

これで準備はOKです！

Facebookの認証情報でニフティクラウド mobile backendの会員登録を行う部分の処理

• Facebookログインボタンの配置から説明します。
• 「Assets.xcassets」フォルダーを開きます。①の矢印のところにログインボタンの画像をドラッグ＆ドロップで取り込みます。
  • ログイン画像のサンプルを用意しています。最後の参考欄に貼りましたので、よろしければご利用ください。

• 次にMain.storyboardファイルを開きます。②右下から「Button」を選択肢、ドラッグ＆ドロップで貼り付けてください。
• ③そこに先ほど取り込んだ画像を入れます。「Image」から取り込んだ画像を選択します。

• ④下図のようにサイズを調整してください。

• 右上の○が２つ重なったマークをクリックします。すると、ViewController.Swiftが開きます。
• ログインボタンをcontrolボタンを押しながら⑤矢印のところにドラッグ＆ドロップします。

• すると上手のように⑥吹き出しがでてくるので、「Connection」を「Action」にして、「Name」を決めて（任意ですが、ここでは「facebookLoginBtn」としました。）右下の「Connect」をクリックします。すると下図のようにボタンをタップしたときの処理を書くメソッドが作成されます。ここに⑦次に説明するロジックを書いてください。

ViewController.swift

@IBAction func facebookLoginBtn(sender: AnyObject) {
    NCMBFacebookUtils.logInWithReadPermission(["email"]) {(user, error) -> Void in
        if (error != nil){
            if (error.code == NCMBErrorFacebookLoginCancelled){
                // Facebookのログインがキャンセルされた場合

            }else{
                // その他のエラーが発生した場合

            }
        }else{
            // 会員登録後の処理

        }
    }
}

• 会員登録にはlogInWithReadPermissionメソッドを利用します。
• 会員登録時には、Facebookの認証情報を取得するためにFacebookアプリかブラウザ版のFacebookに遷移します。
• したがって、アプリ利用者がログイン処理をキャンセルすることができるため、NCMBErrorFacebookLoginCancelledのエラー切り分けを行う必要があります。
• ViewController.swiftのviewDidLoad()メソッド内に処理を記述します。（※動作確認のため）
  • viewDidLoad()メソッドに記述すると、アプリが起動されたときにFacebook認証画面に繊維させることができます。

ダッシュボードでの設定

ニフティクラウドmobile backendのダッシュボードで連携を許可する設定をします。

• 「アプリ設定」＞「SNS連携」を開いてFacebook連携のFacebook連携の許可にある「許可する」を選択します。
• 先ほどのFacebookのDashboard画面からApp IDをコピーして、FacebookAppIDに貼り付けます。
• 「保存する」をクリックします。

ビルドする

• 実機でデバッグビルドする場合、方法は【Xcode】AppleDeveloperProgramに登録不要！！実機ビルドする方法に書きましたので、こちらをご覧いただき、ビルドしてください。
• ビルドに成功したら、Facebookログインをおこなっていただき、ニフティクラウドmobile backendのダッシュボードを見てください。
• 会員管理の中にユーザー情報が登録され、authDataにはアクセストークンが保存されているはずです。

• 取り出すとわかりますが、アクセストークンは結構長い…

authData

{"facebook":{"id":"13********09539","access_token":"CAAN***********************************************************4U2ZBJZCCEBADV8Y9jmwcyNAZBvoRDRmAe5TIMYaWvFZCMCCI8zSek1Le4ehlrIFOeQtZCDu8ubTJVd1kgCQcE3Ecc6j5btathc6DuD5mZAVs1pYZCLvP9cE1lpnAZA6LwOkc2LzRnWpWWHwogh5moZC8xejoAzq8hyoF2DVuGqxsauqjzzPVWsACs0ZD","expiration_date":{"__type":"Date","iso":"2016-**-**T**:**:55.611Z"}}}

※一部非表示（「*」に変更）にしています。

操作はここまでです。mBaaSを使ってのFacebookログインは、上手くできましたか？？

参考

• FacebookLoginボタンサンプルを作ったので、よろしければどうぞ。

  • その１：こちら
  • その２：こちら

• 【Swift×mBaaS】シリーズ

  • ＜framework形式＞SwiftでmBaaSを始めよう！
  • ＜CocoaPods＞SwiftでmBaaSを始めよう！
  • Swiftでデータベースを使おう！①（保存・取得・更新・削除）
  • Swiftでデータベースを使おう！②（関連付け・検索）
  • Swiftでデータベースを使おう！③（ランキングを作る・アクセス権限）
  • Swiftでログイン機能をつけてみよう！
  • Swiftでプッシュ通知を送ろう！