- ニフクラ mobile backendの『SNS連携（Facebook連携）』を利用して、Facebookのログイン機能を実装したサンプルプロジェクトです
- Facebook連携で取得した会員データはニフクラ mobile backendの『会員管理機能』として扱うことができます
- 【iOS Swift】アプリにログイン機能をつけよう！も用意していますので、ぜひ活用してください☆
- このコンテンツは簡単な操作ですぐに ニフクラ mobile backendの機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！
注1：詳しくはこちらをご覧ください
- Mac OS 13.4.1 (Venture)
- Xcode Version 15.0
- iPhone SE (iOS 17)
※上記内容で動作確認をしています。 ※古いバージョンだと動作しない可能性があります。 ※Simulatorでは動作しない可能性があります。実機ビルドが必要な場合はこちらをご覧ください。
1. ニフクラ mobile backendの会員登録とログイン→アプリ作成
- 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- アプリ作成されると下図のような画面になります
- この２種類のAPIキー（アプリケーションキーとクライアントキー）はXcodeで作成するiOSアプリにニフクラ mobile backendを紐付けるために使用します
- 動作確認後に会員情報（アクセストークン）が保存される場所も確認しておきましょう
2. GitHubからサンプルプロジェクトのダウンロード
- この画面(GitHub)の
ボタンをクリックし、さらに
ボタンをクリックしてサンプルプロジェクトをMacにダウンロードします
- ダウンロードしたフォルダを開き、
をダブルクリックしてXcode開きます 
AppDelegate.swiftを編集します- 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます
- それぞれ
YOUR_NCMB_APPLICATION_KEYとYOUR_NCMB_CLIENT_KEYの部分を書き換えます - このとき、ダブルクォーテーション（
"）を消さないように注意してください！ - 書き換え終わったら
command + sキーで保存をします
- facebook for developersにログイン（Facebookアカウントがない場合はアカウントを作成して）して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します
- iOSを選択し、アプリ名（任意）を入力し、「新しいFacebookアプリIDを作成」をクリックします
- 「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックしてFacebookアプリを作成します
- 「Quick Start for iOS」の画面が出ます
- 二番の「バンドルIDを追加する」を「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペしてください
- 「Save」ボタンをクリックします
- ダッシュボードに戻ります。
- 「アプリ名」と「アプリID」をXcodeプロジェクトの
Info.plistにコピペします
- またこの「アプリID」はニフクラ mobile backendにも設定します
- 「アプリ設定」＞「SNS連携」を開いてFacebook連携の「Facebook連携の許可」にある「許可する」を選択し、「保存する」をクリックします
- 最後に上の「開発中」を「ライブモード」に変更します。「ライブモードに切り替えますか？」を「モード切り替え」にしておきます
-
Xcode画面で左上の実行ボタン（さんかくの再生マーク）をクリックします
-
ビルド時にエラーが発生した場合の対処方法
-
Xcodeのバージョンが古い場合
import NCMBにエラーが発生し、上手くSDKが読み込めないことがあります -
その場合は【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法をご覧いただき、別の読み込み方法をお試しください
-
シミュレーターが起動したら、Login画面が表示されます
-
Login ボタンをクリックします
- Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います
- ログインに失敗した場合は画面にエラー内容が表示されます（Facebookログインのブラウザ画面でキャンセルした場合は表示されません）
- 万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます
- ログインに成功したらログアウトします
- 保存に成功したら、ニフクラ mobile backendのダッシュボードから「会員管理」を確認してみましょう！
authDataにはアクセストークンが保存されます
操作はここまでです
サンプルプロジェクトに実装済みの内容のご紹介
- ニフクラ 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.initialize(applicationKey: 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を呼ぶことも可能ですが、ニフクラ mobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBUserメソッドが備わっているので、１つ呼べば、Facebookへのログインとニフクラ mobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
- また一度会員登録してしまえば、あとはニフクラ mobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます
- ニフクラ mobile backend のドキュメント（SNS連携：Facebook連携）をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
- SwiftでFacebook連携しよう！
- 【続】SwiftでFacebook連携しよう！（＜CocoaPods＞でuse_frameworks!を有効にした場合）
- 同じ内容の【Objective-C】版もご用意しています
- https://github.com/natsumo/ObjcFacebookLoginApp