Webデスクトップの制作 #29 ログイン機能

認証機能をつけると、Webシステムとして柔軟性が増します。 管理者のみが行える機能やアプリ、特定ユーザーのみの設定画面や操作などなど・・・ あと、利用者の操作ログや個別情報なども把握しやすくなり、ちゃんとロギングをしていれば、操作不具合などの問い合わせで原因特定の作業が効率化します。 というわけで、今回はログイン機能&ログアウト機能をヘッダメニュー部分に装着してみたいと思います。

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回の最終Commitは"#29"です。

解説

通常のシステムの場合、ログイン機能は、ユーザーマスターというデータテーブルを持って、その中のユーザー判別IDと認証パスワードなどを判別して認証処理を行います。 今回はWebデスクトップで且つ、静的HTMLのみで利用したかったので、独自にユーザーデータなどは保持せず、Googleログイン限定で対応することにしました。 他にも、Faebook、X(旧Twitter)、github、Linkedin、Line...などなど、OAuth認証を構えているWebサービスは大量にありますが、複数持てばいいかと言うとそうではなく、 知り合いの会社のWebサービスで、10個ぐらいのログインボタンを設けている画面をみて、 登録ユーザーが「どのアカウントでログインしたか忘れた。」という問い合わせが少なくない、という話を聞いて、 デファクトスタンダードである、Gmailログインのみで十分だと判断しました。 どうしてもGoogleアカウントを使いたくないという人はこれまで一人も聞いたことがないし、gmailアカウントを持っていない人というのは、比較的少ないと勝手に判断しました。

GoogleのOAuth認証

以前ブログでGoogleのOAuth認証のやり方を書いたので、こちらも合わせて読んでみてください。 参考記事 : [OAuth] Google+でログイン 簡単に言うと、GoogleCloud管理パネルで、APIの認証情報を作成するだけなんですが、 画面遷移も多くて面倒くさくて分かりにくいかもしれません。 ここは頑張ってクリアするとあとは楽です。

ローカル作業

Googleの認証についても、静的HTMLでやる方法は以下のページで解説しています。（先日書いたブログです） 参考記事 : [OAuth] Google+でログイン こちらは、JavascriptでGoogleのボタン表示をするまでの工程と簡単なソースコードが説明されています。

注意点

実は今回のコードはgithubのコードをそのままcloneしたものでは、ローカルでうまく動きません。（正常な認証ボタンが表示されません） これは、GoogleCloudの設定で、APIを実行させるサイトのドメインを登録する必要があり、ご自身のGoogleCloud認証コードを以下のファイルに登録していただく必要があります。 asset/setting.json "google_auth" : { "client_id" : "GoogleCloudのIDを登録", "module_src" : "https://accounts.google.com/gsi/client" } おなじみのsetting.jsonですね。 できる限りこのファイルで設定を行うという仕様は悪くなかったですね。（自画自賛） githubに上がっているIDは、こちらでサンプルで立ち上げているIDなので、書き換えて使ってもらったほうがいいですね。 ちなみに、GoogleCloudの認証ルールで、192.168.1.1のようなIPアドレスは登録できないようになっていて、必ず example.com のようにドメイン記述で登録しなければいけないようです。 でも、localhostは、登録可能なので、これでローカル開発確認できるような救済ルールもありますよ。

設定完了

正常に表示されたログインボタンは以下のように見えます。（他サイトでgmailログインしている場合の表示） これが、API認証が正常に行われない（または、どこでもgoogle認証したことがない場合）は、次のように表示されます。 JSコンソール画面でも403エラーが出ているので、正常に認証するようにしないと、 クリックしても認証エラー画面になってしまいます。

あとがき

とりあえず、細かな処理は後回しにして、ログイン、ログアウトの機能設置ができました。 これは、Webデスクトップのサイト管理運営者の為の機能だけじゃなく、何かしらのサブスクを搭載したければ、利用ユーザーの為のログインにも使うことができます。 もちろん、裏でデータベースをちゃんと立ち上げて、利用者ユーザーの管理をしっかりと行う必要もありますが、入口としてのログインは、OAuth認証で問題ないでしょう。 取得情報は、Googleアカウントに登録されている、メールアドレスや名前などは取得できるので、それをログイン時にデータベース登録するようなAPIにつなげるといいでしょう。