Skip to content
This repository has been archived by the owner on Apr 1, 2024. It is now read-only.

NIFCLOUD-mbaas/android_facebook_demo

BranchesTags
 
 

Repository files navigation

【Android】アプリにFacebookログイン機能をつけよう！

画像1

概要

ニフクラ mobile backendについて

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

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

画像2

動作環境

  • MacOS Monterey version 12.5
  • Android Studio Chipmunk | 2021.2.1 Patch 2
  • Pixel 2 - Android 13 (Simulator)

※上記内容で動作確認をしています。

手順

1. ニフクラ mobile backendの会員登録とアプリ作成

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

画像3

  • アプリ作成されると下図のような画面になります。
  • この２種類のAPIキー（アプリケーションキーとクライアントキー）はAndroidアプリにニフクラ mobile backendを紐付けるために使用します。

画像4

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

画像5

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

  • プロジェクトのGithubページから「Clone or download」＞「Download ZIP」をクリックします。
  • プロジェクトを解凍します。

3. AndroidStudioでアプリを起動

  • AndroidStudioを開き、解凍したプロジェクトを選択します。

画像6

4. APIキーの設定

  • MainActivity.javaを編集します。
  • 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます。

画像07

  • それぞれYOUR_APPLICATION_KEYとYOUR_CLIENT_KEYの部分を書き換えます。
    • このとき、ダブルクォーテーション（"）を消さないように注意してください！

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

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

画像0001

  • Build Connected Experiencesを選択して、Continueで続きます。

画像0002

  • アプリ名をApp Display Nameに入力してからCreate Appでアプリを作ります。

画像0003

  • Security Checkの認証のところでVerifyしたら、Submitで完了します。

画像0004

  • アプリ管理の画面で作成したアプリが確認できます。

画像0005

  • アプリIDやクライアントトークンの設定します。
    • /app/src/main/res/values/strings.xmlを編集します。

画像8

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

画像9

  • 最後に「Basic」をクリックし、「Privacy policy URL」 を貼って、「Save」ボタンを押します。
  • その後、上の「In development」にSwitchしますし、ポップアップの「Switch mode」を選びます。 これでアプリの公開は完了します。

画像14

  • アプリをFacebookに結合する。
    • 「Add Platform」をクリックしてAndroidのアプリを追加選択します。
    • 「Key Hashes」欄に下記処理から値を取得・設定します。
    • （Windowsの場合）コマンドプロンプトから次のコマンドを入力します。パスワードを聞かれますので 'android' と返します。
    • このとき、opensslコマンドは「openssl場所」/bin/openssl.exeを指定しております。
    • １行目でコマンドを、２行目でパスワードを入力し、３行目でKey Hashが表示されます。
>keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
>キーストアのパスワードを入力してください: android
>0QYX************iNiEXYdeVw=

画像15

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

画像LoginError

6. 動作確認

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

画像16

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

画像17

  • Facebookにログインして「アプリ」＞「アプリ設定」欄にログインの記録が保存されます。

画像18

操作はここまでです。

解説

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

SDKのインポートと初期設定

ロジック

  • FacebookSDKを使用するための処理をMainActivity.javaに記述しています
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.appevents.AppEventsLogger;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;
import com.nifcloud.mbaas.core.NCMB;
import com.nifcloud.mbaas.core.NCMBException;
import com.nifcloud.mbaas.core.NCMBFacebookParameters;
import com.nifcloud.mbaas.core.NCMBUser;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //**************** APIキーの設定とSDKの初期化 **********************
        NCMB.initialize(this.getApplicationContext(), "YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        AppEventsLogger.activateApp(this.getApplication());

        callbackManager = CallbackManager.Factory.create();
        LoginButton mLoginButton = findViewById(R.id.login_button);
        mLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                //Login to NIFCLOUD mobile backend
                NCMBFacebookParameters parameters = new NCMBFacebookParameters(
                        loginResult.getAccessToken().getUserId(),
                        loginResult.getAccessToken().getToken(),
                        loginResult.getAccessToken().getExpires()
                );
                try {
                    NCMBUser.loginWith(parameters);
                    Toast.makeText(getApplicationContext(), "Login to NIFCLOUD mbaas with Facebook account", Toast.LENGTH_LONG).show();
                } catch (NCMBException e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onCancel() {
                // App code
                Log.d("tag", "onCancel");
            }

            @Override
            public void onError(@NonNull FacebookException e) {
                // App code
                Log.d("tag", "onError:" + e);
            }
        });
    }
  • Facebook連携はブラウザのFacebookページに遷移し、行われます。
  • Facebookログイン、ログアウトボタン押下時の処理は以下のcom.facebook.login.LoginManager.javaに記述しています
    // ログインボタン押下時の処理
    boolean onActivityResult(int resultCode, Intent data, FacebookCallback<LoginResult>  callback) {
        FacebookException exception = null;
        AccessToken newToken = null;
        LoginClient.Result.Code code = LoginClient.Result.Code.ERROR;
        Map<String, String> loggingExtras = null;
        LoginClient.Request originalRequest = null;

        boolean isCanceled = false;
        if (data != null) {
            LoginClient.Result result =
                    (LoginClient.Result) data.getParcelableExtra(LoginFragment.RESULT_KEY);
            if (result != null) {
                originalRequest = result.request;
                code = result.code;
                if (resultCode == Activity.RESULT_OK) {
                    if (result.code == LoginClient.Result.Code.SUCCESS) {
                        newToken = result.token;
                    } else {
                        exception = new FacebookAuthorizationException(result.errorMessage);
                    }
                } else if (resultCode == Activity.RESULT_CANCELED) {
                    isCanceled = true;
                }
                loggingExtras = result.loggingExtras;
            }
        } else if (resultCode == Activity.RESULT_CANCELED) {
            isCanceled = true;
            code = LoginClient.Result.Code.CANCEL;
        }

        if (exception == null && newToken == null && !isCanceled) {
            exception = new FacebookException("Unexpected call to LoginManager.onActivityResult");
        }

        boolean wasLoginActivityTried = true;
        Context context = null; //Sadly, there is no way to get activity context at this point.S
        logCompleteLogin(
                context,
                code,
                loggingExtras,
                exception,
                wasLoginActivityTried,
                originalRequest);

        finishLogin(newToken, originalRequest, exception, isCanceled, callback);

        return true;
    }
    // ログアウトボタン押下時の処理
    public void logOut() {
        AccessToken.setCurrentAccessToken(null);
        Profile.setCurrentProfile(null);
    }

参考

FacebookSDKを使ってFacebook会員認証するのとニフクラ mobile backendSDKを使ってFacebook会員認証するのは何が違うのか？

画像19

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

もっと深く知りたい方へ

About

NCMB Android facebook login demo

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

21 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • Java 100.0%