By basic, I see you mean illogical, and insecure. Relax, I'm just giving you a hard time. You should encrypt your passwords (maybe SHA2) and store them in a database. I'm guessing you want to use MySQL.
Step #1
Create two databases. One for your encryption keys and one for your usernames and passwords. You should be able to do that through some kind of control panel (cPanel).
Step #2
Create a secure restricted folder (Permission 100) and put https.php and connect.php files (both Permission 400) in the restricted folder.
<?php /* restricted/https.php */
if(!isset($_SERVER['HTTPS'])){
header("LOCATION:https://{$_SERVER['SERVER_NAME']}{$_SERVER['PHP_SELF']}"); die;
}
?>
and
<?php /* restricted/connect.php */
$kb = new mysqli('keyHost', 'keyDatabaseUsername', 'keyDatabasePassword', 'keyDatabaseName');
$db = new mysqli('userHost', 'userDatabaseUsername', 'userDatebasePassword', 'userDatabaseName');
?>
Of course, you will want to use the correct 'host', 'username', 'password', 'database' names.
Step #3
Create two tables. One for your encryption keys and one for your passwords. At this point I would use PHP to create the MySQL. Let's call this file pass_create.php (Permission 400). Put it in the restricted folder too.
<?php /* restricted/pass_create.php */
require_once 'https.php'; require_once 'connect.php';
if(!$kb || $!db)die('connection failure');
$kb->query('CREATE TABLE passkeys(
user TINYTEXT NOT NULL,
pass TINYTEXT NOT NULL
)ENGINE=InnoDB');
$keyStatement = $kb->prepare('INSERT passkeys VALUES (?, ?)');
$keyStatement->bind_param('ss', 'iYa9Ab%5@3m', 'w*Fu4m^Ga92'); $keyStamement->execute();
$db->query('CREATE TABLE passes(
id BIGINT UNSIGNED AUTO_INCREMENT, PRIMARY KEY(id),
user TINYBLOB NOT NULL,
pass TINYBLOB NOT NULL
)ENGINE=InnoDB');
// normally you would do the new password inserts dynamically with AJAX - just an example
$keyResult = $kb->query('SELECT user, pass FROM passkeys');
$keyObj = $keyResult->fetch_object(); $userKey = $keyObj->user; $passKey = $keyObj->pass;
$keyResult->free();
$createPassStatement = $db->prepare('INSERT passes (user, pass) VALUES(DES_ENCRYPT(?, ?), DES_ENCRYPT(SHA2(?), ?))');
$createPassStatement->bind_param('ssss', 'usernameHere', $userKey, 'passwordHere', $passKey);
$createPassStatement->execute(); $kb->close(); $db->close();
?>
Create and execute a temp.php page with <? require_once 'restricted/https.php'; require_once 'restricted/pass_create.php'; ?> on it in htdocs. Run temp.php file in your Browser, then delete it. Change $keyStatement->bind_param('ss', 'iYa9Ab%5@3m', 'w*Fu4m^Ga92') on restricted/pass_create.php to $keyStatement->bind_param('ss', '', ''). Type die('hacker'); directly after <?php on restricted/pass_create.php and resave it, or just get rid of that page altogether.
Step #4
Create a js folder (Permission 100) to hold your JavaScript files and a small library that makes it easy to send data to the Server (see below). We'll call the file external.js (Permission 444). Put external.js in your js folder.
//<![CDATA[
/* js/external.js */
var get, post, doc, html, bod, nav, mobile, M, I, S, Q, aC, rC, special, unspecial; // for use on other loads
addEventListener('load', function(){
get = function(url, success, context){
var x = new XMLHttpRequest;
var c = context || this;
x.open('GET', url);
x.onload = function(){
if(success)success.call(c, JSON.parse(x.responseText));
}
x.send();
}
post = function(url, send, success, context){
var x = new XMLHttpRequest;
var c = context || this;
x.open('POST', url);
x.onload = function(){
if(success)success.call(c, JSON.parse(x.responseText));
}
if(typeof send === 'object' && send && !(send instanceof Array)){
if(typeof FormData !== 'undefined' && send instanceof FormData){
x.send(send);
}
else{
var s, r = [];
for(var p in send){
s = send[p];
if(typeof s === 'object')s = JSON.stringify(s);
r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
}
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&'));
}
}
else{
throw new Error('send argument must be an Object');
}
return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
aC = function(element, className, yFunc){
var s = element.className.split(/\s+/), n = s.indexOf(className);
if(n === -1){
s.push(className); element.className = s.join(' ').trim();
if(yFunc)yFunc(element);
}
return function(className, yFunc){
return aC(element, className, yFunc);
}
}
rC = function(element, className, yFunc){
var s = element.className.split(/\s+/), n = s.indexOf(className);
if(n !== -1){
s.splice(n, 1); element.className = s.join(' ').trim();
if(yFunc)yFunc(element);
}
return function(className, yFunc){
return rC(element, className, yFunc);
}
}
special = function(str){
return str.replace(/&/g, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
}); // end load
//]]>
Step #5
Create a css and login folder (both Permission 100). Put a file called external.css (Permission 444) in your css folder. Put an html page called index.php (Permission 444) in your login folder. See the code below:
/* css/external.css */
*{
box-sizing:border-box;
}
html,body{
padding:0; margin:0; width:100%; height:100%;
}
#logon{
background:#ccc; padding:5px 7px;
}
label{
display:inline-block; font-size:24px; width:100%;
}
input{
width:100%; font-size:24px; padding:3px 5px; margin-bottom:7px; border:1px solid #d00;
}
.yes{
border-color:#0a0;
}
#login{
background:linear-gradient(#0a0, #070); color:#fff; border-radius:5px; margin-top:7px;
padding:5px 0;
}
.error{
color:#a00; text-align:center; padding-bottom:5px;
}
.hide{
display:none;
}
<?php /* login/index.php */ require_once '../restricted/https.php'; ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='../js/external.js'></script>
<script src='../js/login.js'></script>
</head>
<body>
<div class='main'>
<div id='logon'>
<label for='user'>Username</label>
<input id='user' type='text' maxlength='64' />
<label for='pass'>Password</label>
<input id='pass' type='password' maxlength='64' />
<input id='login' type='button' value='LOGIN' />
<div id='login_error' class='error'>Username and Password Required</div>
</div>
</div>
</body>
</html>
Step #6
Create a file called login.js (Permission 444) in the same js folder you already created.
//<![CDATA[
/* ..js/login.js - up a level because we're in the login folder - requires ..js/external.js */
addEventListener('load', function(){
var user = I('user'), pass = I('pass'), login = I('login'), error = I('login_error');
function emptyTests(){
var uv = user.value, pv = pass.value;
if(uv.value === ''){
if(pv.value === ''){
rC(pv, 'yes'); error.innerHTML = 'Username & Password Required';
}
else{
aC(pv, 'yes'); error.innerHTML = 'Username Required';
}
rC(uv, 'yes'); rC(login, 'yes'); rC(error, 'hide'); // remove error and hide classes
}
else if(pv.value === ''){
aC(uv, 'yes'); rC(pv, 'yes'); rC(login, 'yes'); error.innerHTML = 'Password Required';
rC(error, 'hide');
}
else{
aC(uv, 'yes'); aC(pv, 'yes'); aC(login, 'yes'); aC(error, 'hide'); // no require error - hide error class
return true;
}
return false;
}
function logTest(){
if(emptyTests()){
var fd = new FormData;
fd.append('pepper', 'lim7it8!#WTF'); fd.append(user, user.value);
fd.append(pass, pass.value);
post('login.php', fd, function(r){
var o = JSON.parse(r);
if(o && o.good){
location = 'login_success.php';
}
else{
// don't give username password details
error.innerHTML = 'Login Error'; rC(user, 'yes'); rC(pass, 'yes');
rC(login, 'yes'); rC(error, 'hide');
});
}
}
user.onkeyup = pass.onkeyup = function(e){
if(e.key === 'Enter'){
logTest();
}
else{
emptyTests();
}
}
login.onclick = logTest;
}); // end load
//]]>
Step #7
Create a index.php file (Permission 444) and put it in the login folder you already created:
<?php
session_start(); // send before headers
require_once '../restricted/https.php'; $o = new StdClass; $o->good = false;
if(isset($_POST['pepper'], $_POST['user'], $_POST['pass']) && $_POST['pepper'] === 'lim7it8!#WTF' && strlen($_POST['user']) < 65 && strlen($_POST['pass']) < 65){ // limit and test for submission
require_once '../restricted/connect.php';
$user = $_POST['user']; $pass = $_POST['user']; $o = new StdClass;
$keyRes = $kb->query('SELECT user, pass FROM passkeys'); $keyObj = $keyRes->fetch_object();
$userKey = $keyObj->user; $passKey = $keyObj->pass; $keyRes->free(); $kb->close();
$logStmt = $db->prepare("SELECT 'good' FROM passes WHERE user=DES_ENCRYPT(?, ?) && pass=DES_ENCRYPT(SHA2(?), ?)");
$logStmt->bind_param('ssss', $user, $userKey, $pass, $passKey); $logStmt->execute();
$logStmt->bind_result($yes);
if($logStmt->fetch() && $yes === 'good'){
$o->good = true; $_SESSION['login'] = 'can!B4Hard2?';
}
$logStmt->free(); $db->close();
echo json_encode($o);
}
else{
echo json_encode($o);
die('hacker');
}
Step #8
Create your login_success.php (Permission 444) in your htdocs folder:
<?php /* login_success.php - you should really call this what you want - just make sure the location in the JavaScript AJAX is the same */
session_start(); // before headers
require_once 'restricted/https.php';
if(!isset($_SESSION['login']) || $_SESSION['login'] !== 'can!B4Hard2?')die('hacker');
?>
<!-- now create your other html page -->
Now you can tell your users to login at yourdomain/login!!! Make sure you are serving over https. And... yes, I know some of those steps are really multiple steps. They're really just references for you to ask questions about.
