Liferay Screensでモバイルアプリを作ってみよう（ログイン画面実装編）

こんにちは。おおたにです。

以前、Liferay Screensでモバイルアプリを作ってみよう（初級編）という記事を書きましたが、今回はアプリにログイン画面の機能を追加してみようと思います。以下ではこの記事のアプリに追加の機能を実装していくため、まずは上記記事を参考にアプリを作成してください。

Liferay ScreensのScreenletを探す

上記記事で、Screenletと呼ばれる出来合いのコンポーネントが提供されていることをお話ししました。Android向け、iOS向けに多数のコンポーネントがあるので、まずは目的の機能がScreenletとして提供されているか探します。今回はLogin Screenletという部品が目的にマッチするので、これを使って実装します。

Login Screenletを組み込む

さて、利用する部品が決まったので早速組み込みます。既存のactivityにログイン処理を追加することもできますが、今回はログイン処理用に新しいactivityを追加します。

1. Androidプロジェクト上で新規Empty Activityを追加する。Activity NameをLoginActivity、Layout Nameをactivity_loginとしておきます。

2. AndroidManifest.xmlのapplicationタグに.LoginActivityのエントリが生成されているので、その内容を以下のように書き換える。

<activity
    android:name=".LoginActivity"
    android:label="@string/activity_name"
    android:theme="@style/AppTheme">
</activity>

3 Androidプロジェクトのres/layout/activity_login.xmlを以下の内容で書き換え、Login Screenletをレイアウトに挿入する。これがログイン画面になります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.liferay.mobile.screens.auth.login.LoginScreenlet
        android:id="@+id/login_screenlet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:basicAuthMethod="email"
        app:credentialsStorage="shared_preferences"
        app:loginMode="basic" />
</LinearLayout>

4. LoginActivity.javaを以下の内容に置き換え、LoginListenerを実装する。ログイン画面の表示と、ログイン成功時にMainActivityに遷移する部分がポイントです。

public class LoginActivity extends AppCompatActivity implements LoginListener {

    private View content;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        LoginScreenlet screenlet = (LoginScreenlet)findViewById(R.id.login_screenlet);
        screenlet.setListener(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        content = findViewById(android.R.id.content);
    }

    @Override
    public void onLoginSuccess(User user) {
        startActivity(new Intent(getApplication(), MainActivity.class));
    }

    @Override
    public void onLoginFailure(Exception e) {
        Toast.makeText(this, R.string.login_error, Toast.LENGTH_SHORT).show();
    }
}

5. MainActivity.javaのonCreateを以下の内容に変更し、未ログイン時にLoginActivity（ログイン画面）に遷移する処理を追加する。

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebScreenlet screenlet = (WebScreenlet)findViewById(R.id.web_screenlet);
    screenlet.setListener(this);

    SessionContext.loadStoredCredentialsAndServer(CredentialsStorageBuilder.StorageType.SHARED_PREFERENCES);
    if (!SessionContext.isLoggedIn()) {
        startActivity(new Intent(getApplication(), LoginActivity.class));
    } else {
        WebScreenletConfiguration webScreenConfiguration = new WebScreenletConfiguration.Builder(LiferayServerContext.getServer() + "/web/guest/home")
                .setWebType(WebScreenletConfiguration.WebType.LIFERAY_AUTHENTICATED).load();
        screenlet.setWebScreenletConfiguration(webScreenConfiguration);
        screenlet.load();
    }
}

以上でログイン画面の実装は終わりです。とても簡単ですね！

エミュレータで動作確認してみよう

では、動作確認をしてみましょう。DebugもしくはRunアイコンをクリックし、Virtual Deviceを選択してエミュレーション開始です（Virtual Deviceが無い場合はCreate New Virtual Deviceで作成してください）。ビルドに成功すれば以下のようなログイン画面が表示されるはずです。


ユーザIDとパスワードを入力してログインに成功するとLiferayサイトが表示されるはずです。ログインに失敗した場合はログイン失敗メッセージが表示されてログイン画面に戻ります。

ログイン画面の実装は以上です。専用のログイン画面を用意するだけで、ぐっとネイティブアプリ感が出てくるうえに、認証情報/セッション情報をAndroid側で保持することもできるようになります。是非みなさんもチャレンジしてみてください！