水津です。

Bluemixで検証用アプリとか作った際、カンタンな認証くらいは欲しいと思ったことはありませんか？今回は、BluemixのNodeJSにて標準フレームワークとして使われているexpress4を用いたアプリケーションにてBasic認証を追加する方法をご紹介します。

NodeJS express4アプリにBasic認証をつける

作業の前に、、、

今回はIBM developerWorksに公開されてますMemoアプリを元としています。手元にNodeJS express4のアプリがない方は、以下記事を参考に準備ください。
Bluemix 上で稼動する Web アプリケーション開発方法 – Node.js 編：
http://www.ibm.com/developerworks/jp/cloud/library/j_cl-bluemix-nodejs-app/

上記の「3.アプリケーションの拡張」直前までが終わっていると、以下のようなファイルが出来上がっていると思います。今回の説明はこれを元に進めて参ります。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-31-31

とりあえずBasic認証を使えるようにする

package.jsonの編集

express4ではいくつかの機能が外部module化しました。今回のBasic認証もその一つとなります。ですので、まずはModuleを持ってこなければなりません。必要なModuleは「basic-auth-connect」となります。サクッとpackage.jsonのdependenciesに追記しちゃいましょう。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-29-34

app.jsの編集

package.jsonに追記しただけじゃ使えません。サーバ機能を提供しているapp.jsのコードを編集し、Basic認証がつかえるようにしましょう。編集はカンタンです。たった２行追記するだけ！！以下の10, 15行目のようにコードを追記ください。（とりあえず動かすことを目指してるので、ID/PWべた書きです。）
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-50-18

確認してみる

コードの編集が終わったら、Bluemixにアプリをデプロイして認証が有効化されてるか確認しましょう。（デプロイ方法は上に記載しているIBMの記事を参照ください。）以下のように認証画面が出てくれば成功です！！べた書きしてたID/PWを入力してログインしましょう。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-04-08

ログインに成功するとアプリのTOP画面が表示されます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-06-57

認証ユーザ情報をBluemixらしく定義する

上記でBasic認証はできたかと思いますが、ユーザ情報がコードべた書きというのは微妙、、、それに、ユーザ情報を書き換えるためだけにコードを更新するのも微妙、、、ということで、ここはBluemixらしくユーザ定義環境変数を用いてユーザ情報を定義、それを用いてBasic認証したいと思います。

ユーザ定義環境変数を定義する

ランタイムの環境変数に以下２つを定義しましょう。
– userid　：認証に用いるユーザID（testUser）
– password　：認証に用いるユーザのパスワード（testPass）

定義すると以下のようになります。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-20-32

app.jsの編集

先程べた書きに記述していたユーザ認証部分を、Bluemixユーザ定義環境変数から取得した情報で認証するように書き換えます。こちらもすごくカンタン。以下の16, 17行目を追記し、19行目の認証部分を16, 17行目で取得した値（変数）に修正します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-37-04

確認してみる

コードの編集が終わったら、Bluemixにアプリをデプロイして確認しましょう。以下のように認証画面が出てくれば成功です！！ユーザ定義環境変数に定義したIDとパスワードを使ってログインしましょう。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-04-08

ログインに成功するとアプリのTOP画面が表示されます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-18-06-57

まとめ

いかがでしたでしょうか？
Bluemixのようなクラウド環境はデモや検証のアプリを作るのに便利でついつい忘れがちですが、アプリは「Public」に公開されていますので誰でもアクセスできてしまいます。本格的な認証やアクセス制御を行わなくても本記事のようなカンタンな方法で「誰でもアクセスできる」状態を防ぐことができますので、皆様もぜひ組み込んでみてはいかがでしょうか。