Go to Qiita Advent Calendar 2024 Top
LoginSignup
41
41

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 5 years have passed since last update.

@natsumoin富士通クラウドテクノロジーズ株式会社

SwiftでFacebook連携しよう！

Last updated at Posted at 2016-03-01

【Swift×mBaaS】シリーズ概要

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

事前準備のお願い

SwiftでFacebook連携しよう！

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

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

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

  • イメージはこんな感じです。
    図S12.png

  • もちろん直接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の利用登録を行います。（流れに沿って進む）

図s6.png

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

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

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

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

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

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

図S16.png

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

図S17.png

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

図S18.png

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

図S14.png

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

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

図S7.png

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

図S5.png

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

図S8.png

info.plistの編集

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

  • 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！

図S1.png

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」フォルダーを開きます。①の矢印のところにログインボタンの画像をドラッグ＆ドロップで取り込みます。
  • ログイン画像のサンプルを用意しています。最後の参考欄に貼りましたので、よろしければご利用ください。

図F17.png

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

図F18.png

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

図F19.png

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

図F20.png

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

図F21.png

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に貼り付けます。
  • 「保存する」をクリックします。

図S11.png

ビルドする

図S4.png

  • 取り出すとわかりますが、アクセストークンは結構長い…
authData
{"facebook":{"id":"13********09539","access_token":"CAAN***********************************************************4U2ZBJZCCEBADV8Y9jmwcyNAZBvoRDRmAe5TIMYaWvFZCMCCI8zSek1Le4ehlrIFOeQtZCDu8ubTJVd1kgCQcE3Ecc6j5btathc6DuD5mZAVs1pYZCLvP9cE1lpnAZA6LwOkc2LzRnWpWWHwogh5moZC8xejoAzq8hyoF2DVuGqxsauqjzzPVWsACs0ZD","expiration_date":{"__type":"Date","iso":"2016-**-**T**:**:55.611Z"}}}

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

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

参考

41
41
13

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
Sign upLogin
41
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?