MBaaS徹底入門――Kii Cloudでスマホアプリ開発

第9回Kii Cloudを用いたチャットアプリケーションの開発その5]―SNSログイン機能の実装

第5回から第8回の4回にかけて、KiiCloudを用いたチャットルームの実装について解説しました。

第9回は作成したチャットアプリケーションを拡張し、さらに使いやすくしてみましょう。今回はFacebookやTwitterなどのソーシャルネットワークのアカウントを利用して、アプリケーションにログインできるよう拡張したいと思います。

今回使用したソースコードについては、GitHubで公開しています。こちらもあわせてご覧ください。

Facebookログイン機能について

KiiCloudではアプリケーションのサインアップ・サインインの方法として、ユーザー名・Emailアドレス・電話番号以外に、FacebookもしくはTwitterアカウントを利用することができます。例えば、既にFacebook のアカウントを持っているユーザーに対し、新規にアプリケーション固有のアカウントを作成することなく、Facebookのアカウントを用いてKiiCloudアプリケーションのサインアップやサインインを行うことができます。

これらの認証に必要なコンポーネントはSDKに含まれているため、アプリケーション側ではわずか数行のコードを追加するだけで利用することができます。

今回はFacebookを例に説明しますが、Twitterも同様にして設定・実装することができます。ぜひ試してみてください。

Facebookアカウントによるログインを利用するための手順は下記の通りです。次節から設定・実装を始めて行きましょう。

  • Facebookアプリケーションの作成
  • KiiCloudアプリケーションとFacebookアプリケーションの連携設定
  • Facebookログイン機能の実装

Facebookアプリケーションの作成

まずはFacebookアプリケーションの作成を行います。Facebook Developersへアクセスして開発者登録を行い、アプリケーションの作成を行います。このチャットアプリケーションでは、⁠App Name⁠⁠、⁠App Namespace⁠⁠、⁠App Category⁠を下記のように設定します。

Facebookアプリケーション作成画面
Facebookアプリケーション作成画面

アプリケーションの作成が終わったら「Settings」→「Basic」を選択し、アプリケーションに固有の設定を行います。

このアプリケーションは “Native Android App”として動作させるため、この項目を選択し、“Package Name”、“Key Hashes”を合わせて設定します。チャットアプリケーションでは “com.kii.sample.chat”のパッケージネームを利用しているため、この値を設定します。

Facebookアプリケーション設定画面
Facebookアプリケーション設定画面

これでFacebookアプリケーションの設定は完了です。

KiiCloudアプリケーションとFacebookアプリケーションの連携設定

続いて、KiiCloudとFacebookが連携できるよう設定を行っていきます。KiiCloudの開発者コンソールを開き、先ほど作成したFacebookアプリケーションのIDを設定します。

開発者ポータルでKiiChat-gihyoアプリケーションを選択後、⁠Edit」ボタン(右上⁠⁠→⁠Settings」ボタン(左上)の順にクリックすると、ユーザ管理に関する設定を行うページに遷移します。この画面にある「Your Facebook App ID」の項目に、先程作成したFacebookアプリケーションのIDを入力し「Save」ボタンをクリックします。

FacebookアプリケーションID設定画面
FacebookアプリケーションID設定画面

以上で、KiiCloudとFacebookの連携設定が完了しました。

Facebookログイン機能の実装

いよいよFacebookログイン機能の実装を行います。第5回で実装したユーザーサインアップのフローを元に、Facebookログインのフローを下記のようにします

Facebookログイン時のデータフロー
Facebookログイン時のデータフロー
  1. Facebookアカウントを用いてログインする。
  2. chat_usersバケットに自身の情報を登録し、他のユーザーから検索できるようにする。
  3. 他のユーザーから通知を受け取るために自分専用の invite_notify トピックをユーザースコープに作成する。ただしユーザースコープのトピックは、デフォルトのACLで他のユーザーからメッセージが送信できない設定となっているため、追加でACLを設定し、他のユーザーからメッセージが送信できるように設定する。

上記フローの1つ目、⁠ユーザを新規に作成し、Kii Cloudへ登録を行う」の部分が「Facebookアカウントを用いてログインする」に変更されているのが分かると思います。 それでは、Facebookアカウントでのサインアップ・サインイン処理をSigninActivityへ下記のように実装します。ここではFacebookへログインするためのボタンを用意し、タップを契機として動作するようにします。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_signin);

    this.btnFbSignin = (Button)findViewById(R.id.button_facebook);
    this.btnFbSignin.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {

            // KiiFacebookConnectのインスタンスを取得し、FacebookのAppIDで初期化する
            KiiFacebookConnect connect = (KiiFacebookConnect)Kii.socialConnect(SocialNetwork.FACEBOOK);
            connect.initialize(ApplicationConst.FACEBOOK_APP_ID, null, null);

            // アプリケーションに必要なパーミッションの設定を行う
            Bundle options = new Bundle();
            String[] permission = new String[] { "email" };
            options.putStringArray(KiiFacebookConnect.FACEBOOK_PERMISSIONS, permission);

            // Facebookログインを行う
            connect.logIn(SigninActivity.this, options, new KiiSocialCallBack() {

                // ログイン完了時のコールバックを設定する
                public void onLoginCompleted(SocialNetwork network, KiiUser user, Exception exception) {
                    if (exception == null) {
                        if (checkRemember.isChecked()) {

                            // ログイン状態を保持する場合は、SharedPreferencesにAccessTokenを保存する
                            Logger.i(user.getAccessToken());
                            PreferencesManager.setStoredAccessToken(user.getAccessToken());
                        }

                        // フロー2・フロー3のログイン後処理を行う
                        new PostSigninTask(user.getDisplayname(), user.getEmail()).execute();
                    } else {

                        // Exceptionがある場合はログイン失敗のToastを表示する
                        Logger.e("failed to sign up", exception);
                        ToastUtils.showShort(SigninActivity.this, "Unable to sign up");
                    }
                }
            });
        }
    });
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    Kii.socialConnect(SocialNetwork.FACEBOOK).respondAuthOnActivityResult(requestCode, resultCode, data);
}

まずは、ソーシャルネットワークコネクター(KiiFacebookConnect)のインスタンスをKii.socialConnectメソッドで生成します。この際、ターゲットとなるソーシャルネットワークを引数で指定します。今回はFacebookログインを行いたいため、SocialNetwork.Facebook を指定します。次に、KiiFacebookConnect#initialize メソッドを実行してソーシャルネットワークコネクターを初期化します。この際、FacebookアプリケーションのIDを第1引数に指定するのを忘れないようにしてください。

次に、Facebookのパーミッションを設定します。このチャットアプリケーションではEmailアドレスをユーザー検索に利用したいため、Bundleに KiiFacebookConnect.FACEBOOK_PERMISSIONS キーへ対する値として ⁠email⁠⁠ の文字列が入ったString配列を設定します。これでユーザーのEmailアドレスが KiiUser#getEmail() で取得でき、アプリケーション内で扱えるようになります。

もちろんこれ以外のパーミッションを設定することもできます。詳細はFacebook Developersを確認してください。

そして、loginメソッドを実行してログイン処理を開始します。指定されたアカウントがアプリケーションで初めて利用される場合、必要に応じてサインアップ処理も同時に行われます。このメソッドは非同期処理のため、処理結果は onLoginCompleted のコールバックにて取得することができます。

まとめ

Facebookログインの実装を終えて、如何でしたでしょうか。

このように、KiiCloudではSNSのアカウントを用いたログインが可能となっています。現在はFacebook・Twitterのみですが、他のSNSアカウントでもログインできるよう拡張を今後予定しております。

またこのSNSログインは、iOS用のSDKでも利用することができます。是非iOSでも試してみてください。

次回は、チャットアプリケーションの利用動態を分析する方法・機能について、解説・実装を行っていきます。どうぞお楽しみに。

おすすめ記事

記事・ニュース一覧