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 認証の際に SDK 内で使用している Activity を利用可能にするために AndroidManifest.xml の application タグ配下に以下の内容を追加します。

<activity
    android:name="com.kii.cloud.storage.social.connector.KiiSocialNetworkConnectorLoginActivity"
    android:label="@string/app_name" />

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

Facebook アカウントによるログインは、以下の 2 通りの方法で利用可能です。

後者の UI を利用してログインする方法は近日中に削除を予定しております(サポート対象外の機能となります)。 前者のアクセストークンを利用する方法をご利用ください。

Facebook アクセストークンを利用してログイン

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

// Create a KiiSocialConnect instance.
KiiSocialConnect connect = Kii.socialConnect(KiiSocialConnect.SocialNetwork.SOCIALNETWORK_CONNECTOR);

// Specify Facebook as the social network provider for logging in to Kii Cloud.
Bundle option = new Bundle();
option.putParcelable(KiiSocialNetworkConnector.PROVIDER, KiiSocialNetworkConnector.Provider.FACEBOOK);

// Set a Facebook access token.
option.putString(KiiSocialNetworkConnector.ACCESS_TOKEN, accessToken);

// Authenticate the user to Kii Cloud with the Facebook access token.
connect.logIn(null, option, new KiiSocialCallBack() {
  @Override
  public void onLoginCompleted(KiiSocialConnect.SocialNetwork network, KiiUser user, Exception exception) {
    if (exception != null) {
      // Handle the error.
      return;
    }
  }
});

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

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

  2. ソーシャル・ネットワークコネクターのインスタンスを socialConnect() メソッドで生成します。この際、SocialNetwork.SOCIALNETWORK_CONNECTOR を引数で指定します。

  3. Bundle を作成して対象のソーシャルネットワークを指定します。ここでは Provider.FACEBOOK を指定しています。

  4. Bundle に Facebook のアクセストークンを設定します。

  5. logIn() メソッドでログイン処理を実行します。指定されたアカウントが新規の場合、ログイン処理に先立ちユーザー作成処理も同時に行われます。このメソッドはノンブロッキングのため、処理結果はコールバックで取得しています。

    アクセストークンを使ったログインでは Facebook 用のログイン画面は表示されず、全てバックグラウンドで処理が行われます。このため、SDK が用意する UI を利用してログイン する場合に必要な logIn() メソッドの第 1 引数の Activity の指定や onActivityResult() メソッドでの処理は不要です。

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

// Get the token bundle for the social network provider.
KiiSocialConnect connect = Kii.socialConnect(SocialNetwork.SOCIALNETWORK_CONNECTOR);
Bundle b = connect.getAccessTokenBundle();

// Get the access token.
String accessToken = b.getString("oauth_token");

// Get the user ID provided by the social network provider.
String providerUserId = b.getString("provider_user_id");

// Check if a new Kii user was created when the logIn() method was executed.
boolean kiiNewUser = b.getBoolean("kii_new_user");

SDK が用意する UI を利用してログイン(非推奨)

Facebook アカウントを用いて Kii Cloud にログインする例を以下に挙げます。

Activity activity = this.getActivity();
KiiSocialConnect connect = Kii.socialConnect(SocialNetwork.SOCIALNETWORK_CONNECTOR);

Bundle options = new Bundle();
options.putParcelable(KiiSocialNetworkConnector.PROVIDER, KiiSocialNetworkConnector.Provider.FACEBOOK);

// Login.
connect.logIn(activity, options, new KiiSocialCallBack() {
  @Override
  public void onLoginCompleted(SocialNetwork network, KiiUser user, Exception exception) {
    if (exception != null) {
      // Handle the error.
      return;
    }
  }
});

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

  1. Facebook アカウントを利用したログインを制御する Activity を作成します。
  2. ソーシャル・ネットワークコネクターのインスタンスを socialConnect() メソッドで生成します。この際、SocialNetwork.SOCIALNETWORK_CONNECTOR を引数で指定します。
  3. Bundle を作成し、ログインを行う対象のソーシャルネットワークを指定します。ここでは Provider.FACEBOOK を指定しています。
  4. logIn() メソッドでログイン処理を実行します。指定されたアカウントが新規の場合、ログイン処理に先立ちユーザー作成処理も同時に行われます。このメソッドはノンブロッキングのため、処理結果はコールバックで取得しています。

注意:さらに、以下の例のように Facebook 認証を完了するためのメソッドを onActivityResult() メソッドに追加する必要があります。

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  if (requestCode == KiiSocialNetworkConnector.REQUEST_CODE) {
    Kii.socialConnect(SocialNetwork.SOCIALNETWORK_CONNECTOR).respondAuthOnActivityResult(
      requestCode,
      resultCode,
      data);
  }
}

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

すでに存在する Kii Cloud ユーザーを Facebook アカウントとリンクできます。リンクを行うと、このユーザーは Facebook アカウント認証経由で Kii Cloud にログインできるようになります。

以下に、アカウントのリンク処理を行う例を示します。

// Assume that a user has logged in.

// Create a KiiSocialConnect instance.
KiiSocialConnect connect = Kii.socialConnect(KiiSocialConnect.SocialNetwork.SOCIALNETWORK_CONNECTOR);

// Specify Facebook as the social network provider for logging in to Kii Cloud.
Bundle option = new Bundle();
option.putParcelable(KiiSocialNetworkConnector.PROVIDER, KiiSocialNetworkConnector.Provider.FACEBOOK);

// Set a Facebook access token.
option.putString(KiiSocialNetworkConnector.ACCESS_TOKEN, accessToken);

// Link the Facebook account with the currently logged-in Kii user.
connect.link(null, option, new KiiSocialCallBack() {
  @Override
  public void onLinkCompleted(KiiSocialConnect.SocialNetwork network, KiiUser user, Exception exception) {
    if (exception != null) {
      // Handle the error.
      return;
    }
  }
});

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

  1. ソーシャル・ネットワークコネクターのインスタンスを socialConnect() メソッドで生成します。この際、SocialNetwork.SOCIALNETWORK_CONNECTOR を引数で指定します。

  2. Bundle を作成して対象のソーシャルネットワークを指定します。ここでは Provider.FACEBOOK を指定しています。

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

  4. link() メソッドを実行して、現在ログイン中のユーザーと Facebook アカウントをリンクします。このメソッドは非同期で実行され、コールバックで結果が通知されます。

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

Kii Cloud のユーザーアカウントと Facebook アカウントのリンクを解除する例を以下に示します。

// Assume that a user has logged in.

// Create a KiiSocialConnect instance.
KiiSocialConnect connect = Kii.socialConnect(KiiSocialConnect.SocialNetwork.SOCIALNETWORK_CONNECTOR);

// Specify Facebook as the social network provider for logging in to Kii Cloud.
Bundle option = new Bundle();
option.putParcelable(KiiSocialNetworkConnector.PROVIDER, KiiSocialNetworkConnector.Provider.FACEBOOK);

// Unlink the Facebook account from the currently logged-in Kii user.
connect.unlink(null, option, new KiiSocialCallBack() {
  @Override
  public void onUnLinkCompleted(KiiSocialConnect.SocialNetwork network, KiiUser user, Exception exception) {
    if (exception != null) {
      // Handle the error.
      return;
    }
  }
});

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

  1. ソーシャル・ネットワークコネクターのインスタンスを socialConnect() メソッドで生成します。この際、SocialNetwork.SOCIALNETWORK_CONNECTOR を引数で指定します。

  2. Bundle を作成して対象のソーシャルネットワークを指定します。ここでは Provider.FACEBOOK を指定しています。

  3. unlink() メソッドを実行して、現在ログイン中のユーザーと Facebook アカウントとのリンクを解除します。このメソッドは非同期で実行され、コールバックで結果が通知されます。

設定と実装の例

ここでは、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 アプリで Android の "クイックスタート" を実行します。

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

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

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

    • AndroidManifest.xml で API レベルの設定を確認します。
    • app または mobile ディレクトリ直下にある build.gradle に対して、repositoriescompile を設定します。
    • 文字列リソースに facebook_app_id を追加します。
    • AndrodiManifest.xml に <meta-data> 要素を追加します。
    • Facebook 管理画面でパッケージ名とキーハッシュを指定します。

    基本的に画面の説明どおりに設定できますが、動作しない場合は以下の点を確認してください。

    • build.gradle の変更後、Android Studio で Sync を実行した際にエラーが発生する場合は、各 SdkVersion やサポートライブラリーのバージョンを調整します。
    • キーハッシュの指定の際、keytool の -exportcert オプションがエラーになる場合は、-export オプションに書き換えてください。
    • キーハッシュの指定の際、コマンドラインの結果を Facebook へ設定する前に keytool と openssl のパイプ | 以降をいったん削除して、keytool コマンドの動作を確認しておくことをおすすめします。keytool コマンドでエラーが発生していても、BASE64 文字列が生成されることがあります。特に、Windows では環境変数 %HOMEPATH% にドライブが含まれないため、実行時のドライブが異なると、誤った BASE64 文字列が出力されます。
  5. Facebook アプリ ID とアプリシークレットを確認し、Kii Cloud の 開発者ポータルに設定 します。

プログラムの実装

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

  1. ユーザー認証を行う画面のリソースに Facebook のログインボタンを追加します。

    <com.facebook.login.widget.LoginButton
              android:id="@+id/facebook_login_button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
    

    モバイルアプリに合わせてレイアウトを調整します。

    このボタンに対する入力画面や認証の処理は、Facebook SDK によって提供されます。

  2. ユーザー認証画面の実装クラスに処理を追加します。

    クラスに以下のフィールドに追加します。

    private LoginButton mFacebookLoginButton;
    private CallbackManager mFacebookCallbackManager;
    

    onCreate() メソッドなどでコールバックを設定します。また、ログイン中だったときの処理を記述します。

    if (AccessToken.getCurrentAccessToken() == null) {
      mFacebookCallbackManager = CallbackManager.Factory.create();
      mFacebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button);
      mFacebookLoginButton.registerCallback(mFacebookCallbackManager, new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult loginResult) {
          String accessToken = loginResult.getAccessToken().getToken();
          // Add Kii Cloud login process here.
        }
    
        @Override
        public void onCancel() {
        }
    
        @Override
        public void onError(FacebookException exception) {
        }
      });
    } else {
      String accessToken = AccessToken.getCurrentAccessToken().getToken();
      // Add Kii Cloud login process here.
    }
    

    上記 // Add Kii Cloud login process here. の 2 箇所に、Kii Cloud のログイン処理やリンク処理を記述します。この際、Facebook のアクセストークン accessToken を利用できます。

    なお、Facebook SDK の初期化コード FacebookSdk.sdkInitialize() は、最新の SDK では自動的に実行されるため不要です。

  3. onActivityResult() メソッドを実装します。

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      mFacebookCallbackManager.onActivityResult(requestCode, resultCode, data);
    }
    

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

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