sys238:blog

誰かが必要とするかもしれないから、なんでもメモしよう…

Webアプリで自動ログインする方法

MacFan(2011/09)を読んでいたら「iのコンシェルジェ」というコーナーにブックマークレットでWebアプリに自動ログインする方法が載っていた。

以前、同じ事をやろうとしてブックマークレットで実現するのを挫折した事があるのでムムッと読んでみたら…

[記事のブックマークレット]

javascript:
location.href=='http://mixi.jp/'
document.getElementsByName('email')[0].value='[ユーザID]';
document.getElementsByName('password')[0].value='[パスワード]';
document.getElementsByName('email')[0].form.submit();

この方法じゃダメ。
うまく行かないパターンがある。

ログインページを開いた状態で、このブックマークレットを実行すればうまくログインできるけど、他のページやブランクページで実行した場合はログインできない。

原因は実際の実行順が「ユーザID&パスワードをセット → ログイン実行 → ログインページを開く」になってしまうからだ。「ユーザID&パスワードをセット」の段階では対象ページがまだ無いから値をセットできなくてエラーになってしまう。

JavaScriptは各ステップの実行結果(終了)を待ってから次のステップに進むんじゃなく、時間のかかる処理は待たずに次のステップに進むのを考慮してないのがこのブックマークレットの敗因。

ちなみに、ページが開くまでsetTimeout()なんかを使って「ユーザID&パスワードをセット → ログイン実行」の処理を待たせてもダメ。今度はページ遷移した段階でsetTimeout()で待たせている後続処理がクリアされてしまう。なのでMacFanの例は二重にダメって事になります。

で、結局どうやって自動ログインを実現したかというと。

一連の自動ログイン処理をhtmlファイルに記述し、そのファイルに対してブックマークを設定して実現しました。

ただ、このhtmlファイルで実現する方法ですが、2つの大きな制限があります。

まず一つ目が、ポップアップウィンドウをブロックしている場合は動作しません。

二つ目はhtmlファイルはローカルに置く必要があります。webサーバ上に置いても動作しません。(正確にはドメイン名が異なる場合は動作しない)

両方ともJavaScriptのセキュリティ上の制限です。

この制限が問題になる方は以下の方法は使用できません。
あしからず。

以下、さくらのレンタルサーバでの記述例です。他のサーバの場合は適宜、書換えてください。

各htmlファイルは、そのままダブルクリックしてもブックマークに登録しても使用できます。

Webメール

[saku_WebMail_login.html]

<script language="JavaScript">
u='https://secure.sakura.ad.jp/rscontrol/?webmail=1';
w = window.open(u,'_blank');
setInterval("login()", 500);

function login(){
  if (w.document.location.href==u){
    w.document.getElementsByName('domain')[0].value = '[メールアドレス]';
    w.document.getElementsByName('password')[0].value = '[パスワード]';
    w.document.forms[0].elements[4].click();
    w.focus();
    close();
  }
}
</script>

サーバコントロールパネル

[saku_ControlPanel_login.html]

<script language="JavaScript">
u='https://secure.sakura.ad.jp/rscontrol/';
w = window.open(u,'_blank');
setInterval("login()", 500);

function login(){
  if (w.document.location.href==u){
    w.document.getElementsByName('domain')[0].value = '[ドメイン]';
    w.document.getElementsByName('password')[0].value = '[パスワード]';
    w.document.getElementsByName('domain')[0].form.submit();
    w.focus();
    close();
  }
}
</script>

phpMyAdmin

[saku_phpMyAdmin_login.html]

<script language="JavaScript">
u='https://secure.sakura.ad.jp/phpmyadmin2/?server=[DBサーバのURL]';
w = window.open(u,'_blank');
setInterval("login()", 500);

function login(){
  if (w.document.location.href==u){
    w.document.getElementsByName('pma_username')[0].value = '[DBユーザ名]';
    w.document.getElementsByName('pma_password')[0].value = '[パスワード]';
    w.document.getElementsByName('pma_username')[0].form.submit();
    w.focus();
    close();
  }
}
</script>

上記、いずれのhtmlファイルでも読まれてしまうとIDやパスワードがダダ漏れなので注意してください。

パスワードまで書いてしまうのに抵抗のある方は以下のように修正するとパスワード入力[return] でログインできて便利です。

[この行を]
    w.document.getElementsByName('**password**')[0].value = '[パスワード]';
    w.document.getElementsByName('** userid **')[0].form.submit();
[こうする]
    w.document.getElementsByName('**password**')[0].focus();

Comments are closed.