OpenIDでアカウントを一元管理

多くのインターネットサービスでは、そのサービスをユーザーに提供する代わりに、ユーザーへログインを要求します。


サービス提供者側から見た「ログイン」の意味は、サービスを享受しようとするユーザーを特定(認証)し、そのユーザーに対し適切なコンテンツやサービスを提供する(認可)するためのものです。


一方、サービス享受者側からしてみると、さまざまなインターネットサービス毎にIDとパスワードを管理しなければならず、パスワード忘れ等のトラブルに見舞われてしまいます。忘れるのがいやなので、もしかすると同じIDやパスワードを使い回してはいませんか?


OpenIDとは、そのようなログインにひつようなアカウント情報を一元管理するためのサービスです。OpenIDに対応しているサイトでは、そのアカウント一つでアクセスすることが可能です。


OpenIDについて詳細な情報は、下記のリンクに掲載されています。
仕様から学ぶOpenIDのキホン


今回は実際にOpenIDの発行から、OpenID対応サービスへのログインまでを行ってみます。


OpenIDの取得

OpenIDの発行は、特定のベンダに依存ていません。
日本でも複数のサービスがOpenIDを発行しています。
今回は、Openid.ne.jpから取得してみました。


まず、http://www.openid.ne.jp/にアクセスします。TOPページの「OpenIDアカウント作成」リンクをクリックし、登録フォームに遷移します。

openid.png

OpenIDは、URL形式でユーザーを識別します。
画像のようにユーザーIDにsynapzと入力すると、そのOpenIDはhttp://synapz.openid.ne.jp となります。

form.png

その他必要情報を入力し、利用規約に同意後、「アカウント登録完了」ボタンをクリックします。その後、登録したメールアドレスに確認メールが送付されるので、本文中のリンクをクリックし、登録完了となります。



ログインしてみる

一旦openid.ne.jpのTOPに戻り、先ほど発行されたOpenIDでログインしてみましょう。

login.png
個人認証ページに遷移しました。このページが僕のアイデンティティというわけです。

auth.jpg


対応サービスを利用

さて、いよいよOpenIDに対応したサービスを利用してみます。今回はアバウトミーにしてみました。

アバウトミーのTOPページ右側に、「OpenIDでログイン」があるので、http://xxxx.openid.ne.jp と入力し、ログインします。
aboutme1.png

次に、OpenID側にリダイレクトされ、アバウトミー側から認証要求があった旨が表示されます。認証を通す場合は「認証拒否」以外のボタンを押します。
auth.png

再びアバウトミー側のページに遷移し、ログイン完了です。この後は他のIDでログインした場合のフローと同じです。


まとめ

アメリカではすでに1200以上のOpenID対応サービスがあり、ユーザー数では7500万人になるとのことです(スゴイ!)。日本でも今回ご紹介したアバウトミーやはてなスターなど、続々と対応サービスが増えています。

また、OpenIDを発行/認証するサービスもOpenid.ne.jpのほか、livedoor Authでも行われています。

この技術が普及することで、少しでもログインの手間が省けるといいですね。

サーバサイドJavascript -Jaxer-

僕は日々のWeb開発業務にAptanaというIDE(統合開発環境)を利用しています。
Eclipse PDTや PHPEclipseも利用していましたが、やはりAjaxなどのWeb寄りな開発においては、Aptanaの右に出るものは無いように思われます。

また、Aptanaは、AjaxやRuby(on Rails)、PHPなどの開発言語に対応し、HTMLの編集もDreamweaverとまではいきませんが効率よく編集できます。

そんなAptanaに、「Jaxer」なる機能が追加されました。

jaxer.pngのサムネール画像

Jaxerとは何か
一言でいうと、Javascriptをサーバー側で実行できるようにするための、Apache2.x用プラグインのようです。今までのJavascriptは、クライアント(ブラウザ)側でJavascriptプログラムを解釈し実行していましたが、このJaxerサーバを利用することにより、それをサーバ側で実行させることができます。
いままでクライアント/サーバ側で別々の言語で記述していたものが、Javascript一つに集約されるのです。



何がうれしいのか
1.Ajaxが分かれば、サーバサイド言語(PHP, Javaなど)のスキルが不要

サーバサイドでJavascriptを動作させたいときは、以下のようなコードを記述します。
<script runat=”server”> 〜ここにJavascriptロジックを記述〜 </script>


2. サーバサイドでDOM操作が可能

JaxerのDOMの解釈には、Firefox3のエンジンが用いられているとのこと。


3. クライアント側からサーバサイドのJavascript関数を呼び出せる

クライアント側にあるfunctionはあくまでも代理(proxy)で、実体はサーバサイドにあるfunctionを呼び出すことができ、これまで行ってきたXmlHttpRequestやJSONなどは意識しなくともよい(すべてJaxerがおこなってくれる?)。


4. ファイル入出力、DBアクセス、メール送信などライブラリがそろっている

SQLite, MySQLへのDBアクセス、Webサービスへのリクエストなど、一通りのことは行えるようです。



懸念点
axer側で一旦DOMツリーを構築し、JavascriptによるDOM操作を行い、その結果をシリアライズするという行程を行う必要があるため、サーバ負荷増大が懸念されます。

以下の画像は、aptana.comより引用:
JaxerProcess_normal_large.png


最後に
これまでJavascriptとサーバサイド実装者は分業化されているイメージでしたが、Ajaxの流行とともにJavascripterの存在の重要性は益々大きくなっており、ついにサーバサイドにまで影響を及ぼしました。
僕はあまりJavascriptは得意ではないのですが、これをきっかけに再勉強したいと思います。
僕たちエンジニアにとって、また一つ実装手段が増えましたね!(良いのか悪いのか。。)

手軽にfavicon生成 -Favicon Editor-

ラウザのアドレスバー左に表示されるfavicon.icoを簡単に作成することができるサービスを紹介します。
DeGrave.comFavicon Editorです。


favicon_editor.png

このサービスは、faviconにしたいロゴ画像をアップロードすることで、自動で作成してくれます。もちろんすべて手動で色を生成することも可能です。早速弊社のロゴを用いて作成してみました。


1. 画像を準備
弊社のロゴ画像から、favicon.icoにしたい部分を抜き出し、別ファイルとして保存します。
sz_logo.png

2. 保存したファイルを、Favicon Editorにアップロードします。


3.取り込む範囲をマウスでドラッグし、決定します。
favicon_area_select.png


4. 背景を透過させたい場合は、グレーと白のチェックになっているピクセルで塗りつぶします。
favi_edit.png

5. Make Favicon! ボタンをクリックすると、faviconが表示されるので、それをローカルマシンに保存します。


6. WebサイトのドキュメントルートにFTPします。


7. HTMLに下記の通り記述します。

<head>
<link rel="shortcut icon" href="/favicon.ico">
...
</head>


以上で完了です。一度背景を透過させたバージョンを作成してみましたが、Firefoxのブックマークツールバーに表示しているときにマウスオーバーさせるとシャギーが目立ってしまったので、背景を白で塗りつぶしました。


256色で生成されるので、なかなかきれいにできました。
sz_favicon.png

faviconがあるのと無いのでは、ほんの少しですが印象がよくなりますね!

Page 7 of 8« First...45678