Skip to content

g1ll/cstsi_bda_atividade_aula_05

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSTSI-BDA: Atividade Aual 5 - Regras e Autenticação

Exemplo:

Como deverá funcionar se implementadas as funções corretamente:

exemplo

Crie um projeto no Firebase com o Realtime Database e importe este arquivo:

atividade-aulas-03-4-default-rtdb-export.json.

Faça o clone do projeto com o comando git:

git clone https://github.com/g1ll/cstsi_bda_atividade_aula_05.git

Após o git fazer o download do projeto, entre na pasta cstsi_bda_atividade_aula_05

cd cstsi_bda_atividade_aula_05

Dentro da pasta execute o comando do npm para instalar as dependências, incluindo o Firebase:

npm install

Espere o npm instalar todas as dependências e siga para a configuração do seu projeto.

Para configurar o acesso ao seu projeto no Firebase, crie o arquivo .env na raiz do projeto javascript:

Use este template: .env

env-file

Após criar cada variável de ambiente REACT_APP_NOME_CONFIG coloque o valor de acordo com as configurações de acesso de app ao seu projeto Firebase. Observe que as variáveis de ambiente usam o prefixo REACT_APP_, após este prefixo usa se o nome da variável da configuração do Firebase em formato MACRO_CASE. NÃO USE VIRGULA NO FINAL DE CADA VARIÁVEL, NÃO É NECESSÁRIO, POIS TUDO QUE VIER DEPOIS DO NOME DA VARIÁVEL E DO SINAL DE IGUAL SERÁ CONSIDERADO CONTEÚDO DA VARIÁVEL!

As variáveis de ambiente que configuram o acesso do app ao projeto no Firebase serão lidas no módulo "Firebase/firebase":

firebase-config

Caso o seu aquivo de configuração possua alguma variável que falta no módulo, apenas acrescente seguindo os padrões de nome em formato MACRO_CASE.

Agora já podemos testar o projeto rodando o comando abaixo no terminal e dentro da raiz do diretório do projeto:

npm start

Este comando irá iniciar um servidor local para rodar o seu projeto react no endereço: http://localhost:3000

Para testar o projeto apenas acesse o endereço acima após a execução do comando npm start.

As alterações no código serão automaticamente compiladas, atualizando a página no endereço de teste. Caso a porta 3000 do seu computador já esteja ocupada, o npm irá lhe perguntar por outra porta ou rodará na pora 3001.

Agora o projeto cliente está pronto para a atividade!

Implementando as funções de Firebase/firebase.js

NÃO HÁ NECESSIDADE DE ALTERAR OS CÓDIGOS QUE NÃO SEJAM DO ARQUIVO firebase.js

A atividade consiste da implementação das seguintes funções no módulo Firebase/firebase :

1 - doCreateUserWithEmailAndPassword(email, password): Recebe o Email e a Senha do Usuário e deverá criar uma nova conta no Firebase Authentication, além de cadastrar este usuário no nó /users/ para que se possa implementar as regras de segurança.

2 - doSignInWithEmailAndPassword(email, password): Recebe os parêmtros de email e senha do usuário e deverá realizar o login guardando as credenciais na propriedade credentials da classe Firebase. O método também deverá atribuir o booleano TRUE ao atributo da classe this.isLogged em caso do login ser concluído com sucesso. Ao final a função deverá retornar o usuário autenticado (this.credentials.user).

3 - doSignOut(): Não recebe parâmetros e devera executar o método adequado para desconectar o usuário.

4 - Usando os métodos para regras de segurança, implemente uma regra para que apenas os usuários logados com o atributo admin possam escrever no nó de produtos.

5 - Salve na pasta src/components/Firebase do projeto, uma pasta chamada dump com o arquivo json do seu banco do realtime database e outro arquivo json com as suas regras

Referências:

Regras no Firebase

Sintaxe de Regras no Firebase

Regras Condicionais no Firebase

Regras de Indexação

Autenticação no Firebase

Firebase Instalação e Configuração

Create React App documentation.

React documentation.

Create React App.