Web Account Manager - CodeProject®

Download source files - 4 Kb

Sample Image - webaccount.gif

Introduction

Why we need this?
Our mind is not only for remembering a lot serials of passwords,
and for security reasons, password grows not only longer but also difficult to remember.

Background

All web login forms have something in common
1. an input box for user name
2. an input box for a password
3. a check box to indicate whether to remember the password for future access

However, something differs.
1. the field name for input values, as we know, the application running on servers get value through field name, field names are different for applications are different.
2. the address where to send our login info to.

Because html file is in text format, then how to keep my passwords safe?
I've turned out a simple idea: encode the password;
use which method: how about base64?
Someone may ask, can base64 be used to encode a password, everyone knowns how to decode them.
To increase the difficulty of cracking our password,the most simple idea: change the base64 char map.:)
Even your password is encoded, it is not safe, don't lose your Account file, store in ntfs and encrypt.

Programming

Now let's go into the program.
OOP programming is applied to this program.
We have 3 objects: FormCollection,AccountForm and Account

Object Account stores account informations,an Account belongs to a AccountForm

function Account 
(user,pass,rem,form)
{
 this.Username=user;
 this.Password=pass;
 this.RemLogin=rem;
 this.Form=form;//form holding this account
 this.Login=function(){
  if(this.Form!=null)
  {
   this.Form.GenForm();//show form
   document.getElementById("username").value=this.Username;
   document.getElementById("password").value=Base64Encode(this.Password);
   if(this.RemLogin!=null)
     document.getElementById("rempass").checked=this.RemLogin;
//   document.getElementById("LoginForm").submit();//uncomment this to auto submit
  }
 }
}<P></P>

Object AccountForm stores login form,the method GenForm put html out to html object oLoginForm

function AccountForm 
(name,oU,oP,oR,url,att)
{
 this.Name=name;
 this.UserObj=oU;
 this.PassObj=oP;
 this.RemLoginObj=oR;
 this.Action=url;
 this.Attach=att;//attached form items
 this.Accounts=new Array();
 this.GenForm=function(){
  var fm="<form id=LoginForm method=post action="+this.Action+">";
  fm+="<table border=0><tr bgcolor=gray><td colspan=2 align=center style=color:white;font-weight:bolder>"
+this.Name+"</td></tr>";
  fm+="<tr><td>Username:</td><td><input id=username type=text name="+this.UserObj+"></td></tr>";
  fm+="<tr><td>Password:</td><td><input id=password type=password name="+this.PassObj+"></td></tr>";
  if(this.RemLoginObj!=null)
   fm+="<tr bgcolor=silver><td colspan=2 align=center><input id=rempass type=checkbox name="
+this.RemLoginObj+"><label for=rempass>Remember Me</label></td></tr>";
  fm+="<tr bgcolor=gray><td colspan=2 align=center><input type=submit value=Login></td></tr></table>";
  if(this.Attach!=null)
   fm+=this.Attach;
  fm+="</form>";
  document.getElementById("oLoginForm").innerHTML=fm;
 }
 this.AddAccount=function(user,pass,rem){
  var ac=new Account(user,pass,rem,this);
  this.Accounts[user]=ac;
 }
}

Object FormCollection is a collection of login forms,it help us organize forms.the method UseAccount fill form with specified account.

function FormCollection ()
{
 this.Forms=new Array();
 this.AddForm=function(name,oU,oP,oR,url,att){
  var x=new AccountForm(name,oU,oP,oR,url,att);
  this.Forms[x.Name]=x;
  return x;
 }
 this.UseAccount=function(name){
  var x=name.split(":");//account path is analysed and loaded
  if(x.length==2)
  {
   var ac=this.Forms[x[0]].Accounts[x[1]];
   ac.Login();
  }
 }
 this.GenButtons=function(){
  for(var i in this.Forms)
  {
   var x=this.Forms[i];
   document.write("<ol>"+x.Name);
   for(var j in x.Accounts)
   {
    var y=x.Accounts[j];
    document.write("<li><input type=button onclick=myforms.UseAccount(this.value) 
value="+x.Name+":"+y.Username+"></li>");
   }
   document.write("</ol>");
  }
 }
}

Using the code

var myforms=new FormCollection();
//google loginform
var 
x=myforms.AddForm("Google","Email","Passwd","PersistentCookie","https://www.google.com/accounts/ServiceLoginAuth");
x.AddAccount("vmlinuxx@gmail.com","it is a secret",true);
//codeproject 
loginform
x=myforms.AddForm("Codeproject","Email","Password","cookie","http://www.codeproject.com/script/profile/process_logon.asp");
x.AddAccount("vmlinuxx@hotmail.com","it is also a secret",true);
//gmail 
loginform
x=myforms.AddForm("Gmail","Email","Passwd","PersistentCookie","https://www.google.com/accounts/ServiceLoginAuth","<INPUT 
type=hidden value=https://gmail.google.com/gmail name=continue><INPUT 
type=hidden value=mail name=service>");
x.AddAccount("vmlinuxx@gmail.com","it is a secret as well",true);
//mywallop 
loginform
x=myforms.AddForm("MyWallop","EmailAddress","Password","UseCookies","http://mywallop.com/Login.aspx?ReturnUrl=%2fdefault.aspx");
x.AddAccount("a@b.c","password",true);<P></P>
<P>myforms.GenButtons();//generate account buttons</P>

FAQ

how to add a new login form?
Yes,we have to known how to analyse a form
how to add a new account?
Use the AddAccount method of AccountForm object, fill in account name,encoded password and whether to remember login status.
how to get encoded password?
I provide you MyPassword.htm to encode your password,remember to change Base64Chars(switching position is suggested) in MyBase64.js before encoding

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here