Acessso por senha Javascript

Este artigo explica passo a passo como criar um sistema para proteger por senha umas páginas em sua web. Utilizamos Javascript, uma linguagem acessível a todo mundo.

Acessso por senha Javascript

Lamentavelmente, javascript não é uma linguagem com a qual se possa realizar um método interessante para fazer com que algumas páginas de nosso site somente seja acessíveis se se introduz uma senha correta. Mesmo assim, existe um mecanismo para poder realizar isto, que não é muito avançado nem muito seguro, mas pode dar um efeito em nossas páginas que estamos desejando.

Trata-se de colocar páginas web em nosso espaço de links, para que ninguém possa acessa-las. Esta é toda a segurança que podemos dar a nossas páginas: como não existem links dirigidos para elas, ninguém poderá acessa-las. A única maneira de acessar as páginas seria conhecendo o nome de arquivo e escrever a URL do mesmo, mas como também não vamos publicar o nome do arquivo, poderemos estar quase certos de que ninguém acertará construir o endereço da página que queremos ocultar. Logo, criaremos um formulário muito simples, que incluirá um campo de texto e um botão. No campo de texto teremos que escrever o nome do arquivo que se deseja ver e ao clicar o botão javascript seremos conduzidos para a página que tiver esse nome de arquivo. Nesse ponto pode acontecer duas coisas:

1. Primeiro, que o nome de arquivo seja incorreto, ou seja, inventamos a senha mas não acertamos com o nome da página escondida. Neste caso, se mostraria uma página de erro típica, dessas que o servidor mostra quando tentamos acessar a uma página que não existe.
2. Segundo, que o nome da página seja correto, ou seja, que a senha que introduzimos seja igual ao nome do arquivo queremos acessar. Neste caso, javascript nos conduzirá ao lugar correto e poderemos ver a página oculta.

Vejamos passo a passo como construir este sistema de acesso por senha:

1.- As páginas para desenvolver

Temos que trabalhar com 2 páginas web pelo menos, uma para colocar o formulário e outra que seria a página oculta. Teremos estas páginas colocadas no mesmo diretório, com o qual simplificaremos um pouco o problema.

2.- Formulário para a senha

Na página que quisermos colocar o acesso por senha, devemos colocar o seguinte formulário:



3.- Função que nos envia à página oculta

Como a página oculta tem como nome de arquivo o que tivermos escrito no campo de texto, poderemos acessa-la da seguinte forma:



A função é muito simples, o único que faz é concatenar o nome que foi escrito no campo de texto com ".html" e nos manda, utilizando window.location, diretamente à página cujo nome acaba de ser construido.

Como concatenamos com ".html" o nome do arquivo escrito no formulário, o nome que escrevermos deverá ir sem ".html".

4.- Incluir no botão a chamada à função

Com o objetivo de que ao clicar o botão o navegador nos leve à página oculta, temos que fazer com que ao clica-lo, seja chamada a função acesso definida no ponto anterior. Isto se consegue mediante o atributo onclick, que devemos inserir na etiqueta do botão.



5.- Código inteiro da página

Podemos ver a seguir o código da página inteira. Somente mostramos o código da página que tem o formulário, porque a página oculta poderá ser como cada um desejar.


6.- Últimos anotações

Uma coisa importante na hora de conseguir que o script seja mais confiável consiste em criar páginas com um nome de arquivo difíicil de se inventar. Como o nome da página é a senha com a qual vai ser acessada a página necessitaremos que tal nome seja um pouco complexo, como por exemplo, fks12dmxc53.html. Se a página senha se chamasse por exemplo, index. html qualquer um com um pouco de imaginação poderia inventa-la.

Antes de terminar, cabe repetir que este não é o método mais seguro que existe para criar scripts para realizar acessos restringidos, é somente uma pequena astúcia que "funciona". Para realizar este objetivo com melhores resultados temos linguagens como ASP, PHP ou CGI. Também podemos restringir o acesso às páginas utilizando o própio sistema operativo e a autentificação que este implementa, tal vez seja a opção mais cômoda, embora não seja cem porcento provável que o nosso provedor de hospedagem nos permita.

Review Notebook ASUS Zenbook 14 UX435: Duas telas, bateria top e muito bonito

O Zenbook 14 versão UX435E, acabou de ser lançado e, sim, a ASUS já nos enviou. Testei ele pelas últimas semanas trabalhando diretamente, minha vontade de mostrar essa segunda tela era tanta, mas não podia. Olha só que animal, o touchpad vira uma tela secundária, totalmente personalizável e útil. Vem ver o que o Zenbook 14 de 2021 tem para te oferecer, o que ele traz de novidades e claro, se vale a pena pagar o preço.

Conteúdo relacionado

Instalei a GCAM no Poco M3 E FICOU INCRÍVEL
Smartphones

Instalei a GCAM no Poco M3 E FICOU INCRÍVEL

Mais um smartphone que passa aqui pela redação do Oficina da Net e que instalamos a Gcam para ver se o resultado das fotos ficam maximizados com a ajuda do app do Google. Será que funcionou?

Como criar fontes TTF utilizando o CorelDraw - Parte 01
Softwares

Como criar fontes TTF utilizando o CorelDraw - Parte 01

Aprenderemos a criar nossas próprias fontes True Type Font (TTF), conhecidas como “fontes verdadeiras”, faremos isso no CorelDraw, pois nos permite utilizar imagens variadas, como gravuras de livros e desenhos que podem ser scaneados ou vetores do próprio Corel.

Intranet - Conceito e Objetivos
Negócios

Intranet - Conceito e Objetivos

Este artigo irá fazer uma breve descrição do que é uma intranet e seus principais objetivos.

MySQL - O Banco de Dados mais utilizado no mundo
Programação

MySQL - O Banco de Dados mais utilizado no mundo

MySQL é um programa interativo que permite você conectar com um servidor de MySQL, perguntar e ver os resultados. Além disso, MySQL suporta o SQL padrão (ANSI). Isso cria uma ótima performance em servidores Unix/Linux

Um pouco mais de Web 2.0
Programação

Um pouco mais de Web 2.0

Veja mais um pouco sobre a tão famosa Web 2.0, alguns sites que utilizam está nova tecnologia / metodologia.

Curso HTML - Introdução
Programação

Curso HTML - Introdução

Aprenda aqui com o melhor conteúdo da internet traduzido da W3SCHOOLS.COM.