FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Swift × iOS SDKでTodoアプリを作る(Facebookログインを実装する)

f:id:mbaasdevrel:20180810221729p:plain

前回はID、パスワードによる認証機能を実装しましたが、今回はFacebookログイン機能を実装します。Facebookなどのソーシャルログインの場合、会員登録とログインが同時にできるのがメリットです。

事前に用意するもの

Facebook for DevelopersにてFacebookアプリを作成しておきます。

フレームワークのインストール

FacebookのフレームワークはCocoaPodsでインストールするのが手軽です。以下の4つをPodfileに追加します。記述したら pod install を実行します。

pod 'Bolts'
pod 'FacebookCore'
pod 'FacebookLogin'
pod 'FacebookShare'

そして *-Bridge-Header.h ファイルにてフレームワークを読み込みます。

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

AppDelegate の修正

まずフレームワークを読み込みます。

import FacebookLogin

次に didFinishLaunchingWithOptions を修正します。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
  // Override point for customization after application launch.
  NCMB.setApplicationKey(keys.applicationKey , clientKey: keys.clientKey)
  // 以下を追加
  FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
  return true
}

さらに以下のコードを追加します。

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool {
  return FBSDKApplicationDelegate.sharedInstance().application(application, open: url as! URL, sourceApplication: sourceApplication, annotation: annotation)
}

最後に applicationDidBecomeActive を追加します。

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()
}

Info.plistの修正

Info.plist をSource Codeとして開いて、下記を <dict> タグの中に追加します。 {facebook_app_id}{facebook_app_name} は作成したFacebookアプリのものと置き換えてください。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{facebook_app_id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{facebook_app_id}</string>
<key>FacebookDisplayName</key>
<string>{facebook_app_name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

ログイン処理を作る

ログイン処理を行うコントローラでは以下のフレームワークを読み込みます。

import FacebookCore
import FacebookLogin

画面上には適当なログインボタンを作ります。そのボタンをタップした時の処理です。 LoginManager().logIn がログイン処理になります。

@IBAction func fbLoginButton(_ sender: Any) {
  LoginManager().logIn(readPermissions: [.email], viewController: self, completion: { result in
    // 処理を書く
  })
}

結果は .success と .failed 、 .cancelled に分かれます。

switch result {
case let .success( _, _, token):
  // ログイン成功
case let .failed(error):
  // ログインエラー
  print("error:\(error)")
case .cancelled:
  // ログインキャンセル
  print("cancelled")
}

今回はログイン成功時の処理だけ紹介します。 token の中にmBaaSでログイン処理を行うのに必要な情報がすべて入っています。ユーザID、アクセストークン、有効期限をそれぞれ指定します。

let facebookInfo = [
  "id": token.userId,
  "access_token": token.authenticationToken,
  "expiration_date": token.expirationDate
  ] as [String : Any]

そしてユーザオブジェクトを作成し、 signUpwithFacebookToken パラメータとともに呼び出します。

let user = NCMBUser.init()
user.signUp(withFacebookToken: facebookInfo, with: {(error) in
  if error != nil {
    print("Login failed")
  } else {
    print("Login successful")
    self.viewWillAppear(true)
  }
})

これでFacebookログイン処理が完成です。

f:id:mbaasdevrel:20180810221628p:plain

まとめ

Facebook SDKを使うので、コーディング量はごくわずかで実装が完了します。ぜひ皆さんのアプリにもFacebookログインを付けてみてください。

今回のコードはgoofmint/NCMB-Swift-iOS-Todo at v4にアップロードしてあります。実装時の参考にしてください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。