- ニフクラ mobile backendの『SNS連携（Facebook連携）』を利用して、Facebookのログイン機能を実装したサンプルプロジェクトです
- Facebook連携で取得した会員データはニフクラ mobile backendの『会員管理機能』として扱うことができます
- 【iOS Objective-C】アプリにログイン機能をつけよう！も用意していますので、ぜひ活用してください☆
- このコンテンツは簡単な操作ですぐに ニフクラ mobile backendの機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！
注1：詳しくはこちらをご覧ください
- Mac OS 12.5.1 (Monterey)
- Xcode Version 14.0
- iPhone X (iOS 16)
※上記内容で動作確認をしています。 ※古いバージョンだと動作しないい可能性があります。 ※Simulatorでは動作しない可能性があります。実機ビルドが必要な場合はこちらをご覧ください。
1. ニフクラ mobile backendの会員登録とログイン→アプリ作成
- 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- アプリ作成されると下図のような画面になります
- この２種類のAPIキー（アプリケーションキーとクライアントキー）はXcodeで作成するiOSアプリにニフクラ mobile backendを紐付けるために使用します
- 動作確認後に会員情報（アクセストークン）が保存される場所も確認しておきましょう
2. GitHubからサンプルプロジェクトのダウンロード
- この画面(GitHub)の
ボタンをクリックし、さらに
ボタンをクリックしてサンプルプロジェクトをMacにダウンロードします
- Using below command to install NCMB SDK and Facebook SDK.
pod install
- ダウンロードしたフォルダを開き、
をダブルクリックしてXcode開きます 
AppDelegate.mを編集します- 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます
- それぞれ
YOUR_APPLICATION_KEYとYOUR_CLIENT_KEYの部分を書き換えます - このとき、ダブルクォーテーション（
"）を消さないように注意してください！ - 書き換え終わったら
command + sキーで保存をします
- facebook for developersにログイン（Facebookアカウントがない場合はアカウントを作成して）して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します
- アプリの利用目的は「その他」を選択します
- アプリ表示名（任意）と連絡先メールアドレスを入力して「アプリIDを作成」をクリックします
- 製品を追加するページに移るので「Facebookログイン」の設定ボタンをクリックする
- プラットフォームは「iOS」を選択します
- 下のクイックスタートに進みますので順に設定していきます
- 開発環境は「SDK:Cocoapods」を選択します
- 今回はこの設定は既に終えているので「次へ」で進みます
- バンドルIDはxcodeにあるものと同じものを使用します
- アプリのシングルサインオンは今回は有効にする必要はありません
- 「info.plistを構成する」の内容は今回はすでに含まれているので以下の設定のみ行います
- 「アプリ名」と「アプリID」をXcodeプロジェクトの
Info.plistにコピペします
- 「アプリデリゲートに接続する」以降も今回は必要ないので「次へ」で飛ばして完了です
-
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];
}
@endMain.storyboardでデザインを作成し、LoginViewController.mとLogoutViewController.mにロジックを書いています- Facebook連携はブラウザのFacebookページに遷移し、行われます。Facebookログインボタン押下時の処理は以下のように記述されます
//
// LoginViewController.m
// ObjcFacebookLoginApp
//
// Loginボタン押下時の処理
- (IBAction)FacebookLoginBtn:(UIButton *)sender {
// labelを空にする
self.label.text = @"";
if ([FBSDKAccessToken currentAccessToken]) {
[self performSegueWithIdentifier:@"login" sender:self];
} else {
FBSDKLoginManager *loginManager = [[FBSDKLoginManager alloc] init];
[loginManager logInWithPermissions:@[@"public_profile", @"email"] fromViewController:self handler:^(FBSDKLoginManagerLoginResult * _Nullable result, NSError * _Nullable error) {
//TODO: process error or result
if(error){
// その他のエラーが発生した場合
NSLog(@"エラーが発生しました:%ld", error.code);
self.label.text = [NSString stringWithFormat:@"エラーが発生しました:%ld", error.code];
} else {
if(result.token.userID != nil){
// mobile backend会員登録するための認証情報を作成
NSDictionary *facebookInfo = @{@"id":result.token.userID,
@"access_token":result.token.tokenString,
@"expiration_date":result.token.expirationDate};
//会員のインスタンスを作成
NCMBUser *user = [NCMBUser user];
//Facebookの認証情報を利用して会員登録を行う
[user signUpWithFacebookToken:facebookInfo withBlock:^(NSError *error) {
if (error){
//会員登録に失敗した場合の処理
NSLog(@"Facebookの会員登録とログインに成功しました：%@", user.objectId);
} else {
//会員登録に成功した場合の処理
NSLog(@"Facebookの会員登録とログインに成功しました：%@", user.objectId);
[self performSegueWithIdentifier:@"login" sender:self];
}
}];
} else {
if (result.isCancelled) {
// Facebookのログインがキャンセルされた場合
NSLog(@"Facebookのログインがキャンセルされました");
self.label.text = @"Facebookのログインがキャンセルされました";
} else {
// その他のエラーが発生した場合
NSLog(@"エラーが発生しました:%ld", error.code);
self.label.text = [NSString stringWithFormat:@"エラーが発生しました:%ld", error.code];
}
}
}
}];
}
}//
// LogoutViewController.m
// ObjcFacebookLoginApp
//
// Logoutボタン押下時の処理
- (IBAction)logoutBtn:(UIButton *)sender {
NSLog(@"ログアウトしました");
FBSDKLoginManager *loginManager = [[FBSDKLoginManager alloc] init];
// 非同期でログアウト
[NCMBUser logOutInBackgroundWithBlock:^(NSError *error) {
if (error){
//エラー処理
NSLog(@"Logout error %@", error);
} else {
// Facebookの認証情報を削除
[loginManager logOut];
[self dismissViewControllerAnimated:YES completion:nil];
}
}];
}
- もちろん直接FacebookSDKを呼ぶことも可能ですが、ニフクラ mobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBUserメソッドが備わっているので、１つ呼べば、Facebookへのログインとニフクラ mobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
- また一度会員登録してしまえば、あとはニフクラ mobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます
- 同じ内容の【Swift】版もご用意しています
- https://github.com/NIFCLOUD-mbaas/SwiftFacebookLoginApp
- ニフクラ mobile backend のドキュメント（SNS連携：Facebook連携）をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
- SwiftでFacebook連携しよう！
- 【続】SwiftでFacebook連携しよう！（＜CocoaPods＞でuse_frameworks!を有効にした場合）