- ニフティクラウドmobile backendの『SNS連携(Facebook連携)』を利用して、Facebookのログイン機能を実装したサンプルプロジェクトです
- Facebook連携で取得した会員データはニフティクラウドmobile backendの『会員管理機能』として扱うことができます
- 【iOS Swift】アプリにログイン機能をつけよう!も用意していますので、ぜひ活用してください☆
- このコンテンツは簡単な操作ですぐに ニフティクラウドmobile backendの機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!
注1:詳しくはこちらをご覧ください
- Mac OS X 10.10(Yosemite)
- Xcode ver. 7.2.1
- iPhone6 ver. 8.2
※上記内容で動作確認をしています。 ※古いバージョンだと動作しないい可能性があります。 ※Simulatorでは動作しない可能性があります。実機ビルドが必要な場合はこちらをご覧ください。
1. ニフティクラウドmobile backendの会員登録とログイン→アプリ作成
- 上記リンクから会員登録(無料)をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- アプリ作成されると下図のような画面になります
- この2種類のAPIキー(アプリケーションキーとクライアントキー)はXcodeで作成するiOSアプリにニフティクラウドmobile backendを紐付けるために使用します
- 動作確認後に会員情報(アクセストークン)が保存される場所も確認しておきましょう
2. GitHubからサンプルプロジェクトのダウンロード
- この画面(GitHub)のボタンをクリックし、さらにボタンをクリックしてサンプルプロジェクトをMacにダウンロードします
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」の画面が出ます
- 一番下まスクロールして、「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペしてください
- 次へをクリックします
- 一番上まで戻って、右上の「Skip Quick Start」をクリックします
- ダッシュボードが表示されます
- 「アプリ名」と「アプリ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.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を呼ぶことも可能ですが、ニフティクラウドmobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBFacebookUtilsメソッドが備わっているので、1つ呼べば、Facebookへのログインとニフティクラウドmobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
- また一度会員登録してしまえば、あとはニフティクラウドmobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます
- ニフティクラウドmobile backend のドキュメント(SNS連携:Facebook連携)をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
- SwiftでFacebook連携しよう!
- 【続】SwiftでFacebook連携しよう!(<CocoaPods>でuse_frameworks!を有効にした場合)
- 同じ内容の【Objective-C】版もご用意しています
- https://github.com/natsumo/ObjcFacebookLoginApp