ニフクラ mobile backend(mBaaS)お役立ちブログ

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

【JavaScript SDK】セッショントークンが残っている場合の自動ログインとセッション有効期限の延長方法

f:id:mbaasblog:20210125133118p:plain

JavaScript SDK を用いた「自動ログイン処理」の実装方法とセッショントークンの延長方法について解説します。

はじめに

スマートフォンアプリの場合、毎回毎回ユーザー認証を要求されアカウント情報を入力するような構成はあまり好ましくないかと思います。初回利用時に認証処理を実施していて、そのセッション情報が有効であれば 自動ログイン がされ、ユーザーは認証作業を意識することなく利用できる構成が理想と思います。

ではその自動ログイン処理とはどのように実装したらよいのか?本ブログでは、JavaScript SDK を用いた場合を例にし、セッショントークン払い出しの仕組みと共に解説します。難しくはないのですが、少しコツというか mobile backend の特性を把握する必要があるので、ぜひ確認してみてください。

自動ログインの実装とセッション有効期限を延長する方法

サインアップ(会員登録処理)はログイン処理については別途実装されているものとして説明します。
会員管理・認証(JavaScript & Monaca): ユーザーの新規登録
会員管理・認証(JavaScript & Monaca): ログイン

1. カレントユーザーの取得

アプリが起動したらカレントユーザー(現在ログイン中のユーザー情報)を取得します。

var currentUser = ncmb.User.getCurrentUser();

mobile backend の会員管理・認証機能を用いてアプリにログインすると、ローカル(端末内)にセッショントークンを保持したカレントユーザーインスタンスが保存される仕組みになっています。一度もログインをしたことがなかったり、ログアウトをしていたり、ローカルデータが削除されていたりする場合は、カレントユーザーを取得しても「null」が返却されます。したがって、カレントユーザーの取得有無に応じて次のように処理を行います。

  • ★カレントユーザー:あり
    • 自動ログイン処理を実施
  • カレントユーザー:なし
    • 改めてユーザーによる入力で必要な情報(ID/Passwordなど)を取得しログイン処理を実施

自動ログインはカレントユーザーがローカルに残っている場合(★)に実行する処理として実装していきます。

2. カレントユーザーインスタンスからログインに必要な情報を取得して裏でログイン処理を実施

ログインに必要な情報を userName/Password とする場合、カレントユーザーインスタンスから以下のように取得します。

var userName = currentUser.get("userName");
var password = currentUser.get("password");

取得した userName/Password を用いてログイン処理を実施します。これにより、カレントユーザーインスタンスに持っていたセッショントークンは破棄され、新しいセッショントークンが付与されます。つまり、今回のログイン処理によってセッションの有効期限が延長されたことになります。

ここで1つ抱くのは以下の疑問だと思います。

なぜカレントユーザーインスタンスでのログイン処理ではいけないのか?

JavaScript SDK ではセッショントークンを持ったユーザーインスタンスでログイン処理を行った場合、有効無効にかかわらずサーバーと通信をせずに認証成功と判断する仕組みになっています。そのため、この方法でもログイン認証は通りますが、セッショントークンを更新することはできません。したがい、セッショントークンがもし無効だった場合は、見た目は認証が通ったように見えますが、ログイン後に mobile backend との通信処理を行った際にヘッダーエラーを起こします。

そこで面倒ですが、ユーザーインスタンスログインではなくユーザーインスタンスから取り出した userName/Password で改めてログイン処理を実行することで新しいセッショントークンを取得し、有効期限をリセットすることが必要になるわけです。

おわりに

自動ログイン処理と言っても、実装はこれだけです。難しくはないですが、少し愚直なやり方ですね。

ちなみに、mobile backend のユーザーセッションの有効期限は初期設定では24時間になっていますが、管理画面から変更可能です。

会員管理・認証(JavaScript & Monaca): 会員認証の方法を設定する

池田夏藻

池田 夏藻 Ikeda Natsumo

ニフクラ mobile backend 企画担当。ニフクラ mBaaS をもっと便利で使いやすく親しみのあるサービスにしたい!が目標。mobile backend 参考書「Monaca と ニフクラ mobile backend で学ぶはじめてのプログラミング ~クラウド連携アプリ開発編~」の著者。好きな食べものは、ひき肉を皮で包んでいる系(小籠包、餃子、肉まん、ピーマンの肉詰め)です。