【Web】Adaloでログイン必須のページをセキュアにするには

はじめに

はじめまして。人材系の会社でエンジニアをしているurmotです。普段はバリバリコードを書いています。note初投稿です。

最近、Adaloを使って会員制のWebサービスを作ったのですが、Webサービスとして当たり前の部分が意外にデフォルトで対応されておらず、ハマりどころが多かったので、対処法をまとめてみました。

Adaloのログイン機能の問題点

Adaloには、デフォルトでログイン機能が用意されており、簡単にログインが必要な会員制サービスを作ることができます。

しかし、このログイン機能をそのままWebで使ってしまうと、ログイン後のページのURLを直接指定してアクセスされた場合に、未ログイン状態でもページが見れてしまうという問題点が存在します。

これは、ネイティブアプリの場合では対して問題にはならないのですが、Webアプリの場合だとURLの直リンクというアクセス方法があるため、対策が必要です。

やりかた

やり方を最初に解説しておきます。簡単に説明すると、AdaloのスクリーンActionを使います。

Adaloのスクリーンには、そのスクリーンが表示されたタイミングで実行される「Actions」という設定項目が存在します。

このスクリーンのAction機能を使って、ページが表示されたタイミングでログイン状態かをチェックして、未ログイン状態の場合は、ログインページに戻すように設定してあげます。

実はこれだけだと問題が発生するので、以降でどのような問題が発生するのかと、詳しい設定方法を解説していこうと思います。

ログイン必須のページを保護する

ここからは、サンプルアプリケーションを使ってStep by Stepで解説します。

1. サンプルアプリの作成

まず、テスト用にCoachingのテンプレートからDesktop Web Appを作成します。

2. 未ログインでログイン後のページが見れるか確認

最初に、未ログイン状態でログイン後のページが本当に見れてしまうのかを確認してみます。
まずは、ログインできるユーザーを作成しましょう。
Coachingのテンプレートでは、最初から5ユーザー追加されています。
この5ユーザーの中からログインできるユーザーを作成します。

サイドメニューの「Database Collections」から「Users」Collectionの「5 Records」
となっているボタンをクリックします。
すると、以下のような画面が出てくるので、一番下の「John Doe」さんのレコードをクリックしてください。

すると、以下の画面が出てくるので、適当なパスワードを設定します。

次に、「Preview」ボタンを押します。
すると、「Welcome」ページに飛ばされるので、「LOG IN」をクリックします。

で、先程の「Jone Doe」さんのメールアドレスとパスワードを入力してログインします。

無事ログインできると、以下のような画面が表示されます。
この画面はログインしないと表示されないページです。

次に、このページのURLをコピーして、プライベートブラウザを立ち上げます。
(Macの人は⌘+Shift+nで起動できます)
プライベートブラウザに先程のURLを貼り付けて見てください。
すると、ログイン後のページが見れてしまいます。

もちろん、ログインしていないのでユーザーに紐づく上は出ていません。
しかし、「RESORUCES」のタブをクリックすると、どのようなコースがあるかなどは見れてしまいます。

正直、Coachingアプリの場合であれば大した問題にはならなそうですが、ログインしているユーザーしか見れないコンテンツを提供しているようなアプリでは大問題です。

3. ログインページを保護する

ここからは、ログインページを保護する方法について解説していきます。
確認で使うので、先程のプライベートブラウザは閉じずにおいてください。

AdaloのEdit画面に戻り、ホームスクリーンである「Home - Assignments」を選択します。

次に、サイドバーのActionsから「ADD ACTION」ボタンを押して、「Links > Client Log In」を選択します。

すると、Actionが追加されますので、「SHOW ADVANCED」ボタンをクリックして、条件を追加します。
条件は、「Logged In User」「Is equal to」「Empty」です。

これで、「ログインしているユーザーが空だった場合」つまり、ログイン状態に無い場合に、「Back」のアクションが実行されるようになりました。

4. 未ログインでログイン後のページが見れなくなったか確認

先程の、プライベートブラウザのページを更新してみてください。
ログインページに戻されたと思います。

これで、未ログイン状態のときにログイン後のページを見れないようにすることができました。

とはいえ、ページを更新した際にログイン後のページが一瞬見えてしまっています。
これも、防ぎましょう。
(確認で使うので、先程のプライベートブラウザは閉じずにおいてください。)

5. 一瞬ログイン後のページが見えるのを防ぐ

AdaloのEdit画面に戻り、ホームスクリーンである「Home - Assignments」を選択します。
スクリーン内のコンポーネントをすべて選択し、グループ化(「MAKE GROUP」をクリック)します。

グループ名の横のドットメニューをクリックし、「Change Visibility」を選択します。

Visibilityを「Sometimes Visible」に変更し、Will be visible if...を「Logged In User > Email」「Is not equal to」「Empty」に設定します。

これで、「ログインユーザーが空じゃなかった場合」つまり、ログイン状態の場合に、コンポーネントが表示されるようになりました。

5. ログイン後のページが見えなくなったか確認

先程の、プライベートブラウザのページを更新してみてください。
ログイン後のページが見えなくなっていると思いきや、ヘッダーだけ何故か残ってしまっています。

どうやらFixedが設定されているコンポーネントはVisibilityを設定しても無視されるようです。
こういうところがノーコードサービスの辛いところです。
(Fixedの設定を「None」にすれば表示されなくなります)

6. おまけ

未ログイン状態のときにログインページに戻る際、アニメーションがあるのも微妙です。
無駄なアニメーションをなくすためには、ホームスクリーンである「Home - Assignments」のActionのTransitionを「None」に設定しましょう。

すると、何もなかったかのようにログインページが表示されます。

まとめ

AdaloのDesktop Web Appでログイン必須のページをセキュアにする方法について説明しました。正直、この方法はログインが必須のページすべてに設定する必要があるのでかなり面倒です。

また、Fixedが設定されてる場合にVisibilityが効かないなど、思ったような動きをしてくれない場面にも結構遭遇しました。

なので、全体的な所管としては、AdaloでWebサービスを作るのはまだちょっと早いかなぁという印象を受けました。

(逆に、ネイティブアプリを作るにはかなり良い体験ができるんじゃないかと思います。)

とはいえ、まだまだ発展途上だと思いますし、現時点でもDBもサーバーも用意せずに会員制のWebサービスを作れてしまうのは楽で良いと感じました。

最後に、Adaloでバリデーションをつけるやり方や、パスワードリセットのメールを無料で日本語化する方法など、悩んだ部分がもう少しあるので、また記事にしていこうと思います。