【Android】mBaaSでアプリにFacebookログイン機能をつけよう！ - ニフクラ mobile backend（mBaaS）お役立ちブログ

こんにちは！新入社員の平出です！

皆さん、Androidアプリ開発してますか！？せっかく開発したアプリ、多く使ってもらうためにもログインの手間は省きたいですよね。その手段の一つとしてFacebook連携があるのはご存知でしょうか？また、Facebook連携は組み込んでみたいけど、実装が大変そうだなと思っていないでしょうか？そうした、メンドクサさを省いてくれるサービスがあるんです！それがニフティクラウドmobile backendというクラウドサービスです。今回はニフティクラウドmobile backendを使ってAndroidアプリへFacebook連携を組み込むサンプルアプリを作りました。こちらを用いて、チュートリアル形式でFacebook連携が体験できます！ぜひ、試してみてください！

ニフティクラウドmobile backendとは？

about_mBaaS ニフティクラウドmobile backendとは、mBaaS（mobile backend as a Service）と呼ばれるクラウドサービスで、スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービスです。

クラウド上に用意された機能をAPIで呼び出すだけで利用できるので、サーバー開発・運用不要でよりリッチなバックエンド機能をアプリに実装することができます。ここからはニフティクラウドmobile backendではなくmBaaSと呼ばせていただきます。Android SDKも用意しており、Androidからも簡単に利用できます。

今回の概要

overview

Facebookのログイン機能を実装したサンプルプロジェクトに対して、mBaaSの『SNS連携（Facebook連携）』を利用して組み込んでいきます。また、FaceBook連携で取得した会員データはmBaaSの『会員管理機能』として扱うことができます。

今回は以下4つの手順で進めて行きたいと思います。

mBaaSでAPIキー取得
サンプルプロジェクトにAPIキーを設定
FacebookSDKを使用するための準備と設定
動作確認

尚、動作確認は以下の環境で行っています。

Windows 7 Professional
Facebook SDK 4.12.1
Android Studio 1.5
Android ver 4x,5x

それでは、早速始めましょう！

1.mBaaSでAPIキー取得

まずはmBaaSの会員登録(無料)します。登録が完了してログインをすると、下図のように「アプリの新規作成」画面が出るのでアプリを作成します。

android_sns_api3_2

アプリを作成すると下図のような画面になります。この2種類のAPIキー(アプリケーションキーとクライアントキー)はAndroid Studioで作成するAndroidアプリにmBaaSを紐付けるために使用します。

android_sns_api4

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

android_sns_api

2.サンプルプロジェクトにAPIキーを設定

GitHubにアクセスしてサンプルプロジェクトをダウンロードしましょう。ボタンをクリックして、さらにボタンをクリックしてダウンロードします。ダウンロードが完了したら、Android Studioを開き、解凍したプロジェクトを選択して開きます。

android_sns_sample

「MainActivity.java」を開いてAPIキーの設定を行いましょう。

先ほどmBaaSのダッシュボード上で確認したAPIキーを貼り付けます。

android_sns_api2

それぞれ「YOUR_NCMB_APPLICATION_KEY」と「YOUR_NCMB_CLIENT_KEY」の部分を書き換えます。この時、ダブルクォーテーション(")を消さないように注意してください！書き換えたらファイルを保存しておきましょう。

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

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

(初めての場合は「マイアプリ」をクリック後に「Facebookに統合されたアプリはありません」と出るのでその右にある「新しいアプリを作成」ボタンをクリックします。)

android_sns_facebookdev

「表示名」「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックします。Securityチェック欄には質問の対象画像を全て選択し、「確定」をクリックします。しばらくするとアプリが作成されます。

android_sns_facebookdev10

そうしたらアプリ専用ページに飛びます。左メニューからダッシュボードをクリックしてアプリIDをコピーしましょう。

android_sns_facebookdev4

アプリIDを設定するために、Android Studio開いて

/app/src/main/res/values/strings.xml

を編集します。

android_sns_facebookdev5

また、このアプリIDはmBaaSにも設定をします。左側のメニューから、「アプリ設定」を開き、SNS連携の設定を開きます。携携の許可にチェックを入れた上で、Facebookの開発者向けサイトで発行されたアプリIDを入力してください。そうしたら「保存する」クリックしましょう。

android_sns_facebookdev6

facebook for developers左メニューから「アプリレビュー」をクリックし、「アプリ名を公開しますか？」を「はい」にしておきます。

android_sns_facebookdev7

ここで最後のステップに進みます。アプリをFacebookに結合する作業をしていきましょう。コマンドプロンプトから下記1行目のコマンドを入力します。パスワードを聞かれますので 'android' と返します。このとき、opensslコマンドは「openssl場所」/bin/openssl.exeを指定しております。1行目でコマンドを、２行目でパスワードを入力し、３行目でKey Hashが表示されます。

>keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
>キーストアのパスワードを入力してください: android
>0QYXA5jGgnGg/wco7iNiEXYdeVw=

そうしたらfacebook for developersに戻り、左メニューから「①設定」＞下方にある「②プラットフォームを追加」をクリックします。Androidのアイコンを選択して、追加されたプラットフォーム内にある「③キーハッシュ」欄にコマンドプロンプト3行目で取得した値を設定して保存しましょう。 android_sns_facebookdev11

android_sns_facebookdev12

アプリをFacebookに結合設定が無い場合はログインエラーになります。

android_sns_facebookdev9

4.動作確認

いよいよ動作確認ですね！AndroidStudioからビルドしましょう。「プロジェクト場所\app\build\outputs\apk\ ***.apkにファイル」が生成されます。apk ファイルをインストールしてシミュレーターが起動したら、Login画面が表示されるので、Login ボタンをクリックします。Facebookログインの画面（ブラウザ）が表示されるので、必要事項を入力し、ログインを行います！ログインに成功したら一旦ログアウトしておきます。

android_sns_check