Facebook アカウント連携

Facebook アカウントを用いたユーザー作成・ログインは、開発者ポータル上でアプリケーションの設定を行い、コードに数行追加するだけで簡単に実現できます。

Facebook との連携設定

Facebook アプリの作成

まずは、Facebook アプリを作成し、Facebook アプリ ID とアプリシークレットを取得する必要があります。取得方法については Facebook の公式ドキュメント を参照してください。

Facebook アプリ作成の際には、以下の情報が必要です。"有効な OAuth リダイレクト URI" は開発者ポータルにて指定したサーバー設定場所に対応する値を指定します。なお、${your-app-id} にはご利用の AppID を入力してください。

  • 表示名
  • ネームスペース
  • カテゴリ
  • 有効な OAuth リダイレクト URI(アプリ作成後、プロダクトに "Facebook ログイン" を追加して "設定" を選択)
    • アメリカ合衆国:https://${your-app-id}.us.kiiapps.com/api/apps/${your-app-id}/integration/webauth/callback
    • 日本:https://${your-app-id}.jp.kiiapps.com/api/apps/${your-app-id}/integration/webauth/callback
    • シンガポール:https://${your-app-id}.sg.kiiapps.com/api/apps/${your-app-id}/integration/webauth/callback
    • ヨーロッパ:https://${your-app-id}.eu.kiiapps.com/api/apps/${your-app-id}/integration/webauth/callback

Kii アプリケーションの設定

次の手順に従い、開発者ポータルより Facebook アプリ ID とアプリシークレットの登録を行います。

  1. アプリケーションコンソール上で "Edit" ボタンをクリックします。

  2. "SOCIAL NETWORKS" をクリックします。

  3. "Facebook" をクリックし Facebook の設定画面を開きます。

  4. Facebook アプリ ID とアプリシークレットをそれぞれ設定します。

Facebook アカウントによるログイン

Facebook が発行するアクセストークンを用いて Kii Cloud にログインする例を以下に挙げます。

Swift:

func myRegistrationMethod(){
  // Set a Facebook access token.
  let options : Dictionary = ["accessToken":accessToken]

  // Authenticate the user to Kii Cloud with the Facebook access token.
  KiiSocialConnect.log(in: .Facebook, options: options) { (retUser :KiiUser?, provider : KiiConnectorProvider, retError : Error? ) -> Void in
    if (retError != nil) {
      // Handle the error.
      return
    }
  }
}

Objective-C:

- (void)myRegistrationMethod {
  // Set a Facebook access token.
  NSDictionary *options = @{@"accessToken" : accessToken};

  // Authenticate the user to Kii Cloud with the Facebook access token.
  [KiiSocialConnect logIn:kiiConnectorFacebook
                  options:options
                    block:^(KiiUser *retUser, KiiConnectorProvider provider, NSError *retError) {
    if (retError != nil) {
      // Handle the error.
      return;
    }
  }];
}

基本手順は以下のとおりです。

  1. Facebook のアクセストークンを取得します。取得方法については、下記の 設定と実装の例 を参考にするか、Facebook の公式ドキュメント を参照してください。

  2. Facebook のアクセストークンを、optionsaccessToken パラメーターに設定します。

  3. logIn:options:block: メソッドでログイン処理を実行します。メソッドの引数に、対象のソーシャルネットワークとして kiiConnectorFacebook を指定します。指定されたアカウントが新規の場合、ログイン処理に先立ちユーザー作成処理も同時に行われます。このメソッドはノンブロッキングのため、処理結果はコールバックで取得しています。

ログインに成功すると、ユーザーに関する情報は SDK 内部にキャッシュされます。キャッシュされた情報は currentUser メソッドで取得できます。次の例のように accessTokenDictionary: メソッドを使うと、アクセストークンや関連パラメーターが取得できます。

Swift:

// Get the token dictionary for the social network provider.
let dict  = KiiSocialConnect.accessTokenDictionary(.Facebook)! as NSDictionary

// Get the access token.
let accessToken = (dict.object(forKey: "oauth_token") as? String)!

// Get the user ID provided by the social network provider.
let providerUserId = (dict.object(forKey: "provider_user_id") as? String)!

// Check if a new Kii user was created when the log(in:options:_:) method was executed.
let kiiNewUser : Bool = (dict.object(forKey: "kii_new_user") as? NSNumber)!.boolValue

Objective-C:

// Get the token dictionary for the social network provider.
NSDictionary *dict = [KiiSocialConnect accessTokenDictionary:kiiConnectorFacebook];

// Get the access token.
NSString *accessToken = [dict objectForKey:@"oauth_token"];

// Get the user ID provided by the social network provider.
NSString *providerUserId = [dict objectForKey:@"provider_user_id"];

// Check if a new Kii user was created when the logIn:options:block: method was executed.
BOOL kiiNewUser = [dict valueForKey:@"kii_new_user"];

Kii アカウントと Facebook アカウントのリンク解除

Kii Cloud のユーザーアカウントと Facebook アカウントのリンクを解除する例を以下に示します。unLinkCurrentUser:block: メソッドを実行するだけでアカウントのリンクが解除されます。

Swift:

// Assume that a user has logged in.

func myAccountUnlinkMethod(){
  // Unlink the Facebook account from the currently logged-in Kii user.
  KiiSocialConnect.unLinkCurrentUser(.Facebook) { (retUser :KiiUser?, provider : KiiConnectorProvider, retError : Error? ) -> Void in
    if (retError != nil) {
      // Handle the error.
      return
    }
  }
}

Objective-C:

// Assume that a user has logged in.

- (void) myAccountUnlinkMethod {
  // Unlink the Facebook account from the currently logged-in Kii user.
  [KiiSocialConnect unLinkCurrentUser:kiiConnectorFacebook
                                block:^(KiiUser *retUser, KiiConnectorProvider provider, NSError *retError) {
    if (retError != nil) {
      // Handle the error.
      return;
    }
  }];
}

設定と実装の例

ここでは、Facebook との連携方法を簡単に示します。

Facebook のアクセストークンの取得方法は Kii Cloud の仕様外ですが、ここでは、参考のため 2017 年 10 月現在の連携手順を簡単にまとめています。より詳細な手順や、最新バージョンで動作させる方法などは、Web 上の技術情報をご確認ください。

以下の手順を実行すると、モバイルアプリに Facebook のログインボタンが追加され、Facebook のユーザー名とパスワードを入力して認証できるようになります。認証に成功すると、そのユーザーに対する Facebook のアクセストークンが取得できるため、上記に示した Kii Cloud のログイン機能やリンク機能を利用できます。

なお、Web 上の記事には自動投稿などの目的で、自分のアクセストークンを取得するものがあるためご注意ください。Kii Cloud との連携では、エンドユーザーのアクセストークンを取得する必要があります。

Facebook の管理画面の操作

開発者向け Facebook で設定を行います。

  1. Web ブラウザーで 開発者向け Facebook を開いてログインします。

  2. Facebook アプリを新規に作成するか、既存の Facebook アプリを選択します。

  3. Facebook アプリで iOS の "クイックスタート" を実行します。

    iOS を未設定の場合は、"ダッシュボード" 画面から Facebook SDK の "クイックスタート" を実行し、プラットフォームとして "iOS" を選択します。

    iOS を設定済みの場合は、"設定" - "ベーシック" 画面の "iOS" から "クイックスタート" を実行します。

  4. クイックスタートの画面に従って以下の設定を行います。

    "Let's test out your integration" のコードは、下記のサンプルコードで代用するため、不要です。

    • Facebook SDK をダウンロードして、手順で指示されているフレームワークをプロジェクトに追加します。
    • Info.plist を XML ソースコードとして開き、指定されたタグを追加します。ログイン処理ではダイアログを使用するため、LSApplicationQueriesSchemes キーも追加します。
    • Bundle Identifier を Facebook の設定画面に入力します。
    • AppDelegate に初期化コードを追加します。Swift を使用している場合は、Objective-C からの移植作業が必要です。
  5. Facebook アプリ ID とアプリシークレットを確認し、Kii Cloud の 開発者ポータルに設定 します。

プログラムの実装

ダッシュボード画面の操作完了後、モバイルアプリに以下の実装を行います。

  1. ビューコントローラーのクラス宣言を書き換えます。

    目的のビューコントローラーで FBSDKLoginButtonDelegate プロトコルを実装するように書き換えます。

    Swift:

    import FBSDKLoginKit
    import FBSDKCoreKit
    
    class ViewController: UIViewController, FBSDKLoginButtonDelegate {
      // ......
    }
    

    Objective-C:

    #import <FBSDKLoginKit/FBSDKLoginKit.h>
    #import <FBSDKCoreKit/FBSDKAccessToken.h>
    
    @interface ViewController : UIViewController <FBSDKLoginButtonDelegate>
    
    @end
    
  2. ボタンをビューに追加します。

    viewDidLoad() メソッドに Facebook ボタンを追加します。

    以下のサンプルコードでは、FBSDKAccessToken.current() により、Facebook にログイン中でない場合にだけボタンが表示されます。実際のモバイルアプリでは仕様に合わせて実装を調整してください。

    Swift:

    override func viewDidLoad() {
      super.viewDidLoad()
    
      if FBSDKAccessToken.current() == nil {
        let logInButton = FBSDKLoginButton()
        logInButton.center = self.view.center
        logInButton.delegate = self
        self.view.addSubview(logInButton)
      } else {
        let accessToken = FBSDKAccessToken.current().tokenString!
        // Add Kii Cloud login process here.
      }
    }
    

    Objective-C:

    - (void)viewDidLoad {
      [super viewDidLoad];
    
      if ([FBSDKAccessToken currentAccessToken] == nil) {
        FBSDKLoginButton *loginButton = [[FBSDKLoginButton alloc] init];
        loginButton.center = self.view.center;
        loginButton.delegate = self;
        [self.view addSubview:loginButton];
      } else {
        NSString* acccessToken = [FBSDKAccessToken currentAccessToken].tokenString;
        // Add Kii Cloud login process here.
      }
    }
    

    なお、このコードを実行して表示されるボタンの表記は、Facebook SDK 4.19.0 より "Continue with Facebook" と表示されます。これ以前のバージョンでは、同じ実装で "Log in with Facebook" と表示されます。

  3. FBSDKLoginButtonDelegate プロトコルのメソッドを実装します。

    loginButton(_:didCompleteWith:error:) メソッドと、loginButtonDidLogOut(_:) メソッドを実装します。

    Swift:

    func loginButton(_ loginButton: FBSDKLoginButton!, didCompleteWith result: FBSDKLoginManagerLoginResult!, error: Error!) {
      if error != nil || result.isCancelled {
        return;
      }
      let accessToken = result.token.tokenString!;
      // Add Kii Cloud login process here.
    }
    
    func loginButtonDidLogOut(_ loginButton: FBSDKLoginButton!) {
    }
    

    Objective-C:

    - (void)loginButton:(FBSDKLoginButton *)loginButton didCompleteWithResult:(FBSDKLoginManagerLoginResult *)result error:(NSError *)error {
      if (error != nil || result.isCancelled) {
        return;
      }
      NSString* accessToken = result.token.tokenString;
      // Add Kii Cloud login process here.
    }
    
    -(void)loginButtonDidLogOut:(FBSDKLoginButton *)loginButton {
    }
    

実装後、モバイルアプリを実行します。ボタンを追加した画面に、Facebook のログインボタンが表示されているはずです。

サンプルコード中の // Add Kii Cloud login process here. の箇所に、Kii Cloud のログイン処理やリンク処理を記述します。この際、Facebook のアクセストークン accessToken を利用できます。該当箇所は、ビューの開始時にログイン状態であった場合と、Facebook のログインが完了した際のコールバックの 2 箇所あります。

今回示した方法では、アクセストークンを利用するための最低限の機能範囲を実装しています。より完全な実装方法は Facebook のドキュメントを参照してください。