DEV Community: Guiller

How to issue your own token on Ethereum

Guiller — Wed, 05 Oct 2022 13:59:21 +0000

In this tutorial, the aim is to walk you through the steps of setting up your account and issuing your first token on the Ethereum network using a single smart contract.
The token will be a standard ERC20, will have the main functions and can be used as a general basis for more sophisticated applications than just transferring them.

Ethereum address
In this tutorial, we will use a testnet to issue the token, so you don't spend real Ether ETH. We will use the Ropsten Test network. To get started, go to MyEtherWallet (MEW) and create an account there.

To get setup, click right corner, change network to Ropsten ( MyEtherWallet or MetaMask Wallet ) → click New Wallet → Enter a password you can remember → Download/save your Keystore file to a safe space → Save your private key in a safe space. The whole process of creating an account and connecting to the test network is very simple and we can go to the new pass0.

ETH postman address -
Address of your wallet, go to → View wallet information → Private key → Enter saved private key → Unlock your wallet and it should be there!
Basically what you will have to do in simple terms:
Download MetaMask from metamask.io.
Select Ropsten Network.
Select DEPOSIT.
Claim 1 Ropsten ETH.
Trigger a faucet to obtain ETH coins tests to create your token.
Transact to the address you will use for the MyCrypto tutorial.

Contract
Download the smart contract that legendary Ethereum unicorn knight BokkyPooBah helped us make by clicking here. ⬅️
You will be editing this code for your own token.

Now let's get started:

Open the contract you downloaded in your Text Editor.
Go to Line 3–15 and see the comments section. Although this is a comments section, this will help you get on the path. For me, 0Fucks was my first :). Basically, you send someone 0Fucks when you don't care.
Change Line 4 to your smart contract title
Change Line 6 to the Ropsten Ethereum address you created in MyEtherWallet
Change the symbol from line 7 to the respective currency name (keep it short)
Change Line 8 to your token name

Next:
Go to line 102 and change "FucksToken" to "(YourTokenName)
Do the same for line 115
Go to line 116 and change the symbol name, the same as you did in the comments section
Do the same for line 117
Change line 120 address to be the same as you generated in MEW
The same goes for Line 121

For the decimal places and the total supply on Lines 118 and 119 you can leave it as is, however I will explain just for visibility. In the total offer, there are some considerations. The first is that the default (and maximum) has 18 decimal places, which means that a coin can be divided into 18 parts.
The second is that, say, for example, you want to issue 100 tokens, in the total supply part you must put 100, followed by the number of decimal places you choose.
Ex: If I want to issue 100 tokens, what I will put in the total supply is: 100000000000000000000; and so on.

After that, we finish editing the code. Yes, that was easy. Now let's do some cool stuff...
Go to http://remix.ethereum.org/
In the browser / ballot.sol, paste the code you just edited! If something red appears, there is something wrong with the code. If there's a yellow warning, that's fine, we hope for the best.
Now in Build → Details → Choose the token you are creating
In ByteCode, press the to button to copy the ByteCode to the clipboard - (In this section, what may appear are different things in the ByteCode. What you should copy is the ByteCode of the “object”, adding 0x at the beginning. will have 0xByteCode.)

Go to the MEW where we will start deploying the contract. Remember we want to be on the Ropsten Test Network so make sure the top right says
Navigate to Contracts tab → Press Deploy Contract
Paste your ByteCode in the ByteCode box. Your gas limit should update automatically
Access your wallet by going to Private key → Enter your private key → Unlock your wallet
Now press Sign transaction → Implement transaction
ATTENTION: This is the moment when you must cross your fingers for the first time for a few seconds. 🤞
Click on the tx transaction or go to https://ropsten.etherscan.io to verify that the contract has been approved. If not, start over and try to figure out what you got wrong. If yes, you are basically Vitalik 2.0, be proud.
If all goes well, this is a sample image of what you should be seeing.

Now let's register this contract. Do that:
On the Overview tab → Click on the contract address
Go to Contract Code tab → Click Verify and Publish

Almost there... The following steps are really important. So look carefully. Basically what we're doing here is trying to make sure the code fits what you say you're deploying and logging onto the network. FOREVER .
So if you make mistakes, you are wrong forever. What a friend told me this on Blockchain:
Do it right once or wrong forever.
Now you have 5 things to do on this page.
Make sure the contract address field matches the contract address you just deployed. Remember that the contract address is different from the MEW address you created, so make sure you don't confuse them.
The contract name must match the code name, in my case it is the following: contract FucksToken. This was on line 102 of your code
To check which version of the complier, go back to the remix page where you got the BYTECODE from and check the URL, the version of the complier will be there. In most cases it should be:
v0.4.19 + commit.c4cbbb05.js, but you want to try the updated ones if by any chance that doesn't work.
Under Optimization, choose No (we haven't enabled it before).
Under ENTER SOLIDITY AGREEMENT CODE BELOW, copy the entire Remix code and paste it into this area. NOT BYTECODE, but the code itself. It can also be copied from your text editor.
Now, leave the other fields blank and click Verify and Publish.
But be aware... This is the moment you've been waiting for... It's about to happen!
FINGERS CROSSED AGAIN BY VITALIK'S.

The moment of truth...

** Success!**

If a successful page comes with green checkmarks and stuff, you've done it!
If a red message appears... try again and see where you might have missed a step. I'm happy to help if you leave a comment below, but remember that Google is your best friend 😉
To confirm it works, go to https://ropsten.etherscan.io/ and check your MEW address, not the contract, but your public address. If you can see your coins there, now you can relax and live the crypto dream in peace! At least until the next BTC rally :)))))

To be able to send these tokens, you need to login to your MEW account Viewing Wallet Information → Accessing and entering your Private Key → Unlocking Wallet → Select the Load Tokens option. After that, they will be transferable.

How To Create Your Own Ethereum Token In An Hour (ERC20 + Verified)
How to do an ICO on Ethereum in less than 20 minutes.

References:

https://www.youtube.com/watch?v=o7xoy0gbHO8
https://gist.github.com/Filip3Dev/9d32f54f35719f3b748c36ba75a4833a

http://remix.ethereum.org/

https://ethereum.github.io/browser-solidity

https://faucet.metamask.io/

Como emitir seu próprio token no Ethereum

Guiller — Sat, 27 Aug 2022 15:33:21 +0000

Neste tutorial,o objetivo é orientá-lo nas etapas de configuração da sua conta e emitir seu primeiro token na rede Ethereum usando um único contrato inteligente.
O token será um ERC20 padrão, terá as principais funções e pode ser usado como base geral para aplicativos mais sofisticados do que apenas transferi-los.

Endereço Ethereum
Neste tutorial, usaremos uma rede de teste para emitir o token, para que você não gaste o Ether ETH real. Usaremos a rede Ropsten Test. Para começar, vá para MyEtherWallet (MEW) e crie uma conta lá.

Para obter a configuração, clique no canto direito, altere a rede para Ropsten ( MyEtherWallet ou MetaMask Wallet ) → clique em Nova Carteira → Digite uma senha que você possa lembrar → Faça o download / salve o seu arquivo Keystore em um espaço seguro → Salve sua chave privada em um cofre espaço. Todo o processo de criação de conta e conexão na rede de teste é bem simples e podemos ir ao novo pass0.

Endereço da carteiro ETH -

Endereço da sua carteira, vá para → Exibir informações da carteira → Chave privada → Digite a chave privada salva → Desbloqueie sua carteira e ela deve estar lá!
Basicamente, o que você terá que fazer em termos simples:
Faça o download do MetaMask em metamask.io .
Selecione Rede Ropsten.
Selecione DEPÓSITO.
Reivindicação 1 Ropsten ETH.
Acionar um faucet para obtenção de moedas ETH testes para criação do seu token.
Transacione para o endereço que você usará para o tutorial em MyCrypto .

Contrato
Faça o download do contrato inteligente que o lendário cavaleiro unicórnio Ethereum, BokkyPooBah nos ajudou a fazer, clicando aqui . ⬅️
Você estará editando este código para seu próprio token.

Links:

Issue-your-own-ERC20-token/erc20
_tutorial.sol at master · bitfwdcommunity/Issue-your-own-ERC20-token

Agora vamos começar:

Abra o contrato que você baixou no seu Editor de texto.
Vá para a Linha 3–15 e veja a seção de comentários. Embora esta seja uma seção de comentários, isso o ajudará a seguir o caminho. Para mim, 0Fucks foi o meu primeiro :). Basicamente, você envia 0Fucks a alguém quando não se importa.
Altere a Linha 4 para o título do seu contrato inteligente
Altere a Linha 6 para o endereço Ropsten Ethereum que você criou no MyEtherWallet
Altere o símbolo da linha 7 para o respectivo nome de moeda (mantenha-o curto)
Altere a Linha 8 para o nome do seu token

Próximo:
Vá para a linha 102 e altere "FucksToken" para "(YourTokenName)
Faça o mesmo para a linha 115
Vá para a linha 116 e altere o nome do símbolo, o mesmo que você fez na seção de comentários
Faça o mesmo para a linha 117
Alterar o endereço da linha 120 para ser o mesmo que você gerou no MEW
O mesmo vale para a Linha 121

Para as casas decimais e o fornecimento total nas Linhas 118 e 119, você pode deixar como está, no entanto, explicarei apenas para obter visibilidade. Na oferta total, existem algumas considerações. O primeiro é que o padrão (e máximo) tem 18 casas decimais, o que significa que uma moeda pode ser dividida em 18 partes.
A segunda é que, digamos, por exemplo, que você queira emitir 100 tokens, na parte do suprimento total você deve colocar 100, seguido pelo número de casas decimais que escolher.
Ex: Se eu quiser emitir 100 tokens, o que colocarei no suprimento total é: 100000000000000000000; e por aí vai.

Depois disso, terminamos a edição do código. Sim, isso foi fácil. Agora vamos fazer algumas coisas legais ...
Vá para http://remix.ethereum.org/
No navegador / ballot.sol, cole o código que você acabou de editar! Se algo vermelho aparecer, há algo errado no código. Se houver um aviso amarelo, tudo bem, esperamos o melhor.
Agora em Compilar → Detalhes → Escolha o token que você está criando
Em ByteCode, pressione o botão to para copiar o ByteCode para a área de transferência - (Nesta seção, o que pode aparecer são coisas diferentes no ByteCode. O que você deve copiar é o ByteCode do “objeto”, adicionando 0x no início. terá 0xByteCode.)

Vá para o MEW, onde começaremos a implantar o contrato. Lembre-se de que queremos estar na Ropsten Test Network, portanto, verifique se o canto superior direito diz
Navegue até a guia Contratos → Pressione Implantar contrato
Cole seu ByteCode na caixa ByteCode. Seu limite de gás deve ser atualizado automaticamente
Acesse sua carteira, acessando a Chave privada → Digite sua chave privada → Desbloqueie sua carteira
Agora pressione Assinar transação → Implementar transação
ATENÇÃO: Este é o momento em que você deve cruzar os dedos pela primeira vez durante alguns segundos. 🤞
Clique na transação tx ou acesse https://ropsten.etherscan.io para verificar se o contrato foi aprovado. Caso contrário, comece novamente e tente descobrir o que você errou. Se sim, você é basicamente o Vitalik 2.0, tenha orgulho.
Se tudo der certo, esta é uma imagem de amostra do que você deveria estar vendo.

Agora vamos registrar este contrato. Fazer isso:
Na guia Visão geral → Clique no endereço do contrato
Vá para a guia Código do contrato → Clique em Verificar e publicar

Quase lá ... Os seguintes passos são realmente importantes. Então olhe com cuidado. Basicamente, o que estamos fazendo aqui é tentar garantir que o código se encaixe no que você diz que está implantando e registrando na rede. PARA SEMPRE .
Então, se você cometer erros, estará errado para sempre. O que um amigo me disse isso no Blockchain:
Faça certo uma vez ou erre para sempre.
Agora você tem 5 coisas a fazer nesta página.
Verifique se o campo de endereço do contrato corresponde ao endereço do contrato que você acabou de implantar. Lembre-se de que o endereço do contrato é diferente do endereço MEW que você criou, portanto, certifique-se de não confundi-los
O nome do contrato deve corresponder ao do código, no meu caso é o seguinte: contract FucksToken. Isso estava na linha 102 do seu código
Para verificar qual versão do complier, volte para a página de remix de onde você obteve o BYTECODE e verifique o URL, a versão do complier estará lá. Na maioria dos casos, deve ser:
v0.4.19 + commit.c4cbbb05.js, mas você deseja tentar os atualizados, se por acaso isso não funcionar.
Em Otimização , escolha Não (não a habilitamos antes).
Em INSIRA O CÓDIGO DE CONTRATO DE SOLIDITY ABAIXO, copie todo o código do Remix e cole nessa área. NÃO O BYTECODE, mas o próprio código. Também pode ser copiado do seu editor de texto.
Agora, deixe os outros campos em branco e clique em Verificar e publicar.
Mas esteja ciente ... Este é o momento que você estava esperando ... Está prestes a acontecer!
DEDOS CRUZADOS NOVAMENTE PELA VITALIK'S.

O momento da verdade…

                                  Sucesso!

Se uma página de sucesso vier com marcas de verificação verdes e outras coisas, você conseguiu!
Se aparecer uma mensagem vermelha ... tente novamente e veja onde você pode ter perdido um passo. Fico feliz em ajudar se você deixar um comentário abaixo, mas lembre-se de que o Google é seu melhor amigo 😉
Para confirmar que funciona, vá para https://ropsten.etherscan.io/ e verifique o seu endereço MEW, não o contrato, mas o seu endereço público. Se você pode ver suas moedas lá, agora pode relaxar e viver o sonho de criptografia em paz! Pelo menos até o próximo comício do BTC :)))))

Para poder enviar esses tokens, você precisa acessar sua conta MEW Visualizando Informações da Carteira → Acessando e inserindo sua Chave privada → Desbloqueando Carteira → Selecione a opção Carregar Tokens. Depois disso, eles serão transferíveis.

How To Create Your Own Ethereum Token In An Hour (ERC20 + Verified)
How to do an ICO on Ethereum in less than 20 minutes.

Referências:

https://www.youtube.com/watch?v=o7xoy0gbHO8
https://gist.github.com/Filip3Dev/9d32f54f35719f3b748c36ba75a4833a

http://remix.ethereum.org/

https://ethereum.github.io/browser-solidity

https://faucet.metamask.io/

Imagens:

Java Script-AdonisJs Funções(roles) ACL-RBAC Backend API

Guiller — Sat, 27 Aug 2022 15:32:20 +0000

Conhecimentos necessários: NodeJs,AdonisJs Yarn/Npm, DataBase, Mysql ou PostgreeSql, JavaScript.

Nesse tutorial vou ensinar a implementar um sistema de acessos filtrados, onde somente usuários autenticados e autorizados podem acessar determinadas URLs.

Um sistema de nível de acesso e acesso por função completo, usando Java Script juntamente com o Framework AdonisJS para exemplificar o propósito.

Usando um banco de dados relacional SQL, cliente Postgree, Mysql.
É importante sabermos que o banco de dados relacional SQL DB é a ferramenta fundamental para esse processo, isso irá gerar uma facilidade em nosso desenvolvimento, quando começarmos a entender os relacionamentos entre as tabelas do banco e as regras de funções, que dirão quem pode fazer o que, dentro do sistema.

Esse é um dos campos da programação bastante notável e usual nos sistemas de grande porte.

Começando: Crie um banco de dados usando seu cliente Mysql ou Postgre. Com nome,senha e host. (não vou entrar no mérito de como fazer é necessário ter esse conhecimento).

Agora depois de termos o Adonisjs instalado em nossa máquina,devemos criar o projeto.

Doc Adonisjs: https://adonisjs.com/docs/4.1/installation

Criando nosso projeto no modo API:

adonis new acl-rbac-adonis-api --api-only

Encontrei duas libs relacionadas ao Adonis que fazem o papel de RBAC/ACL:

1- https://www.npmjs.com/package/@rocketseat/adonis-acl
https://github.com/HigoRibeiro/adonis-acl

2- https://www.npmjs.com/package/accesscontrol
https://github.com/onury/accesscontrol

Mas por fim usarei como exemplo essa lib:

https://github.com/QuantumLabsLtda/adonisjs-cerberus

Você pode criar um midlleware na unha e fazer suas regras de níveis de acesso e níveis por funções.
Isso te dará uma melhor liberdade para implementar um sistema de ACL RBAC,mais estruturado e que te dê
maior liberdade e que consuma menos recursos.

Pois ao criar um midlleware você não precisa gastar tempo e processamento de máquina para ir
até o banco de dados verificar se aquele usuário tem acesso aquela URL.
De uma forma geral isso lhe custará menos tempo e processamento.Mas pode ser algo que tenha
uma segurança menor, isso vai depender de do projeto e das variáveis em si.

Criando esse midlleware você consegue facilmente separar quem pode acessar qual URL.E no geral não precisa usar um nova biblioteca somente para esse fim.

No final pode ser bem mais vantajoso criar um sistema de midlleware único e criar suas próprias regras de acesso.
Isso deve ser decidido por você e depende muito do seu tipo de projeto.

Mas nesse artigo seguiremos usando um biblioteca para isso,como disse existem algumas famosas,e
que fazem basicamente o mesmo trabalho,mas no exemplo desse artigo usaremos o CERBERUS.

Existe um tutorial no link acima, super prático, mas tentarei mastigar mais um pouco.

Primeiro adicione o pacote da biblioteca Adonis-Cerberus

npm i @quantumlabs/adonisjs-cerberus --save

Faça as configurações de provedores, na raiz do projeto.

Em

start/app.js


const providers = [
    ...
    '@quantumlabs/adonisjs-cerberus/providers/CerberusProvider',
    ...
  ]

Em

start/app.js


const aceProviders = [
    ...
    '@quantumlabs/adonisjs-cerberus/providers/CommandsProvider'
    ...
  ]

Em

start/kernel.js


const namedMiddleware = [
    ...
    guard: 'Cerberus/Middleware/Guard'
    ...
  ]

Adicione caracteristicas especiais trails,dentro do Model User.js

Em

app/Models/User.js


class User extends Model {
  static boot () {
    super.boot()

    this.addTrait('@provider:Cerberus/Traits/Role')
    this.addTrait('@provider:Cerberus/Traits/Permission')
  }
...

Finalmente rode o comando cerberus que criará todas as migrations com os relacionamentos ,chaves PK e FK e toda estrutura baseada em ACL e RBAC.
Execute o comando:

adonis cerberus:init

Entre na pasta database/migrations e verá as novas tabelas criadas.

Então rode o comando para migração das tabelas para o banco de dados.

adonis migration:run

Se tudo der certo, você verá as tabelas criadas no seu cliente de banco de dados.

Como mencionado antes, este comando deve (e esperamos que vá) copiar todas as migrações específicas da biblioteca para a pasta migrations de seus projetos. Não há sinalizadores ou parâmetros especiais para este comando.

Role / Função

adonis cerberus:role [name] [slug]

Usage:
  cerberus:role <name> [slug] [options]

Arguments:
  name   Name of the role
  slug   Short name for role

Rodando então o comando para criação de uma role/função.


adonis cerberus:role admin adm

Na tabela roles é criada um novo tipo de função para um usuário.

Este comando cria uma nova * role / função * na tabela de roles/funções. Você só precisa especificar a função nome, o argumentoslug é opcional.
This command creates a new role into roles table. You only need to specify role's name, slug argument is optional.

Esse processo de criação de níveis de acesso por função continua em outras tabelas principais,roles,resources,permissions,default_permissions.

Resource / Recurso

adonis cerberus:resource [name] [slug] [options]

Arguments:
  name               Name of the resource
  slug               Short name for resource

Options:
  -p, --defaultPermission   Generate default permissions
  -a, --always-ask   Ask which rights give in each Resource once (false by default)
  --from-models      Generate a resource for each app Model
  --from-controllers Generate a resource for each app Controller

Rodando então o comando para criação de uma resource/recurso.


adonis cerberus:resource admin adm

Na tabela resource é criada um novo tipo de função para um usuário.

Este comando cria um novo * resource / recurso * na tabela de recursos. Você só precisa especificar o nome do recurso, o argumentoslug é opcional.
The options are:
-p, --defaultPermission - Generate default permissions
-a, --always-ask - Ask which rights give in each Resource once (false by default)
--from-models - Generate a resource for each app Model
--from-controllers - Generate a resource for each app Controller

Default Permission / Permissão Padrão

cerberus:defaultPermission [options]

Options:
  -a, --all               Run default permission creation for each Resource in database
  --resource-name <value> Name of resource

Rodando então o comando para criação de uma default_permissions/padrão de permissões.


adonis cerberus:defaultPermission --all

Este comando cria uma nova * permissão padrão * na tabela default_permissions. Você precisa especificar um nome de Recurso e, em seguida, * Cerberus * cria um registro de permissão padrão com o Recurso * nome * especificado.

Uso

Uso em rotas

Depois de criar suas Permissions, você poderá começar a usar o middleware Guard em suas rotas.

É simples vincular uma permissão a uma rota, veja:

/**
* Get all users
* GET users
*/
Route
  .get('', 'UserController.index')
  .middleware(['auth', 'guard: user.read'])

Você também pode usar várias permissões em sua rota:

/**
* Create a new user
* POST users/register
*/
Route
  .post('register', 'UserController.register')
  .middleware(['auth', 'guard: user.create, user.read'])

E também é possível usar vários recursos:

/**
* Fetch all posts with user profile
* GET posts
*/
Route
  .get('', 'PostController.index')
  .middleware(['auth', 'guard: post.read, user.read'])

Aviso : Você precisa adicionar o middleware auth padrão * antes de ** Cerberusguard! Warning: You need to add the default auth middleware before Cerberus guard!

Consuming Models

You should use Cerberus Models to create Roles, Resources and Permissions in your own code. It's also useful for creating seeds or a complete CRUD to manage your Cerberus stuff. It's simple to use:

Roles

  const Role = use('Cerberus/Models/Role')

  // Creating a new Role
  await Role.create({
    name: 'Jedi Master',
    slug: 'jedi'
  })

  // or

  let role = await Role.find(1)

  role.name = 'Wookie'
  role.slug = 'wookie'

  await role.save()

  // You can use any Lucid methods you want

Mapear e Filtrar dados de uma API com ReactJS e Java Script!

Guiller — Sat, 27 Aug 2022 15:31:13 +0000

Ao final desse artigo seremos capazes de entender todo funcionamento, além de aplicar conhecimento relacionado:

1-Receber dados Objetos e Arrays em Json uma API.

2-Imprimir os resultados dos dados em uma lista ordenada.

3-Além disso criaremos um motor de busca com o filter,uma função do Java Script.Isso permitirá buscar determinadas informações da API/lista de dados.

Recentemente tive um desafio de pegar os dados de uma API,filtrar,criar uma busca e imprimir em uma página web,usando ReactJS.

O ReactJS é um Biblioteca Java Script para cliente Frontend.

Para isso teremos que usar funções nativas do java script.Funções que nos permitirão fazer,ordenação, manipulação de objetos em Arrays,objetos JSON,em diferentes formatações de objeto.

Referência da API em JSON que vamos usar:

note que ela tem um array com objetos aninhados em json

https://jsonplaceholder.typicode.com/users

Usaremos essa API para aplicar o tratamento, mapeamento e filtragem dos dados de resposta da API.

Os dados de resposta em json podem vir de diversas formas como objetos e arrays cada uma terá uma forma diferente de tratamento no React.

https://jsonplaceholder.typicode.com/

Função Map do Java Script:

O objeto Map é um mapa simples de chave/valor. Qualquer valor (objeto e valores primitivos) pode ser usado como uma chave ou um valor.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map

Função Filter do Java Script:

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

Projeto usando o map ew filter para ler e buscar os dados da API do nosso link/url.Projeto aberto no Codesandbox service:

https://codesandbox.io/s/react-map-list-api-data-2021-i7jbf?file=/src/App.js

Existem diversos tipos de objetos json que retornam das APIS:

O mais comum é um array composto de objetos, mais usado em casos específicos:

Existem outras formas de retorno de dados da api, isso depende da opção de quem desenvolveu a mesma.

A diferença entre esses vários objetos faz com que devamos usar uma forma de código para casa caso.Note que os objetos são diferentes,assim devemos indexar e tratar cada tipo de encapsulamento de objetos JSON como únicos.
Analisando e aplicando as funções e regras corretas,conseguiremos imprimir,buscar e manipular os dados do objeto.

Algumas funções JS que podem ser usados no ReactJS:

Object.values:
O método Object.keys() retorna um array de propriedades enumeraveis de um determinado objeto, na mesma ordem em que é fornecida por um laço for...in (a diferença é que um laço for-in enumera propriedades que estejam na cadeia de protótipos).

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.keys:
O método Object.keys() retorna um array de propriedades enumeráveis de um determinado objeto, na mesma ordem em que é fornecida por um laço for...in (a diferença é que um laço for-in enumera propriedades que estejam na cadeia de protótipos).

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Conceitos e montagem do ciclo de vida no ReactJS.

Conhecimento em ReactJS , Class e Hooks:

Para trazer os dados corretamente na tela do usuário devemos
usar os conceitos de Component,Stateful/Stateless, Props,State,setState(),ComponentDidMount,ComponentWillReceiveProps,Arrow Functions,Funções de onClick,Funções Anônimas,Funções de Evento handleChange(e), { entre outras técnicas e funções.
Depois iremos renderizar os dados na tela.

É muito importante sabermos o id ou indexador do item que queremos buscar,assim será mais fácil escolher qual tipo de sintaxe usar,mas tudo estará em volta dos conceitos de:

Mapear



//import React, { useEffect, useState } from "react";

import React from "react";

import Filter from "./Filter.js";

import "./styles.css";

export default function App() {

  //const [id, setId] = React.useState([]);

  const [id, setId] = React.useState([]);

React.useEffect(() => {

    // getAllUser();

    getUser();

  }, []);

const getUser = async () => {

    const api_response = await fetch(

      "https://jsonplaceholder.typicode.com/users",

      {

        method: "GET",

        headers: {

          "Content-Type": "application/json"

        }

      }

    );

    const my_user = await api_response.json();

    console.log(my_user);

    setId(my_user);

  };

  return (

    <div className="App">

      <h1>MAP list array objeto JSON</h1>

      <h2>Wellcome User!</h2>

      <h1>Users</h1>

      <ul>

        {id.map((item) => (

          <li key="item.id">

            {item.id} - {item.username}

          </li>

        ))}

      </ul>

      <Filter />;

    </div>

  );

}

Filtrar



import React, { useEffect, useState } from "react";

//import React from "react";

import "./styles.css";

export default function Filter() {

  const [id, setId] = React.useState([]);

//FILTER SEARCH DATA API

  const [data, setData] = useState([]);

  const [searchFilter, setSearchFilter] = useState([]);

  const [result, setResult] = useState("");

useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

      .then((resp) => resp.json())

      .then((data) => setSearchFilter(data))

      .catch((error) => console.log({ error }));

  }, []);

useEffect(() => {

    const results = searchFilter.filter((resp) =>

      resp.name.toLowerCase().includes(result)

    );

    setData(results);

  }, [result]);

  //console.log(data);

const onChange = (evt) => {

    setResult(evt.target.value);

  };

return (

    <div className="Filter">

      <h1>FILTER and list array object JSON</h1>

      <h2>Wellcome Search!</h2>



      <h1>Search</h1>



      <div className="Appfilter">

        <input

          type="text"

          placeholder="Search here ... "

          value={result}

          onChange={onChange}

        />

        {data.map((r, i) => (

          <ul key={i}>

            <li>{r.name}</li>

          </ul>

        ))}

      </div>

    </div>

  );

}

Projeto Online

https://i7jbf.csb.app/

EM CONSTRUÇÃO

Exemplos:

Exemplos CodePen-CodeSandBox:

https://codepen.io/Guillerbr/pen/oNjgpod

https://codesandbox.io/s/filter-react-search-function-api-data-gxtqk

Fontes:

https://medium.com/@programadriano/javascript-entendendo-a-diferen%C3%A7a-entre-map-x-foreach-366a77fc7e82

https://medium.com/@programadriano/javascript-conhecendo-map-filter-e-reduce-ce072d8f0ec5

https://medium.com/@marcellguilherme/aprenda-tudo-sobre-reduce-ou-fold-fd71de86ce53

https://dev.to/iam_timsmith/lets-build-a-search-bar-in-react-120j

https://desenvolvimentoparaweb.com/javascript/map-filter-reduce-javascript/

https://www.w3schools.com/jsref/

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Authentication Cookies HTTP, HTTP Only, JWT, ReactJs Context API and Node on Backend Industry Structure

Guiller — Mon, 14 Mar 2022 00:38:52 +0000

Useful for you, consider buying me a coffee. Thanks!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Overview

The purpose of this article is to present, discuss, and provide specific mitigation techniques on user authentication and session best practices using Cookies, Http Only, JWT, Session, LocalStorage, and other methods.

Http cookies

An HTTP cookie (a web cookie or browser cookie) is a small piece of data that a server sends to a user's browser. The browser can store this data and send it back on the next request to the same server. It is usually used to identify whether two requests came from the same browser — when keeping a user logged in, for example. It stores dynamic information for the stateless HTTP protocol.

Cookies are mainly used for three purposes:

Session Management:

Logins, shopping carts, game scores or any other activity that must be kept by a server.

Customization:

User preferences, themes and other settings.

Tracking:

Recording and analyzing a user's behavior.

We can set the expiration time for each cookie
The 4K limit is for the entire cookie, including name, value, expiration date, etc. To support most browsers, keep the name below 4000 bytes and the overall cookie size below 4093 bytes.
Data is sent back to the server for each HTTP request (HTML, images, JavaScript, CSS, etc) — increasing the amount of traffic between the client and the server.

Http Only

What is HttpOnly?

According to the Microsoft Developer Network, HttpOnly is an additional flag included in an HTTP Set-Cookie response header. Using the HttpOnly flag when generating a cookie helps mitigate the risk of client-side script accessing the protected cookie (if the browser supports it).

To prevent cross-site scripting (XSS) attacks, HttpOnly cookies are inaccessible to the Document.cookie JavaScript API (en-US); they are sent only to the server. For example, cookies that persist server sessions do not need to be available to JavaScript, so the HttpOnly directive must be set.



_Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly_

A HttpOnly cookie is a tag added to a browser cookie that prevents client-side scripts from accessing the data. It provides a port that prevents the specialized cookie from being accessed by anything other than the server. Using the HttpOnly tag when generating a cookie helps reduce the risk of client-side scripts accessing the protected cookie, making those cookies more secure.

The example below shows the syntax used in the HTTP response header:



Set-Cookie: `=“[; “=“]` `[; expires=“][; domain=“]` `[; path=“][; secure][; HttpOnly]`

If the HttpOnly flag is included in the HTTP response header, the cookie cannot be accessed via client-side script. As a result, even if there is a cross-site scripting (XSS) failure and a user accesses accidentally a link that exploits the flaw, the browser will not reveal the cookie to third parties.

Here's an example - let's say a browser detects a cookie containing the HttpOnly flag. If client-side code tries to read the cookie, the browser will return an empty string as a result. This helps prevent malicious code (usually cross-site scripting (XSS)) from sending data to an attacker's website.

JWT

User authentication using the mechanism called JWT (JSON Web Token)

Authentication strategy for simple and secure REST APIs. It is an open standard for web authentication and is based entirely on JSON requests between the client and server. Its authentication mechanism works as follows:

The client makes a one-time request when sending the login and password credentials;
The server validates the credentials and, if everything is correct, it returns to the client a JSON with a token that encodes data from a user logged into the system;
After receiving the token, the client can store it in the way they prefer, either by LocalStorage, SessionStorage, Cookies and HTTP Only or other client-side storage mechanisms;
Every time the client accesses a route that requires authentication, it just sends this token to the API to authenticate and release the consumption data;
The server always validates this token to allow or block a client request.

JWT (JSON Web Token) is an industry-standard RCT 7519 method for performing authentication between two parties via a signed token that authenticates a web request. This token is a Base64 code that stores JSON objects with the data s that allow authentication of the request.

With a secure token built in, it is mathematically impossible to decode the signature without having the application's key secret. However, once in possession of the secret, any application can decode the signature and verify that it is valid. This is done by generating a signature using the header and payload provided by the client, and then we compare this signature generated with the one present in the token sent by the client. Once the signatures are identical, we can allow the client access to a restricted area of our application.

https://jwt.io/

SessionStorage and LocalStorage

SessionStorage

sessionStorage is similar to localStorage , the only difference is that while the data stored in localStorage does not expire, the data in sessionstorage has its data cleared when the page session expires. The page session it lasts while the browser is open and keeps on reloading the page.
Web storage can be simplistically seen as an improvement over cookies, offering much greater storage capacity. The available size is 5MB, which is considerably more space to work with than a typical 4KB cookie.
Data is not sent back to the server for each HTTP request (HTML, images, JavaScript, CSS, etc) — reducing the amount of traffic between the client and the server.
Data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
Works on same-origin policy. Therefore, stored data will only be available from the same source.

LocalStorage

Use localStorage to store temporary variables.

It is similar to localStorage.

Changes are only available per window (or in browsers like Chrome and Firefox). Changes made are saved and made available for the current page as well as future visits to the site in the same window. Once the window is closed, the storage is deleted
Data is only available within the window/tab in which it was defined.
Data is not persistent, i.e. it will be lost when the window/tab is closed. Like localStorage, it works on the same origin policy. Therefore, stored data will only be available from the same source.

Local and Session Storage Considerations

Both localStorage and sessionStorage extend from Storage. There is no difference between them, except for the non-persistence of sessionStorage.

The non-persistence as described above is in the sense that sessionStorage is only available for the window that created the data until that window is closed, when opening another window (or tab) such data will not be available.

In contrast to sessionStorage, when creating data in localStorage this data will be available for any tab/window even if the user closes the window, restarts the system, etc.

For example, assuming you want to save the username and password to log in, you might choose to store this data in sessionStorage for security reasons and save the user settings in localStorage.

Real World Application

Store a user token. In this step, you will store the user token. You will implement different token storage options and learn the security implications of each approach. Finally, you'll learn how different approaches will change the user experience as they open new tabs or close a session.

At the end of this step, you can choose a storage approach based on your application's goals.

There are several options for storing tokens. Each option has costs and benefits. Briefly, the options are: store in memory JavaScript, store sessionStorage, store localStorage and store in a cookie. The main tradeoff is security. Any information stored outside of the current application's memory is vulnerable to Cross-Site Scripting (XSS) attacks.

The danger is that if a malicious user is able to load code into your application, they can access localStorage, sessionStorage, and any cookies that are also accessible to your application.

The benefit of memoryless storage methods is that you can reduce the number of times a user will need to log in to create a better user experience.

This tutorial will cover sessionStorage, localStorage, Cookies and HTTP Only as these are more modern.

Session Storage To test the benefits of out-of-memory storage, convert in-memory storage to sessionStorage. Open App.js:

Using ReactJs frontend client for user interfaces.

You must have basic and intermediate knowledge about ReactJs for cunderstand more easily the deployment of a secure and modern authentication service, widely recommended and used by the open source community to authenticate a user to a web system.

What are the vulnerabilities?

Both methods come with potential related security issues:

Vulnerability Method

XSS local storage - cross-site scripting
CSRF Cookies - Cross-Site Request Forgery

An XSS vulnerability allows an attacker to inject JavaScript into a website.
A CSRF vulnerability allows an attacker to take actions on a website through an authenticated user.

How can I get around this?

If local storage can be exploited by third-party scripts (such as those found in browser extensions) and if authentication can be spoofed with cookies, where is it acceptable to put client state?

In single page app authentication using cookies in Auth0 docs, we learned that if your app:

It is served to the customer using its own backend
Has the same domain as your backend
Makes API calls that require authentication to your backend
So there is a way to use cookies for authentication securely.

UNDER DEVELOPMENT AND CONSTRUCTION

Links and References:

https://owasp.org/www-community/HttpOnly

https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Cookies

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/pt-BR/docs/Web/API/Window/sessionStorage

https://www.taniarascia.com/full-stack-cookies-localstorage-react-express/

Deploy ReactJS on Firebase Hosting

Guiller — Mon, 14 Mar 2022 00:20:11 +0000

Useful for you, consider buying me a coffee. Thanks!

Please if this is useful and helps in your purpose, consider offering me a coffee, thank you, so we can evolve together!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

First we need you to have knowledge in React, NodeJS, Java Script, GIT, FRONTEND, Deploy.

https://console.firebase.google.com/

Create a new project with the name. Okay, now that we have the project created we can use several Firebase tools, one of them is Hosting, but feel free to use others, in this article we will only deal with hosting.

In the Firebase dashboard click on Hosting

You need a React frontend project already ready, and then we will build this project on firebase hosting, we will also use the domain provided by them, but of course we can change it in the future.

You will need to have the Firebase dependency package for the Node js

Install the firebase-tools package globally, this package will be installed on your computer and not in the project itself. This firebase utility will help us to run commands and connect that project we created in the firebase hosting.
Run the command:

npm install -g firebase-tools

Let's go to the console shell, inside the React project folder

I'll use this React project as an example:

https://github.com/guillerbr/ghd-sites

Clone the project and enter the folder:

Install the application, packages and dependencies.

npm install

Inside the root of your React project, type the command to build (build).

npm run-script build

or:

npm build

Then npm creates the static files already transpiled and configured to be lightweight files. After running the command it will create a build folder where the files we need will be.

Now we need to link our React application to our Firebase Hosting services. For this we will use the firebase-tools that we installed at the beginning.
Type the command:

firebase login

You need to be authenticated to Google Firebase account with your browser, after the above command Google may ask for some verification to link your application in shell console, your Firebase account in browser. If Google opens the Browser and asks for account authentication. Accept and complete the operation.

Ready! The console says I'm authenticated and gives my email.

Inside the project root, let's type the commands for final configurations.
Type the command:

firebase init

Accept the confirmation, and you will have these options in the console:

Choose option:

Hosting: Configure files for Firebase Hosting and (optionally) set up Guithub Action deploys

Now we will have the new configuration step:

Choose option:

Use an existing project

A list of projects and their names will appear. Now we need to choose the name of the project we created in firebase. Mine is ghdsites2

Now we will drop into the public directory configuration part.

Now type the command:

build

This question will appear:

Configure as a single-page app (rewrite all urls to /index.html)? (y/n)

Choose option:

yes

This question will appear:

File build/index.html already exists. Overwrite? (y/n)

Choose option:

no

Now we will go to the final part of construction.
Type the command:

firebase deploy

READY!
FINALLY!

After doing all these procedures, the firebase console will inform you that the process was completed successfully and your application is already hosted with a domain and ready to be accessed.

Deploy API Node, Adonis, Mysql AWS Ubuntu

Guiller — Sat, 03 Jul 2021 00:44:08 +0000

Deploy de produção completo API Node/Adonis, Mysql, Ubuntu 18/20 no servidor cloud AWS.

Criar uma máquina no serviço ec2 da Aws. Ubuntu Server 18.04 ou 20

sudo apt-get update

sudo apt-get upgrade

Instalar o Nodejs na versão 14 TLS

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

sudo apt -y install nodejs

Verifique a instalação e versão.

node  -v

A versão deve ser igual ou superior a 14.17

-Versão do Nodejs instalada:

v14.17.2

Verifique o NPM e sua versão:

npm -v

Instalar o Adonis Framework Global

Instalar o Mysql-Server

Comando de instalação:

sudo apt install mysql-server

Instalando da forma correta e segura siga esse exemplo:

https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04-pt

Verifique se o Mysql foi instalado corretamente e se esta funcionando.

systemctl status mysql.service

Se tudo estiver certo, o resultado será esse:

Agora vamos trocar a senha do usuário padrão do mysql, o root.

Entre no Mysql, com o comando:

sudo mysql

Agora alterar/adicionar uma senha para o usuário root.

Altere 'you new password' para sua senha atual.

ALTER USER 'root'@'localhost' IDENTIFIED BY 'your new password';

Altere 'you new password' para sua senha atual.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your new password';

Resposta do Mysql:

Query OK, 0 rows affected (0.01 sec)

Criando um novo banco de dados para nossa aplicação:

sudo mysql -u root -p

Digite sua senha cadastrada no processo anterior.

Pronto! Dentro do MYSQL!

Crie um novo banco de dados:

CREATE DATABASE my_name_database;

Veja o novo banco criado:

SHOW DATABASES;

Agora poderemos incluir o processo em nosso arquivo .env, fazendo a migração do banco de dados para o nosso banco recém criado. Se tudo estiver correto poderemos fazer as migrations sem problemas.

Você pode usar outros Banco de Dados ou ORMs e coisas do tipo, você pode fazer isso usando qualquer outra ferramenta nesse sentido, neste exemplo usaremos o Node-JS com AdonisFramework-JS, por isso algumas particularidades.

Download do projeto API Service Backend. Projeto usando Nodejs/Adonis Framework e Mysql Database.

O projeto está aberto no Github:
https://github.com/Utwo/adonis-realworld-example-app

Criar um novo usuário Linux dentro do seu console do Ubuntu 18 ou 20. Toque novo_usuario pelo seu usuário.

sudo adduser novo_usuario

Cadastre sua senha passa esse usuário.

Como conceder a um usuário privilégios root

sudo /usr/sbin/visudo

Altere o arquivo, inserindo seu usuário e o total privilégio.

Adicionando o nome do usuário e as mesmas permissões como root sob a especificação de privilégios do usuário irá conceder-lhes os privilégios sudo.

# User privilege specification
root            ALL=(ALL:ALL) ALL 
novo_usuario    ALL=(ALL:ALL) ALL

Entre na sessão desse novo usuário criado:

su - novo_usuario

Pronto! Verifique de estar logado com seu usuário.

myuser@ip-122-34-1-200:~$

Instale o Adonis-Cli Framework Globalmente no servidor:

sudo npm install -g adonis-cli

Instale o PM2 Framework Globalmente para Hosting e Deploy da nossa aplicação:

sudo npm install -g pm2

Processo completo de instalação, configuração e migração do banco de dados.

Faça o download do projeto para o local do seu usuário.

O projeto está aberto no Github:
https://github.com/Utwo/adonis-realworld-example-app

git clone https://github.com/Utwo/adonis-realworld-example-app

Entre no projeto:

cd adonis-realworld-example-app

Instale a aplicação e os pacotes:

sudo npm install

Alterar o arquivo .env.exemple para .env:

mv .env.exemple .env

Instale a Adonis dentro da sessão do seu usuário recém criado:

sudo npm i --global @adonisjs/cli

Instale o PM2 dentro da sessão do seu usuário recém criado:

sudo npm install -g pm2

Gerando a chave única da aplicação:

adonis key:generate

Entre no arquivo .env para configurar sua aplicação:

nano .env

Altere suas credências de acesso ao banco de dados no arquivo .env

EM CONSTRUÇÃO...

Referências:

https://wime.com.br/2013/06/06/como-adicionar-e-excluir-usuarios-no-ubuntu-12-04-e-centos-6/

https://www.howtoforge.com/tutorial/how-to-deploy-nodejs-applications-with-pm2-and-nginx-on-ubuntu/

https://dev.to/romainlanz/deploy-your-adonis-website-17ec

https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04-pt

https://stackoverflow.com/questions/51008807/nodejs-mysql-client-does-not-support-authentication-protocol

https://scotch.io/tutorials/deploying-adonisjs-5-to-digitalocean

https://computingforgeeks.com/install-node-js-14-on-ubuntu-debian-linux/

Autenticação Cookies HTTP, HTTP Only, JWT, SessionStorage,LocalStorage, com ReactJs Context API e Node no Backend

Guiller — Sun, 27 Jun 2021 01:48:49 +0000

Útil para você, considere me pagar um café. Obrigado!
Useful for you, consider buying me a coffee. Thanks!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Visão geral

O objetivo desta artigo é apresentar, discutir e fornecer técnicas de mitigação específicas sobre as melhores práticas de autenticação e sessão de usuários, usando Cookies, Http Only, JWT, Sessão, LocalStorage, e outros métodos.

Cookies Http

Um cookie HTTP (um cookie web ou cookie de navegador) é um pequeno fragmento de dados que um servidor envia para o navegador do usuário. O navegador pode armazenar estes dados e enviá-los de volta na próxima requisição para o mesmo servidor. Normalmente é utilizado para identificar se duas requisições vieram do mesmo navegador — ao manter um usuário logado, por exemplo. Ele guarda informações dinâmicas para o protocolo HTTP sem estado.

Cookies são usados principalmente para três propósitos:

Gerenciamento de sessão:

Logins, carrinhos de compra, placar de jogos ou qualquer outra atividade que deva ser guardada por um servidor.

Personalização:

Preferências de usuário, temas e outras configurações.

Rastreamento:

Registro e análise do comportamento de um usuário.

Podemos definir o tempo de expiração para cada cookie
O limite de 4K é para o cookie inteiro, incluindo nome, valor, data de expiração, etc. Para suportar a maioria dos navegadores, mantenha o nome abaixo de 4000 bytes e o tamanho geral do cookie abaixo de 4093 bytes.
Os dados são enviados de volta ao servidor para cada solicitação HTTP (HTML, imagens, JavaScript, CSS, etc) — aumentando a quantidade de tráfego entre o cliente e o servidor.

Http Only

O que é HttpOnly?

Acordo com a Microsoft Developer Network , HttpOnly é um sinalizador adicional incluído em um cabeçalho de resposta HTTP Set-Cookie. Usar o sinalizador HttpOnly ao gerar um cookie ajuda a mitigar o risco de o script do lado do cliente acessar o cookie protegido (se o navegador oferecer suporte).

Para se prevenir de ataques cross-site scripting (XSS), os cookies HttpOnly são inacessíveis para a API JavaScript Document.cookie (en-US); eles são enviados só para o servidor. Por exemplo, cookies que persistem sessões de servidor não precisam estar disponíves para o JavaScript, e portanto a diretiva HttpOnly deve ser configurada.



_Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly_

Um cookie HttpOnly é uma tag adicionada a um cookie do navegador que impede que os scripts do lado do cliente acessem os dados. Ele fornece uma porta que evita que o cookie especializado seja acessado por qualquer coisa que não seja o servidor. Usar a tag HttpOnly ao gerar um cookie ajuda a reduzir o risco de scripts do lado do cliente acessarem o cookie protegido, tornando esses cookies mais seguros.

O exemplo abaixo mostra a sintaxe usada no cabeçalho de resposta HTTP:



Set-Cookie: `=“[; “=“]` `[; expires=“][; domain=“]` `[; path=“][; secure][; HttpOnly]`

Se o sinalizador HttpOnly for incluído no cabeçalho de resposta HTTP, o cookie não poderá ser acessado por meio do script do lado do cliente. Como resultado, mesmo que exista uma falha de script entre sites (XSS) e um usuário acesse acidentalmente um link que explora a falha, o navegador não revelará o cookie para terceiros.

Aqui está um exemplo - digamos que um navegador detecte um cookie contendo o sinalizador HttpOnly. Se o código do lado do cliente tentar ler o cookie, o navegador retornará uma string vazia como resultado. Isso ajuda a evitar que códigos maliciosos (geralmente cross-site scripting (XSS)) enviem dados para o site de um invasor.

JWT

Autenticação de usuário utilizando o mecanismo chamado JWT (JSON Web Token)

Estratégia de autenticação para APIs em REST simples e segura. Trata-se de um padrão aberto para autenticações web e é totalmente baseada em requests JSON entre o cliente e servidor. Seu mecanismo de autenticação funciona da seguinte maneira:

O cliente faz uma solicitação uma única vez ao enviar as credenciais de login e senha;
O servidor valida as credenciais e, se tudo estiver certo, ele retorna para o cliente um JSON com um token que codifica dados de um usuário logado no sistema;
Após receber o token, o cliente pode armazená-lo da forma que preferir, seja por LocalStorage, SessionStorage, Cookies e HTTP Only e ou outros mecanismos de armazenamento do lado do cliente;
Toda vez que o cliente acessa uma rota que requer autenticação, ele apenas envia esse token para a API para autenticar e liberar os dados de consumo;
O servidor sempre valida esse token para permitir ou bloquear uma solicitação de cliente.

JWT (JSON Web Token) é um método RCT 7519 padrão da indústria para realizar autenticação entre duas partes por meio de um token assinado que autentica uma requisição web. Esse token é um código em Base64 que armazena objetos JSON com os dados que permitem a autenticação da requisição.

Com um token construído e seguro, é matematicamente impossível decodificar a assinatura sem ter o segredo-chave da aplicação. Porém, uma vez em posse do segredo, qualquer aplicação pode decodificar a assinatura e verificar se ela é válida. Isso é feito gerando uma signature utilizando o header e o payload fornecidos pelo cliente para então comparamos essa signature gerada com a presente no token enviado pelo cliente. Uma vez que as assinaturas sejam idênticas, podemos permitir o acesso do cliente a uma área restrita da nossa aplicação.

https://jwt.io/

SessionStorage e LocalStorage

SessionStorage

A sessionStorage é similar ao localStorage , a única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página.
O armazenamento na Web pode ser visto de maneira simplista como uma melhoria nos cookies, oferecendo uma capacidade de armazenamento muito maior. O tamanho disponível é de 5 MB, o que representa consideravelmente mais espaço para trabalhar do que um cookie típico de 4KB.
Os dados não são enviados de volta ao servidor para cada solicitação HTTP (HTML, imagens, JavaScript, CSS, etc) — reduzindo a quantidade de tráfego entre o cliente e o servidor.
Os dados armazenados no localStorage persistem até serem excluídos explicitamente. As alterações feitas são salvas e estão disponíveis para todas as visitas atuais e futuras ao site.
Funciona na política de mesma origem. Portanto, os dados armazenados só estarão disponíveis na mesma origem.

LocalStorage

Usam o localStorage para armazenar variáveis temporárias.

É semelhante ao localStorage.

As alterações só estão disponíveis por janela (ou em navegadores como o Chrome e o Firefox). As alterações feitas são salvas e disponibilizadas para a página atual, bem como futuras visitas ao site na mesma janela. Depois que a janela é fechada, o armazenamento é excluído
Os dados estão disponíveis somente dentro da janela / guia na qual foram definidos.
Os dados não são persistentes, isto é, serão perdidos quando a janela / guia for fechada. Como o localStorage, ele funciona na política de mesma origem. Portanto, os dados armazenados só estarão disponíveis na mesma origem.

Considerações Local e Session Storage

Ambos localStorage e sessionStorage se extendem de Storage. Não há diferença entre eles, exceto para a não-persistência de sessionStorage.

A não-persistência como descrito acima é no sentido de que sessionStorage se faz disponível apenas para a janela que criou os dados até que tal janela seja fechada, ao abrir outra janela(ou aba) tais dados não estarão disponíveis.

Em contrapartida de sessionStorage, ao criar dados em localStorage esses dados estarão disponíveis para qualquer aba/janela mesmo que o usuário encerre a janela, reinicie o sistema, etc.

Um exemplo, supondo que você deseja salvar o nome de usuário e senha para realizar um login, é provável que você opte por armazenar esses dados em sessionStorage por motivos de segurança e salvar as configurações de usuário em localStorage.

Aplicação do Mundo Real

Armazenar um token de usuário.Nesta etapa, você armazenará o token do usuário. Você implementará diferentes opções de armazenamento de tokens e aprenderá as implicações de segurança de cada abordagem. Por fim, você aprenderá como diferentes abordagens mudarão a experiência do usuário à medida que ele abre novas guias ou fecha uma sessão.

Ao final desta etapa, você poderá escolher uma abordagem de armazenamento com base nos objetivos de seu aplicativo.

Existem várias opções para armazenar tokens. Cada opção tem custos e benefícios. Resumidamente, as opções são: armazenar na memória JavaScript, armazenar sessionStorage, armazenar localStorage e armazenar em um cookie . A principal compensação é a segurança. Qualquer informação armazenada fora da memória do aplicativo atual é vulnerável a ataques de Cross-Site Scripting (XSS) .

O perigo é que, se um usuário mal-intencionado é capaz de carregar código em sua aplicação, ele pode acessar localStorage, sessionStorage e qualquer cookie que também é acessível a sua aplicação.

O benefício dos métodos de armazenamento sem memória é que você pode reduzir o número de vezes que um usuário precisará efetuar login para criar uma melhor experiência do usuário.

Este tutorial irá cobrir sessionStorage, localStorage, Cookies e HTTP Only, uma vez que estes são mais modernos.

Armazenamento de Sessão Para testar os benefícios de armazenamento fora da memória, converta o armazenamento na memória para sessionStorage. Aberto App.js:

Usando o cliente frontend ReactJs para interfaces para o usuário.

Você deve ter conhecimentos básicos e intermediários sobre ReactJs para compreender mais facilmente a implantação de um serviço de autenticação segura e moderna, amplamente recomendada e usada pela comunidade de software livre para autenticar um usuário em um sistema web.

Quais são as vulnerabilidades?

Ambos os métodos vêm com possíveis problemas de segurança relacionados:

Método Vulnerabilidade

Armazenamento local XSS - script entre sites
Cookies CSRF - Falsificação de solicitação entre sites

Uma vulnerabilidade XSS permite que um invasor injete JavaScript em um site.
Uma vulnerabilidade CSRF permite que um invasor execute ações em um site por meio de um usuário autenticado.

Como posso contornar isso?

Se o armazenamento local pode ser explorado por scripts de terceiros (como aqueles encontrados nas extensões do navegador) e se a autenticação pode ser falsificada com cookies, onde é aceitável colocar o estado do cliente?

Na autenticação de aplicativo de página única usando cookies nos documentos do Auth0, aprendemos que se seu aplicativo:

É servido ao cliente usando seu próprio back-end
Tem o mesmo domínio que seu back-end
Faz chamadas de API que requerem autenticação para seu back-end
Então há uma maneira de usar cookies para autenticação com segurança.

EM DESENVOLVIMENTO E CONSTRUÇÃO

Links e Referências:

https://owasp.org/www-community/HttpOnly

https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Cookies

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/pt-BR/docs/Web/API/Window/sessionStorage

https://www.taniarascia.com/full-stack-cookies-localstorage-react-express/

https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications#prerequisites

https://www.devmedia.com.br/como-o-jwt-funciona/40265

Deploy ReactJS no Firebase Hosting

Guiller — Wed, 18 Nov 2020 04:10:08 +0000

Útil para você, considere me pagar um café. Obrigado!
Useful for you, consider buying me a coffee. Thanks!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Primeiramente precisamos que você tenha conhecimentos em React, Node, Java Script, GIT, FRONTEND, Deploy.

Por favor se isso for útil e ajudar no seu propósito, considere me ofertar um café, obrigado, que possamos evoluir juntos!
Please if this is useful and helps in your purpose, consider offering me a coffee, thank you, so we can evolve together!

Envie atráves da rede Ethereum -
Send over the network Ethereum -

0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Você precisa de uma conta no serviço Firebase,

https://firebase.google.com/

Vá para o console do Firebase
https://console.firebase.google.com/

Crie um novo projeto com o nome. Pronto, agora que temos o projeto criado podemos utilizar várias ferramentas do Firebase, uma delas é a Hosting, mas fique livre para utilizar outras,nesse artigo trataremos apenas de hospedagem.

No painel do Firebase clique em Hosting

Você precisa de um projeto frontend em React já pronto, e então faremos a construção (build) desse projeto no hosting da firebase, usaremos também o domínio fornecido por eles, mas claro futuramente podemos alterar.

Você precisará ter o pacote de dependência do Firebase para o Node js

Instale o pacote do firebase-tools globalmente,esse pacote estará instalado no seu computador e não no projeto em si.Esse utilitário do firebase , nos ajudará a executar comandos e conectar aquele projeto que criamos no hosting do firebase.
Execute o comando:



npm install -g firebase-tools

Vamos para o console shell, dentro da pasta do projeto React

Usarei esse projeto React como exemplo:

https://github.com/guillerbr/ghd-sites

Clone o projeto e entre na pasta:

Instale a aplicação, pacotes e dependências.



npm install

Dentro da raiz do seu projeto React, digite o comando para a construção (build).



npm build



npm run-script build

Então o npm cria os arquivos estáticos já transpilados e configurados para serem arquivos leves. Após rodar o comando ele criará uma pasta build onde estará os arquivos que precisamos.

Agora precisamos ligar nossa aplicação React ao nosso serviços de Hosting do Firebase.Para isso usaremos o firebase-tools que instalamos no começo.
Digite o comando:



firebase login

Você precisar estar autenticado na conta do Google Firebase com seu navegador, após o comando acima o Google pode pedir alguma verificação para ligar sua aplicação no console Shell, a sua conta no Firebase no navegador. Se o Google abrir o Browser e pedir autenticação da conta. Aceite e conclua a operação.

Pronto! O console informa que estou autenticado e informa meu e-mail.

Dentro da raiz do projeto, vamos digitar os comandos para configurações finais.
Digite o comando:



firebase init

Aceite a confirmação, e terá essas opções no console:

Escolha a opção:



Hosting: Configure files for Firebase Hosting and (optionally) set up Guithub Action deploys

Agora teremos a nova etapa de configuração:

Escolha a opção:



Use an existing project

Irá aparcer um lista de projetos e seus nomes.Agora precisamos escolher o nome do projeto que criamos no firebase.O meu é ghdsites2

Agora cairemos na parte de configuração do diretório público.

Agora digite o comando:



build

Aparecerá essa pergunta:



Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Escolha a opção:

yes

Aparecerá essa pergunta:



File build/index.html already exists. Overwrite? (y/N)

Escolha a opção:

no

Agora iremos para a parte final de construção.
Digite o comando:



firebase deploy

PRONTO!
FINALMENTE!

Depois de fazer todos esse procedimentos, o console do firebase informará que o processo foi finalizado com sucesso e sua aplicação já está hospedada com um domínio e pronta para ser acessada.

Tutorial em Vídeo:
https://www.youtube.com/watch?v=XoxvXleVZV4

Node,Mongo, Mongoose Essentials - CRUD App for Relational Database

Guiller — Sun, 02 Aug 2020 18:32:30 +0000

https://www.youtube.com/watch?v=5H0geGYv_A0

https://dev.to/mkilmer/how-create-relationships-with-mongoose-and-node-js-with-real-example-43ei

https://medium.com/employbl/build-database-relationships-with-node-js-and-mongodb-74e35c315cf

https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/Express_Nodejs/mongoose

Documentar uma API em Laravel com o Apirus Ferramenta visual

Guiller — Wed, 10 Jun 2020 21:58:00 +0000

Útil para você, considere me pagar um café. Obrigado!
Useful for you, consider buying me a coffee. Thanks!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Referência:
https://github.com/vaneves/apirus

Crie um novo projeto Laravel,dentro dele, adicione a Apirus ferramenta ao projeto, digite o comando de instalação:

composer create-project --prefer-dist vaneves/apirus

Se for instalar fora de um projeto Laravel,use o comando:

composer create-project --prefer-dist vaneves/apirus meu_projeto

Entre na pasta apirus.
Altere o nome do arquivo .env.exemple para .env

cp .env.example .env

No arquivo .env altere as variáveis de ambientes.

API_URL=http://example.com/api

SOURCE=
DIST=
THEME=
HIGHTLIGHT=

Entre na pasta apirus,e depois em DOCS,será nesse diretório que devemos enviar a documentação da nossa API,no formato markdown,para que o interpretador nos forneça uma interface visual e de fácil manipulação e teste.

Dentro do diretório /docs atualize sua documentação enviando seu novo diretório com os arquivos.

Dentro da sua pasta DOCS,deve ter algo como isso.Arquivos em
Markdown .md que irão formatar os código para que a interface gráfica da ferramenta,possa nos fornecer uma documentação e teste mais amigável.

Após fazer o processo,precisamos buildar as atualizações,digitaremos os seguintes comandos:

Entre na pasta apirus

-localhost/apirus

Digite o comando inicial

Incialmente:

php apirus

Digite o comando de finalização

E para atualizar a documentação digite esse comando após atualizar seu diretório em /docs. Comando:

php apirus --src docs -h monokai

Pronto,tudo certo,podemos ter como resultado a documentação da api em:

http://localhost/meu_projeto/public/

Em desenvolvimento/finalização
Vídeo Tutorial:
https://www.youtube.com/watch?v=qKJX56K6QdY