MBaaSでラクラク実装！ Androidアプリのユーザー登録とログイン・ログアウト機能

MBaaSと連携するAndroidアプリを作る第2回

更新日: 2014/09/16
公開日: 2014/09/16

ポスト

今回作成する処理とアクティビティ

　さて、これから自動作成されたひな形であるMainActivityを編集して処理を記述していくわけですが、MainActivityの他に2つアクティビティを作成します。1つはログイン処理を行うLoginActivityであり、もう1つはユーザー登録を行うUserAddActivityです。

処理とアクティビティの関係

　このアプリを起動したときに呼び出されるのは、MainActivityです。MainActivityでは、ユーザーがNCMB上のアプリstampTimeに未ログインのときは、LoginActivityを呼び出して、ユーザーにログインしてもらいます。ログインすると、MainActivityに戻ってきます。

　ユーザー登録をまだしていないときは、LoginActivityからユーザー登録と書かれたボタンをタップすると、UserAddActivityを呼び出し、ユーザー登録に必要な項目を入力してもらいます。ユーザー登録が完了すると、同様にMainActivityに進みます。

　では、MainActivityのコードをみていきましょう。

リスト2 MainActivity.java

package jp.co.easier.stamptime;

import com.nifty.cloud.mb.NCMB;
import com.nifty.cloud.mb.NCMBException;
import com.nifty.cloud.mb.NCMBUser;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
    private NCMBUser currentUser;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // SDKの初期セットアップ（アプリで一回だけ）
        NCMB.initialize(getApplication(), getString(R.string.app_key), getString(R.string.client_key));（1）
        currentUser = NCMBUser.getCurrentUser();（2）
        if (currentUser == null) {
            // 未ログインのときは、
            Intent intent = new Intent(MainActivity.this,LoginActivity.class);
            startActivity(intent);	
        } else {
            TextView userName = (TextView)findViewById(R.id.UserName);
            userName.setText(currentUser.getUsername());（3）
        }

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_add:
                //Intent intent1 = new Intent(MainActivity.this,TaskAddActivity.class);
                //startActivity(intent1);	
                return true;
            case R.id.menu_sum:
                //Intent intent2 = new Intent(MainActivity.this,SumActivity.class);
                //startActivity(intent2);	
                return true;
            case R.id.menu_logout:
                // ログアウト
                try {
                    NCMBUser.logOut();（4）
                    Intent intent3 = new Intent(MainActivity.this,LoginActivity.class);
                    startActivity(intent3);	
                } catch(NCMBException e) {
                    Toast.makeText(this,"エラー: " + e.getLocalizedMessage(),Toast.LENGTH_LONG).show();
                }
                return true;
        }
        return false;
    }
}

　NCMBのAPIを使うには、まず最初に、NCMB.initializeメソッドで初期化する必要があります（1）。引数にはstrings.xmlに保存したアプリケーションキーとクライアントキーをgetStringメソッドで取得して指定します。

　次にNCMBUserオブジェクトのgetCurrentUserメソッドで、ログイン中のユーザー情報を取得します（2）。

　currentUserがnullのときは、未ログインだと判断できるので、インテントを作成して、startActivityメソッドで、LoginActivityに移動します。

ログイン画面

　ログイン画面では、ユーザー名とパスワードを入力します。

リスト3 activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LoginActivity" >
        
    <EditText
        android:id="@+id/UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="User"
        />

    <EditText
        android:id="@+id/Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"（1）
        />
    
    <Button
        android:id="@+id/BtnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="ログイン"
        />
    <Button
        android:id="@+id/BtnUserAdd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="ユーザー登録へ"
        />
     
</LinearLayout>

　ログイン画面のレイアウトファイルであるactivity_login.xmlでは、ユーザー名を入力するEditTextとパスワードを入力するEditTextを配置しています。パスワードのEditTextには、android:inputTypeプロパティにtextPasswordを指定して（1）、パスワードとして入力した文字がマスクされるようにしています。

　EditTextの下には、ログインボタンとユーザー登録画面へ移動するためのボタンがあります。

リスト4 LoginActivity.java

package jp.co.easier.stamptime;

import com.nifty.cloud.mb.LogInCallback;
import com.nifty.cloud.mb.NCMBException;
import com.nifty.cloud.mb.NCMBUser;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class LoginActivity extends Activity {
    private EditText mUserName;
    private EditText mPassword;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mUserName = (EditText)findViewById(R.id.UserName);
        mPassword = (EditText) findViewById(R.id.Password);
        
        Button btnLogin = (Button) findViewById(R.id.BtnLogin);
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {（1）

                String userName = mUserName.getText().toString();
                String userPassword = mPassword.getText().toString();
                
                // ログイン 非同期
                NCMBUser.logInInBackground(userName, userPassword, new LogInCallback() {（2）
                    @Override
                    public void done(NCMBUser user, NCMBException e) {
                        if (e == null) {
                            Toast.makeText(getApplication(),"ログイン成功", Toast.LENGTH_SHORT).show();
                            Intent intent = new Intent(LoginActivity.this,MainActivity.class);
                            startActivity(intent);（3）
                        } else {
                            Toast.makeText(getApplication(),"ログイン失敗！", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
            }
        });
        Button btnUserAdd = (Button) findViewById(R.id.BtnUserAdd);
        btnUserAdd.setOnClickListener(new View.OnClickListener() {（4）
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LoginActivity.this,UserAddActivity.class);
                startActivity(intent);  
            }
        });
    }
}

　LoginActivity.javaのログインボタンが押されたときの処理を見ていきましょう。（1）のonClick()の中です。EditTextのgetTextメソッドで、入力されたユーザー名とパスワードを取得します。

　NCMBUser.logInInBackgroundメソッドがログイン処理です（2）。引数はユーザー名、パスワード、コールバックです。

　NCMBの場合、 xxxxxInBackgroundとInBackgroundが付くメソッドは非同期で実行されます。ログイン処理を始めとしてNCMBの利用はインターネット越しですから、非同期処理で行います。

　「非同期処理を呼び出して、終わったらコールバックに指定した処理を実行してもらう」。これがNCMBのSDKの利用で一番良く使うパターンです。

　LogInCallbackのdoneメソッドでは、（3）でMainActivityをスタートしています。これでログインした状態でMainActivityが呼び出されます。

　さて、ユーザー登録へと書かれたボタンが押されたら（4）、UserAddActivityに移動します。

リスト5 activity_useradd.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".UserAddActivity">
    
    <EditText
        android:id="@+id/AddName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="User"
        />
    <EditText
        android:id="@+id/MailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="E-mail"
    />
    
    <EditText
        android:id="@+id/AddPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        />
    
    <Button
        android:id="@+id/AddButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="登録"
        />
    
</LinearLayout>

　UserAddActivityのレイアウトファイルactivity_useradd.xmlには、EditTextが3つあります。ユーザー名とメールアドレスとパスワードを入力します。

ユーザー登録画面

　登録ボタンを押したときの処理をみていきましょう。

リスト6 UserAddActivity.java

package jp.co.easier.stamptime;

import com.nifty.cloud.mb.NCMBException;
import com.nifty.cloud.mb.NCMBUser;
import com.nifty.cloud.mb.SignUpCallback;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class UserAddActivity extends Activity {
    
    private EditText mUserName;
    private EditText mEmail;
    private EditText mPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_useradd);
        mEmail = (EditText) findViewById(R.id.MailAddress);

        mUserName = (EditText)findViewById(R.id.AddName);
        mPassword = (EditText) findViewById(R.id.AddPassword);

        Button btn = (Button) findViewById(R.id.AddButton);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ここに Sign up（登録）処理
                NCMBUser user = new NCMBUser();（1）
                user.setUsername(mUserName.getText().toString());           
                user.setEmail(mEmail.getText().toString());
                user.setPassword(mPassword.getText().toString());
                
                user.signUpInBackground(new SignUpCallback() {（2）
                    @Override
                    public void done(NCMBException e) {
                        if (e == null) {
                            // Sign up 成功！
                            Toast.makeText(getApplication(), "ユーザー登録成功！", Toast.LENGTH_SHORT).show();
                            Intent intent = new Intent(UserAddActivity.this,MainActivity.class);
                            startActivity(intent);  
                        } else {
                            // Sign up 失敗！
                            Toast.makeText(getApplication(), "失敗！", Toast.LENGTH_SHORT).show();
                            Log.d("登録失敗",e.getMessage());（3）
                        }
                    }
                });
            }
        });
    }

}

　NCMBUserオブジェクトを生成して（1）、EditTextに入力されたユーザー名、メールアドレス、パスワードをセットしたら、signUpInBackgroundメソッドにコールバックを指定して実行します（2）。signUpInBackgroundメソッドは非同期のユーザー登録処理です。コールバック処理では、doneメソッドで、MainActivityを呼び出します。

NCMBの会員管理画面

　さて、Androidアプリで登録したユーザーがどのようにバックエンドに記録されているか、NCMBの管理画面にログインして確認してみましょう。stampTimeアプリを選んで、会員管理メニューをクリックすると、Androidアプリで入力したユーザーが作成されていることがわかります。userNameの前にobjectIdが付いており、このIdでユーザーは識別されているのだろうと予想されます。

NCMBのダッシュボード