- ニフティクラウドmobile backendの『SNS連携(Facebook連携)』を利用して、Facebookのログイン機能を実装したサンプルプロジェクトです
- Facebook連携で取得した会員データはニフティクラウドmobile backendの『会員管理機能』として扱うことができます
- 【iOS Objective-C】アプリにログイン機能をつけよう!も用意していますので、ぜひ活用してください☆
- このコンテンツは簡単な操作ですぐに ニフティクラウド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.m
を編集します- 先程ニフティクラウド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画面で左上の実行ボタン(さんかくの再生マーク)をクリックします
-
シミュレーターが起動したら、Login画面が表示されます
-
Login ボタンをクリックします
- Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います
- ログインに失敗した場合は画面にエラー内容が表示されます(Facebookログインのブラウザ画面でキャンセルした場合は表示されません)
- 万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます
- ログインに成功したらログアウトします
- 保存に成功したら、ニフティクラウドmobile backendのダッシュボードから「会員管理」を確認してみましょう!
authData
にはアクセストークンが保存されます
操作はここまでです
サンプルプロジェクトに実装済みの内容のご紹介
- ニフティクラウドmobile backend のドキュメント(クイックスタート)をご活用ください
- このDEMOアプリは「CocoaPods」を利用する方法でSDKをインポートしています
- FacebookSDKを使用するための処理を
Appdelegate.m
に記述しています
#import "AppDelegate.h"
#import "NCMB/NCMB.h"
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//********** APIキーの設定とSDKの初期化 **********
[NCMB setApplicationKey:@"YOUR_APPLICATION_KEY" clientKey:@"YOUR_CLIENT_KEY"];
return [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
}
- (void)applicationWillEnterForeground:(UIApplication *)application {
[FBSDKAppEvents activateApp];
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
@end
Main.storyboard
でデザインを作成し、LoginViewController.m
とLogoutViewController.m
にロジックを書いています- Facebook連携はブラウザのFacebookページに遷移し、行われます。Facebookログインボタン押下時の処理は以下のように記述されます
//
// LoginViewController.m
// ObjcFacebookLoginApp
//
// Loginボタン押下時の処理
- (IBAction)FacebookLoginBtn:(UIButton *)sender {
[NCMBFacebookUtils logInWithReadPermission:@[@"email"] block:^(NCMBUser *user, NSError *error) {
if (error) {
if (error.code == NCMBErrorFacebookLoginCancelled) {
// Facebookのログインがキャンセルされた場合
} else {
// その他のエラーが発生した場合
}
} else {
// 会員登録後の処理
}
}];
}
//
// LogoutViewController.m
// ObjcFacebookLoginApp
//
// Logoutボタン押下時の処理
- (IBAction)logoutBtn:(UIButton *)sender {
// ログアウト
[NCMBUser logOut];
}
- もちろん直接FacebookSDKを呼ぶことも可能ですが、ニフティクラウドmobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBFacebookUtilsメソッドが備わっているので、1つ呼べば、Facebookへのログインとニフティクラウドmobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
- また一度会員登録してしまえば、あとはニフティクラウドmobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます
- 同じ内容の【Swift】版もご用意しています
- https://github.com/natsumo/SwiftFacebookLoginApp
- ニフティクラウドmobile backend のドキュメント(SNS連携:Facebook連携)をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
- SwiftでFacebook連携しよう!
- 【続】SwiftでFacebook連携しよう!(<CocoaPods>でuse_frameworks!を有効にした場合)