Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of natsumo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ObjcFacebookLoginApp.xcodeproj
ObjcFacebookLoginApp.xcworkspace
ObjcFacebookLoginApp
Pods
readme-img
Podfile
Podfile.lock
README.md

README.md

【iOS Objective-C】アプリにFacebookログイン機能をつけよう!

画像1

概要

ニフティクラウドmobile backendって何??

スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!

注1:詳しくはこちらをご覧ください

画像2

動作環境

  • Mac OS X 10.10(Yosemite)
  • Xcode ver. 7.2.1
  • iPhone6 ver. 8.2

※上記内容で動作確認をしています。 ※古いバージョンだと動作しないい可能性があります。 ※Simulatorでは動作しない可能性があります。実機ビルドが必要な場合はこちらをご覧ください。

手順

1. ニフティクラウドmobile backendの会員登録とログイン→アプリ作成

  • 上記リンクから会員登録(無料)をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

画像3

  • アプリ作成されると下図のような画面になります
  • この2種類のAPIキー(アプリケーションキーとクライアントキー)はXcodeで作成するiOSアプリにニフティクラウドmobile backendを紐付けるために使用します

画像4

  • 動作確認後に会員情報(アクセストークン)が保存される場所も確認しておきましょう

画像5

2. GitHubからサンプルプロジェクトのダウンロード

  • この画面(GitHub)の画像10ボタンをクリックし、さらに画像11ボタンをクリックしてサンプルプロジェクトをMacにダウンロードします

3. Xcodeでアプリを起動

  • ダウンロードしたフォルダを開き、画像09をダブルクリックしてXcode開きます 画像08

画像6

4. APIキーの設定

画像07

  • それぞれYOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEYの部分を書き換えます
  • このとき、ダブルクォーテーション(")を消さないように注意してください!
  • 書き換え終わったらcommand + sキーで保存をします

5. FacebookSDKを使用するための準備と設定

  • facebook for developersにログイン(Facebookアカウントがない場合はアカウントを作成して)して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します

画像12

  • iOSを選択し、アプリ名(任意)を入力し、「新しいFacebookアプリIDを作成」をクリックします
  • 「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックしてFacebookアプリを作成します

画像13

  • 「Quick Start for iOS」の画面が出ます
  • 一番下まスクロールして、「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペしてください
  • 次へをクリックします

画像14

  • 一番上まで戻って、右上の「Skip Quick Start」をクリックします

画像15

  • ダッシュボードが表示されます
  • 「アプリ名」と「アプリID」をXcodeプロジェクトのInfo.plistにコピペします

画像16

  • またこの「アプリID」はニフティクラウドmobile backendにも設定します
  • 「アプリ設定」>「SNS連携」を開いてFacebook連携の「Facebook連携の許可」にある「許可する」を選択し、「保存する」をクリックします

画像23

  • 最後に「アプリレビュー」をクリックし、「アプリ名を公開しますか?」を「はい」にしておきます

画像18

6. 動作確認

  • Xcode画面で左上の実行ボタン(さんかくの再生マーク)をクリックします

  • シミュレーターが起動したら、Login画面が表示されます

  • Login ボタンをクリックします

画像19

  • Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います
  • ログインに失敗した場合は画面にエラー内容が表示されます(Facebookログインのブラウザ画面でキャンセルした場合は表示されません)
  • 万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます
  • ログインに成功したらログアウトします

画像21 画像20


  • 保存に成功したら、ニフティクラウドmobile backendのダッシュボードから「会員管理」を確認してみましょう!
  • authDataにはアクセストークンが保存されます

画像1

操作はここまでです

解説

サンプルプロジェクトに実装済みの内容のご紹介

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.mLogoutViewController.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を使ってFacebook会員認証するのとニフティクラウドmobile backendSDKを使ってFacebook会員認証するのは何が違うのか?

画像22

  • もちろん直接FacebookSDKを呼ぶことも可能ですが、ニフティクラウドmobile backendSDKを呼べば裏でFacebookSDKを呼んで処理するNCMBFacebookUtilsメソッドが備わっているので、1つ呼べば、Facebookへのログインとニフティクラウドmobile backendへ会員情報保存が同時に行えるので一石二鳥というわけです
  • また一度会員登録してしまえば、あとはニフティクラウドmobile backendの会員管理機能で処理が行えるので自前で会員管理システムを構築する必要がなくより楽に開発を行えます

もっと深く知りたい方へ

You can’t perform that action at this time.