ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

Monacaアプリ開発!mBaaSを使ってログイン機能を簡単実装しよう!

初めまして!新入社員の平出です!

皆さん、Monacaアプリ開発してますか!?アプリを作ってみたは良いけど、ログイン機能はサーバー連携が必要で、実装するのが面倒くさいなあと思っていないでしょうか?そうした、メンドクサさを省いてくれるサービスがあるんです!それがニフティクラウドmobile backendというクラウドサービスです。今回はニフティクラウドmobile backendを使ってAndroidアプリへログイン機能を組み込むサンプルアプリを作りました。こちらを用いて、チュートリアル形式でログイン機能の組み込みが体験できます!ぜひ、試してみてください!

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

aboutmBaaS

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

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

今回の概要

monaca_login_overview

今回は、Monacaを用いて作ったアプリとmobile backendを連携して、ログイン機能を実装するサンプルプロジェクトの紹介となります。

作業の流れとしては以下のたった四つだけです!

  1. 開発環境の準備
  2. サンプルプロジェクトをインポート
  3. アプリケーションキーとクライアントキーを設定して初期化
  4. 動作確認

これから、この四つの流れを細かく見てきましょう!

1.開発環境の準備

今回準備して頂きたい環境は以下の二つとなります。

  • Monaca(HTML/CSS/JavaScriptでマルチプラットフォーム(iOS/Android/Windowsなど)にアプリを開発できる統合開発環境)
  • mBaaS

これら二つの利用登録をお願いします。

2.サンプルプロジェクトをインポート

準備が済んだら、Monacaでプロジェクトのインポートを選択し、新規プロジェクトを作成します。

monaca_new_project

その後、「URLからインポートする」を選択し、URLにhttps://github.com/ncmbadmin/sample_monaca_login_template/archive/master.zipを指定します。

monaca_new_project_2

3.アプリケーションキーとクライアントキーを設定して初期化

インポートが終了したら、app.jsファイルを開きます(www>js>app.js)。そして、下図の赤い四角で囲んだ部分に各キーを設定して初期化を行います。

appKeyClientKey

各キーの取得は新しいアプリを作成することで可能です。また、アプリ設定から確認することもできます。

appKeyClientKey_setting

 

4.動作確認

以上で全ての作業が終了しました。後は、実際にデモを動かしてサーバーにログイン情報が登録されているかの確認を行いましょう。

まずは、Monaca側で新規登録を行います。

test_account

登録が成功したらダイアログが表示されます。サーバー側で実際にデータが格納されているか確認しましょう。

check

会員管理画面で上図のように表示されていたら、成功です!

Monacaアプリにプッシュ通知も実装できるmBaaS

今回はMonacaアプリでログイン機能の実装を行いました! これ以外にも、プッシュ通知を組み込むこともできます。

その参考となるドキュメントもございますのでそちらもぜひご活用ください!

sample&tutrial