I'm pretty new to HTML, like 1 week new. I am making a web store and I want to be able to login into an "admin panel" to make it easier for me to manage my products. Add new, remove, rename etc. My problem is, I have my login information stored in the html code and I use if-statements to check the validity.
When I was testing the code, I was curious and wanted to inspect element. Unsurprisingly, there was my entire login information and anybody can have access to it.
I need to somehow hide it, or hide the login fields from users except me. But I do not know how to approach that. I thought of a few solutions like have a hidden part on the store page and if I click it a certain amount of times then it will show the fields. But I think I'm complicating it.
Any ideas are greatly appreciated. Thanks. Below is my function for logging in.
function login()
{
var username = "test username";
var password = "testpassword";
if(document.getElementById("username field").value == username && document.getElementById("password field").value == password)
{
var btn = document.createElement("BUTTON");
document.body.appendChild(btn);
<!-- hide the user name field after login -->
document.getElementById("username field").hidden = true;
<!-- hide the password field after login -->
document.getElementById("password field").hidden = true;
<!-- hide the login button after login -->
document.getElementById("login btn").hidden = true;
<!-- show a message indicating login was successfull -->
window.alert("Login successfull! Welcome back admin!")
}
else
{
window.alert("Sorry, you are not authorized to view this page.");
}
}
And this is a screenshot of the inspect element. I don't want anything too crazy like a database because I'm the only user, just a way to be able to access the admin panel without exposing myself. Thanks again.
Inspect Element Screenshot
EDIT:
I am not using my own server, I am using Wix.com to make the initial website and then using the HTML widget to create a webstore. I don't think they allow people to have any communication with their servers whatsoever.
Username and password validation should never be done on the client side. It should always be done on the server. Do not use javascript for this task. Allow your user to enter their username and password in a form, and then submit the form to a server side script to validate their credentials. Doing it on the client side will never be secure.
There's no easy solution to your particular request, but before I oblige you with the details I'd like to stress three very important points.
1: Javascript is not Safe
Javascript is a client side language, which means every piece of data you'll ever be dealing with that comes from your user can be directly modified. These include, but are not limited too, any values or attributes of HTML tags, inline Javascript, loaded image files, etc. Essentially, anything that is cached on the user's computer can be modified and might not be what you're expecting to receive.
As such, a Javascript authentication system is absolutely not safe by any definition of the word. For a local page that only you can access, it would do the job, but that begs the question of why you need authentication in the first place. Even then, as a new developer you'd be widely encouraged to never try do it anyway. There's no point practising and learning how to do something in a completely insecure way and nobody is likely to suggest it.
2: Authentication is a tricky topic
Authenticating logins is not an easy thing to do. Yes, it's easy to make a login script but it's not easy to do it properly. I would never try to discourage anyone from making something themselves nor discourage a new developer from pursuing any goal, but authentication is not something you should be learning only a week into HTML. I'm sorry if that comes across as harsh, but there are people who have been masterminding applications for years who still don't do it securely.
3: Third Party are Best
It's possible to make your own authentication system that likely only the most determined of attackers could access, but it wouldn't involve Javascript authentication. Consider Javascript to be more of a convenience to the user than a solution for the developer. Javascript can do some remarkable things, but being a trusted source of data is something it will never do. Please understand this important point, because the source code you have provided is riddled with security flaws.
--
Now, on to what you want to do. Identifying that you're the "admin" user is something you're putting a password in to do. If you could figure out you're the owner of this site before putting in your password, you wouldn't need the password, right? In short, you can't do what you want to do; not reliably, anyway. It's possible to only show those forms if you're using a particular IP, but IPs can be masked, imitated and changed, which makes it insecure.
There are several third party authentication methods that you can use to do all the heavy lifting for you. All you do is put the fields on your page and they'll handle the rest. You can use any Social Media login (Facebook, Twitter, Google Plus, etc) or you can use O Auth, which deals with all the heavy lifting of authentication for you.
I don't mean to discourage you, nor anyone else, from pursuing their own authentication methods but if I'm honest with you I think this is something way beyond your skill level that you shouldn't be considering right now.
If you serve the pages via a server, you can enforce basic HTTP auth. Should be really simple to set up and you would have the benefit of a standard of security.
Here are the Apache docs for this, for example.
Im new to Meteor/iron-router and am following the Microscope project/ file structure.
My question is :
I dont want the usual drop down login box with {{> loginButtons}}. How do I set up a stand alone authentication page as the primary loaded page if user is not registered or logged in? It will have the usual email/pw and social logins.
This is the basic router code for easy reference.
Do I just tweak the requireLogin part?
I also tried to use accounts-entry package but its fairly tough to figure how to use it.
You could also use an existing package from Atmosphere that provides a full-page login, such as UserAccounts.
One way to do this is to just roll your own implementation with the Meteor.loginWithPassword and Meteor.loginWith<ExternalService> functions. You can call these functions when the relevant buttons on your login page are clicked.
I am new to web-building, I am interested in creating a pre-submission form for new users to a gallery / forum for a ghost group. Log their inputs when successful.
What I am trying to achieve is.
When a new user comes to the the landing page, they are asked for their
Username
Age
Referring site code
When they will submit the information, it will check if the username already exists; if they are over 18 and the website code that referred them to the gallery/forum.
I trying to have a members only forum gallery for my ghost group and their friends that are serious. Not to the open public.
I want to have a pre form so that if the general searcher stumbles on the page thay cannnot try to access it.
try looking at some frameworks such as stripes or struts
which will allow you to have form data posted to servlets and having the framework(and/or servlet) perform validation e.g lookig up to see if a record exists, number > 18 etc.
Using the Twitter API, and just want to have a simple 'reply' button on every tweet (say, 'How do I create a reply button?' from #kraykray) that automatically puts '#kraykray' into the tweet form.
Don't need the system to log that it's any kind of special message.
you can do this with the help of rails javascript helpers or you can use only javascript to handle this problem as well.
Rails way
On clicking the reply button call some action and pass the username as params to the action and render your textarea with the username as value for the textarea. Hope this helps
Please let me know if you need code snippets.You can improve the code, I am just trying to explain how you can do with javascript. I dint used jquery or prototype because, I donno which library you use.
Please check this link http://jsbin.com/atodu3/2
I need a script that can handle the following tasks.
Take user data from my database and fill in and submit / post data to forms
located on third part websites.:
So I want to know if is it hard to create or do somebody knows if does exists some script for mass form submissions in PHP -Javascript-Ajax ?
I run Dancers & Hostess & Model jobs website, I would like to find some script which allows the girls automaticly submit to hundreds websites forms (other 3rd part model agencies) with their similar model application form info on my website previously specified,
1).Firstly the girls will fill out my
agency portfolio very detailed form ,
like this i will get all the model personal info
from them ,
2) Secondly i would like to allow
for example models to submit to
100 and more other model agencies
forms (I will find those websites before, and I
will get their field names = values
and thanks to some script would like
to connect them with every girl data
already created in my website to
submit .
I would like to implement it to my wordpress website where the girls has their portfolios instead of my pages .
I would like to offer this service especially to models , it should work like some directory submitters , The script knows names - values and fill it out itself, but I want it online - browser side, where the girls should only fill out captcha if there is and click the button "submit".After succesful submit it should offer other form to submit.
I would be very happy if you know the answer or if you can redirect me to some article
example website :[SEMI AUTOMATED LINK DIRECTORY][1]
[1]: http://www.onewaytextlink.com/links.php?type=free&pagenum=1"SEMI AUTOMATED LINK DIRECTORY"
Sorry, but it ain't gonna work. Cross-domain ajax is forbidden. Although you can avoid this restriction more or less by various techniques, many sites won't accept cross-site requests due to security reasons.