Como podemos ter um fluxo amigável em nossas aplicações descentralizadas, como remover a complexidade e tornar o acesso a web 3.0 cada vez mais simples? Nesse artigo vamos falar sobre isso e ensinar como integrar a Torus em sua dApp.
Simplicidade de autenticação na sua dApp
Quem já está nesse mudo de cripto e blockchain já deve ter percebido que um dos maiores desafios é a usabilidade, e isso realmente é um dos fatores de sucesso para que produtos cresçam. De nada adianta a tecnologia ser brilhante se ela não for acessível para todos. Pensando nisso, nós da Go vamos explicar como a Torus permite que o fluxo de entrada em uma dApp seja mais simples e amigável.
Se você quiser saber mais sobre a Torus, temos um blog aqui.
De forma resumida a Torus é uma carteira blockchain cuja sua principal missão é fornecer acesso simples e seguro às criptomoedas, facilitando que os usuários consigam se conectar usando apenas seu email ou rede social.
Neste tutorial faremos “um passo a passo” de como se conectar a Torus Wallet usando apenas HTML e javascript em sua dApp.
Ahh se vc não sabe o que é uma dApp, acesse nosso blog aqui.
Voltando..
Aqui está o que vamos cobrir:
- Vantagens de usar a Torus Wallet.
- Como se cadastrar na Torus.
- Como conectar a Torus wallet a um projeto simples com HTML e Javascript .
Vantagens de usar a Torus Wallet.
Uma das principais vantagens de se usar a Torus Wallet em sua dApp é que ela facilita a integração do usuário a blockchain sem a necessidade de baixar algum aplicativo, já que a integração é feita por meio de um login. O cadastro e o login são feitos por meio das redes sociais ou um email de sua preferência.
Nas imagens a seguir você pode ver a quantidade de opções que existem para o usuário se conectar e criar sua wallet de forma bem simples.
Torus Wallet usa o padrão passwordless e criam o Open Login, adicionalmente eles integraram uma conexão direta com Ethereum e outros blockchains por meio de um estilo similar a MetaMask.
Torus é Open Login, isso significa que ela usa um conjunto de autenticação que combina a simplicidade da autenticação sem senha com a segurança da PKI sem custódia da sua chave privada. E também:
- Login sem senha, SSO, Face ID / TouchID
- Gerenciar fluxos de dados para atingir a conformidade com GDPR, CPRA ou CCPA
- Conecte-se a qualquer blockchain.
- Capaz de operar com outros aplicativos descentralizados
- Vem com provedor fiat-to-crypto
Como se cadastrar na Torus
Nesse tutorial iremos nos cadastrar através de um e-mail. Primeiro acesse o link da pagina de login https://app.openlogin.com/ e você será redirecionado a página de login da Torus.
Passo 1: escolher qual opção de login você deseja criar sua conta, lembrando que você pode escolher outras redes sociais para selecionar clicando em “OR”. Depois de clicar em Continue with Google, seremos redirecionados à página de criar uma conta google.
Crie um email novo ou logue com um email existente, se caso, já estiver um email válido salvo em seu dispositivo, irá aparecer seu e-mail como sugestão de login. Após digitar seu e-mail digite sua senha de e-mail.
E você será redirecionado a página home de sua carteira. Caso você seja direcionado a página de verificação de login, siga o tutorial abaixo.
Você receberá em seu e-mail uma frase de confirmação. Lembrando que não é aconselhável compartilhar essa frase pois, ela confirma seu acesso à plataforma.
Copie sua frase de backup e cole na página de confirmação de login.
Ao inserir sua frase de backup e confirmar, você será redirecionado à página home de sua wallet e para finalizar a parte de como se cadastrar na Torus Wallet.
Agora vamos colocar mão na massa
#showmethecode
Para este tutorial usaremos o Visual Studio Code para desenvolver o nosso projeto, mas pode ser qualquer um de sua preferência.
Crie sua pasta de desenvolvimento aqui a chamaremos de goEstudos mas pode ser o nome que você quiser.
Adicionaremos um arquivo index.html para visualizar a aplicação na tela e criaremos uma pasta js e dentro criaremos um arquivo script.js para ler os arquivos javascript.
Para poder visualizar o que estamos fazendo iremos baixar uma extensão no VS code chamada de Live server, por quê esse tipo de aplicação precisa de um local Host para testar a nossa dApp, apenas abrindo o arquivo index na pasta provavelmente não deva funcionar.
Após baixar esta extensão irá aparecer uma opção escrita Go live como a imagem acima mostra. Caso não apareça reinicie seu Visual Studio code.
Uma das grandes vantagens de implementar essa wallet em seu projeto é que ela fornece toda a documentação de fácil interpretação, ou seja, não precisa ser um gênio da programação para adicioná-la a sua dApp.
Na página principal da Torus temos a opção de ler a documentação. E é para lá que vamos nesse tutorial.
Após abrir a nova página entraremos na página onde ela nos mostra como integrar a carteira na nossa aplicação.
Esta página nos dará acesso ao arquivo completo. Para a sua felicidade, copie e cole em sua dApp. Como nós desenvolvedores prezamos pela organização dos nossos códigos, nós iremos recortar o código javascript da página index e colar na pasta script em nossa dApp. Deve ficar assim:
Como recortamos o arquivo JS do index devemos importar essa pasta no arquivo index. Atenção: É muito importante importar os arquivos nesta ordem para que funcione corretamente. Deve ficar como a imagem abaixo.
Após todos os arquivos em seus devidos lugares, já podemos visualizar clicando no botão Go live no Visual Studio Code, ao clicar uma página nova irá abrir automaticamente.
Após abrir vamos clicar em login, uma outra página de login com a Torus deverá aparecer em sua tela, em uma nova aba. O próximo passo é clicar no botão de login, após esta ação abrirá automaticamente uma pequena aba solicitando o tipo de login que você vai preferir escolher.
Após o procedimento de login seus dados aparecerão na tela da sua aplicação.
Uma das outras vantagens que a Torus oferece aos seus usuários é um botão pop up abaixo da tela que clicando mostra suas informações.
Ao visualizar o pop up vemos algumas opções: se clicarmos em open wallet teremos acesso a página home de nossa carteira com a opção de área de transferência, compra de ativos, lista de atividades, configurações e área de pesquisa e chat para perguntas.
Conclusão
A tecnologia não pára de nos surpreender e a cada dia se torna mais acessível para as pessoas. Estamos caminhando para um mundo onde tudo se tornará mais acessível e sem a necessidade de intermediários. E a Torus faz parte desse pontapé inicial tornando a experiência do usuário mais fácil e prático ao entrar no mundo blockchain.
Caso tenha interesse em se aprofundar ainda mais nesse assunto, não deixe de ler nossos outros artigos. Também nos siga em nossas redes sociais que estão no rodapé do site. =)
Link torus wallet login : https://app.openlogin.com/
link torus wallet get started : https://toruswallet.io/
link Torus wallet Documentação : https://docs.tor.us/wallet/get-started
link Torus integration Builder : https://docs.tor.us/integration-builder?b=wallet&chain=Ethereum&lang=HTML
Link blog goBlockchain sobre Torus Wallet : https://goblockchain.io/torus-wallet-a-carteira-de-um-clique/
Repositório no Github : wallaceAzevedo/goEstudos: integration biulder with Torus wallet (github.com)
