Q:

Enabling secondary user accounts in a web software

I got specs that need a little work before I can be sure it can be implemented. I'd appreciate to hear comments and suggestions on the following scenario:
I need a web software where users log in. All users have a user account AND can have 0-3 secondary user accounts, which they can use via the main website while authenticated. The secondary user accounts are controlled by a third-party javascript library, but I can control the usernames and passwords that are stored in a database.
Goal is to enable users to not have to authenticate several times, only using one user account and the ohter ones should work automatically via script.
So, is there a viable, secure and proper way to accomplish this? I know playing with user names and passwords in script is a security issue in itself but hopefully I can find the next best thing if this can't be done properly. I will use Asp.Net MVC as a platform, with all calls made using ajax, so the software will look and feel like a single page application. The underlying technology is irrelevant though, any server side technology can be used here.
There are some options to play with: 

Basically I can use any user name and password for authentication, it's just a matter of which fields in which tables to compare
I can force all of the user accounts' passwords to be the same so user doesn't have to remember/use many passwords
I can retrieve the secondary user names from db in the login call so the website will have access to secondary user names, but obviously I can't do that to passwords as they are hashed/salted in the db

Here's one thought I've been toying around with:
First show a login page. Authentication is done via ajax and credentials are saved on the login form, which gets hidden when user logs in. In the success callback event of the login call we can show the main content that the ajax call can return (this could be something like the main page of the authenticated users. Since the original credential fields are still on the page they can be accessed via script and used for the secondary system credentials.
However, I'm not convinced this is a secure way to handle the secondary system logins, even though I could have https throughout the site. I just don't know what the actual security issue here would be. Comments, experts? Better ways to accomplish the same?
The login page and main structure could look like this (a VERY simple example):
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="/Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        function VerifyUser(name, pass, remember, container) {
            $.ajax({
                type: 'POST',
                contentType: 'application/json; charset=UTF-8',
                url: 'Account/VerifyUser',
                data: JSON.stringify({ "userid": name, "password": pass }),
                processData: false,
                success: function (response) {
                    if (response.Success) {
                        // Here I could stash the password somewhere if needed. 
                        // It's not visible in the source code but it is accessible via jquery
                        $('#secondarypass').val(pass);

                        // Here I can show the html data that the ajax call could return, or
                        // send out another ajax call to retrieve the actual content separately.

                        //Show here data that was returned by ajax call in response object. This could be a main page etc
                        $("#maincontainer").show();
                        $("#maincontainer").html(response.Message); 
                        $("#logincontainer").hide();
                    }
                },
                error: function (a, b, c) {
                    $("#maincontainer").show();
                    $("#maincontainer").html(a.responseText);
                }
            });
            return false;
        }
    </script>
</head>
<body>
    <div class="page">
        <input id="secondarypass" type="password" />

        <div id="logincontainer">
            <input id="UserName" name="UserName" type="text" value="" />
            <input id="Password" name="Password" type="password" />
            <button onclick="javascript:VerifyUser($('#UserName').val(), $('#Password').val());">Log In</button>
        </div>
        <div id="message"></div>
        <div id="maincontainer">
            <!-- this is where the main content of the software would be -->
        </div>
    </div>
</body>
</html>

And the ajax call could return something like this
<script type="text/javascript" src="/Scripts/secondarysystem.js"></script>
<script type="text/javascript">
    function SecondaryLogin() {
        var data = {
            'username': 'mysecondaryusername',
            'pass': $("#secondarypass").val()   //NOTE here I could access the password-stash I set up earlier
        };

        var system = new SecondarySystem(); //This could be an object from the secondarysystem.js library
        system.LogIn(data);
        // this could have a onsuccessfullogin callback event, where we could populate some secondary system specific data to the div below
    }
</script>

<div id="secondarycontainer">
</div>

In this setup a page refresh would cause problems, but I can disable f5 (or replace it with reloading the right content) and at least add a dialog saying "refresh will force you to re-login, sure to leave this page?" etc.

A:

The thought you 've been toying around , sounds good, and it has been practiced by many of us. there are  few problems you mentioned you dont want to face, here are some points you can keep in mind if you really gonna make it  a single page application.

1.Refresh F5

If  refresh is your problem you can probably use localstorage so your username and password are not lost when page refresh.

Is it secure ?

I think you can store your password variables encrypted so you only decrypt it when you need to authenticate the user. For encryption you can refer to https://sourceforge.net/projects/pidcrypt/ (URL update).         

