Autentique seu aplicativo Next.js usando Auth0

A autenticação, ou confirmação da identidade de um usuário em um aplicativo, é fundamental para implementação em aplicativos da web. A autenticação cria um sistema para verificar as credenciais do usuário por meio de nomes de usuário, senhas, tokens, impressões digitais, reconhecimento facial ou perguntas de segurança.

Os desenvolvedores geralmente ficam divididos entre construir seu próprio sistema de autenticação ou usar um serviço de terceiros. Neste artigo, veremos como implementar a autenticação em aplicativos Next.js usando Auth0 .

O que é Auth0?

De acordo com seus documentos, “ Auth0 é uma solução flexível e drop-in para adicionar serviços de autenticação e autorização ao seu formulários”. Basicamente, o Auth0 permite adicionar segurança aos seus aplicativos usando qualquer linguagem ou pilha. Alguns de seus recursos incluem:

Autenticação multifator: requer duas ou mais credenciais para acesso (ou seja, autenticação de dois fatores)
Login social : permite que você se inscreva e faça login em seu aplicativo usando suas redes sociais
Logon único: armazena credenciais, para que você não precise inseri-las a cada login
Analytics: ferramentas analíticas e de relatório

O Auth0 também vem com frameworks e SDKs para várias bibliotecas de front-end prontos para uso. Um deles é o SDK do Auth0 Next.js , que permite adicionar autenticação aos aplicativos Next.js usando Auth0.

SDK do Auth0 Next.js

Primeiro, vamos instalar o pacote Auth0 Next.js SDK do npm. Vamos configurar o Auth0 com base em nossas necessidades exclusivas de projeto e, em seguida, estaremos prontos para implementá-lo!

Com o SDK Auth0 Next.js, podemos adicionar autenticação aos nossos aplicativos usando métodos do lado do cliente e do lado do servidor. No back-end, usaremos rotas de API. No front-end, usaremos a API React Context .

Instalando Auth0

Primeiro, crie uma conta Auth0 . Navegue até o seu Painel Auth0 e clique nos aplicativos. Criar uma nova aplicação; usaremos um aplicativo da web normal.

Você verá um pop-up perguntando qual estrutura ou pilha você está usando. Escolha Next.js.

Clique na guia Aplicativos e selecione o aplicativo criado recentemente. Na guia Configurações , role até a subseção URIs do aplicativo e atualize os seguintes detalhes:

URLs de retorno de chamada permitidos: adicione http://localhost: 3000/api/auth/callback
URLs de logout permitidos: adicione http://localhost: 3000/

Nos snippets de código acima, adicionamos um URL de retorno de chamada para redirecionar os usuários depois que eles registram em nosso aplicativo e um URL de logout para redirecionar os usuários depois que eles se desconectam.

Em nosso painel Auth0, podemos configurar o tipo de autenticação que desejamos para nossos usuários, adicionar páginas de login e inscrição, adicionar registros de usuários e até mesmo adicionar um banco de dados para usuários. Agora, estamos prontos para criar nosso aplicativo Next.js!

Criação de um aplicativo Next.js

Para inicializar um aplicativo Next.js, recomendo usar Criar próximo aplicativo . Esta ferramenta CLI configura automaticamente tudo que você precisa para seu aplicativo. Execute o comando abaixo para criar um novo projeto:

npx create-next-app {nome do projeto}

Como alternativa, você pode usar o Yarn:

yarn create-next-app {nome do projeto}

Em seguida, vá para o diretório do projeto e inicie o servidor de desenvolvimento usando o comando abaixo:

cd {nome do projeto} && yarn run dev

Configurando Auth0 para Next.js

Agora, instalaremos a dependência @ auth0/next.js-auth0 em nosso aplicativo:

npm install @ auth0/nextjs-auth0

Usando o Yarn:

yarn add @ auth/nextjs-auth0

A seguir, vamos instalar o pacote dotenv, que usaremos para armazenar nossas variáveis de ambiente. Também adicionamos componentes estilizados, que usaremos para estilizar nosso aplicativo:

npm install dotenv styled-components

Usando o Yarn:

fios adicionar componentes estilizados dotenv

Crie um novo arquivo chamado.env no diretório raiz do seu projeto e adicione as seguintes credenciais, fornecidas pelo Auth0:

AUTH0_SECRET=”seu segredo de autenticação vai aqui”
AUTH0_BASE_URL=”http://localhost: 3000″
AUTH0_ISSUER_BASE_URL=”seu URL base de auth0″
AUTH0_CLIENT_ID=”seu ID exclusivo vai aqui”
AUTH0_CLIENT_SECRET=”seu segredo auth0 vai aqui”

O AUTH0_SECRET é um segredo de 32 caracteres usado para criptografar cookies e o AUTH0_CLIENT_SECRET pode ser encontrado no painel do Auth0 na guia Configurações.

Você pode ler mais sobre as configurações do Auth0 nos documentos.

Criação de rotas e componentes de aplicativos

Crie uma nova pasta chamada componentes dentro do diretório src em nosso aplicativo Next.js. Dentro da pasta de componentes, crie uma nova pasta chamada Navbar. Dentro do Navbar, crie um arquivo chamado Navbar.jsx.

Vamos criar um componente funcional chamado Navbar com dois links dinâmicos, um para fazer o login de um usuário e outro para desconectar um usuário:

//componentes/Navbar/Navbar.jsx importar {useUser} de”@ auth0/nextjs-auth0″;
importar estilizado de”componentes estilizados”; const Navbar=()=> { const {usuário}=useUser (); Retorna (

);
};

No código acima, criamos um componente funcional chamado Navbar. Dentro dele, inicializamos uma tag nav e adicionamos um h1 com o título de nosso aplicativo. Em seguida, verificamos se o usuário está logado. Se estiver, exibimos o botão Sair. Se eles não estiverem logados, renderizamos um botão Sign in.

A seguir, adicionaremos estilos ao nosso arquivo Navbar:

Nosso componente Navbar deve ser semelhante à imagem abaixo:

Construindo um componente de formulário

Nesta seção, construiremos um formulário para os usuários adicionarem notas a seus aplicativos. Construiremos um campo de entrada, um botão de envio e uma função para enviar nossa nota no componente de formulário.

Usaremos localStorage como banco de dados para armazenar nossas notas:

import {useState} de”react”;
importar estilizado de”componentes estilizados”;
importar {addNote} de”../../utils/utils”; Const Form=({hideForm, setRefresh})=> { const [título, setTitle]=useState (“”); const [content, setContent]=useState (“”); const SubmitHandler=(e)=> { e.preventDefault (); título && conteúdo && addNote (título, conteúdo); setTitle (“”); setContent (“”); hideForm (false); setRefresh (); };

No bloco de código acima, importamos o gancho useState do React e um objeto addNote do diretório de utilitários. Em seguida, criamos um componente de formulário que inclui um hideForm e uma propriedade setRefresh.

A seguir, adicionamos a função SubmitHandler para lidar com o envio de nossas notas. Para que uma nota seja enviada, ela deve conter um título e conteúdo.

Agora, vamos construir um componente e botões para enviar nossas notas usando a função acima:

Retorna (

Título da nota setTitle (e.target.value)} valor={título} type=”texto” nome=”título da nota” id=”título” placeholder=”por exemplo, sobre hoje” />

Conteúdo da nota

setContent (e.target.value)} valor={conteúdo} name=”note-content” id=”conteúdo” placeholder=”por exemplo, acordei 6 da manhã…” /> </div>
<p> <button type="submit"> Salvar nota </button> </FormWrapper> );<br />
}; </p>
<p> No bloco de código acima, criamos dois campos de entrada, um para adicionar o título da nota e outro para os usuários inserirem seu conteúdo. Por fim, adicionamos um botão de envio. </p>
<p> Para completar nosso diretório de componentes, precisamos construir um componente para uma nota. </p>
<h2> Construindo o componente de notas </h2>
<p> Agora, escreveremos uma função que atuará como um backbone para adicionar notas ao nosso aplicativo. Inicializaremos funções para editar e excluir uma nota depois que ela for adicionada por um usuário. O componente obterá um ID para nossas notas e o definirá como o estado de nosso aplicativo: </p>
<p>import {useState} de”react”;<br />
importar estilizado de”componentes estilizados”;<br />
import {editNote, deleteNote} de”../../utils/utils”; const Note=({title, id, content, setRefresh})=> { const [editar, setEdit]=useState (false); const [newTitle, setNewTitle]=useState (título); const [newContent, setNewContent]=useState (conteúdo); const submitHandler=(e)=> { e.preventDefault (); newTitle && newContent && editNote (id, newTitle, newContent); setEdit (false); setRefresh (); }; const deleteHandler=()=> { const ok=window.confirm (“Tem certeza que deseja excluir?”); if (ok) { deleteNote (id); setRefresh (); } }; </p>
<p> No código acima, inicializamos uma função Note, que leva título, id, conteúdo e setRefresh como adereços. Usando os ganchos useState, adicionamos o estado ao título, edição e newContent. Como fizemos com nosso componente de formulário, criamos uma função submitHandler para os usuários. </p>
<p> Para lidar com a exclusão de uma nota pelo usuário, criamos outra função chamada deleteHandler, que pede um alerta de confirmação antes de tentar excluir uma nota com base no ID da nota. </p>
<p> A seguir, criaremos um botão Editar para editar nossas notas e adicionaremos um botão Excluir para excluir postagens usando uma instrução condicional. </p>
<p>Retorna ( <Wrapper> {! editar? ( <botão className="edit-btn" onClick={()=> setEdit (true)} type=”botão” > Editar </button> ): nulo} {! editar? ( <button className="delete-btn"onClick={deleteHandler} type="button"> Excluir </button> ): nulo} {editar? ( <formulário onSubmit={submitHandler}>
<h4> Editar nota </h4>
<div> <input onChange={(e)=> setNewTitle (e.target.value)} valor={newTitle} type=”texto” nome=”título da nota” id=”título” placeholder=”por exemplo, sobre hoje” /> </div>
<div> <textarea onChange={(e)=> setNewContent (e.target.value)} valor={newContent} name=”note-content” id=”conteúdo” placeholder=”por exemplo, acordei 6 da manhã…” /> </div>
<p> <button type="submit"> Salvar </button> </form>
<p> ): ( <> </p>
<h3> {title} </h3>
<p> {conteúdo} </p>
<p> </> )} </Wrapper> );<br />
}; </p>
<p> No bloco de código acima, adicionamos campos de entrada para os usuários adicionarem notas. Também adicionamos os botões Editar e Excluir. Para editar uma entrada, atualizamos as notas do usuário usando o ID da entrada. </p>
<p> Observe os erros na tela que indicam que utils não está declarado. Criaremos uma nova pasta dentro de nosso src chamada utils que conterá a lógica para armazenar as notas do usuário no armazenamento local de seus dispositivos. </p>
<h2> Armazenamento e edição de notas </h2>
<p> Vamos escrever a lógica para esta tarefa no diretório utils. </p>
<h3> Adicionando notas do usuário ao armazenamento local: </h3>
<p>/** * Adiciona nota à lista de notas em localStorage * @param {*} título da nota do título * @param {*} corpo do conteúdo da nota */<br />
export const addNote=(título, conteúdo)=> { let notesArr=JSON.parse (localStorage.getItem (“next: note-app”)); if (notesArr?.length) { const newNote={ id: new Date (). getTime (), título, contente, }; const newNotesArr=[… notesArr, newNote]; localStorage.setItem (“next: note-app”, JSON.stringify (newNotesArr)); } senão { const newNote={ id: new Date (). getTime (), título, contente, }; const newNotesArr=[newNote]; localStorage.setItem (“next: note-app”, JSON.stringify (newNotesArr)); }<br />
}; </p>
<p> No código acima, exportamos o objeto addNote que contém um título e conteúdo. Em seguida, inicializamos o objeto e o passamos como JSON para o armazenamento local. Para garantir que os usuários não adicionem notas vazias, adicionamos um método que monitora o comprimento da matriz da nota do usuário e a armazena como strings JSON no armazenamento local. </p>
<p> Nosso componente deve ser semelhante à imagem abaixo: </p>
<p> <img decoding="async" src="https://br.atsit.in/wp-content/uploads/2021/07/autentique-seu-aplicativo-next-js-usando-auth0-2.png"width="680"height="552"/> </p>
<h3> Editando uma nota </h3>
<p> Nesta seção, criaremos uma função para editar uma nota depois que ela for adicionada ao armazenamento local do usuário: </p>
<p>** * Editar Nota Func * @param {*} id note id * @param {*} title novo título * @param {*} content novo conteúdo */<br />
export const editNote=(id, título, conteúdo)=> { let notesArr=JSON.parse (localStorage.getItem (“next: note-app”)); let noteIndex=notesArr.findIndex ((note)=> note.id===id); const selectedNote=notesArr [noteIndex]; const updatedNote={ id: selectedNote.id, título, contente, }; notesArr.splice (noteIndex, 1, updatedNote); localStorage.setItem (“next: note-app”, JSON.stringify (notesArr));<br />
}; </p>
<p> No bloco de código acima, analisamos uma nota para nosso armazenamento local como um arquivo JSON. Em seguida, recuperamos a nota que queremos editar, passando o ID da nota. Usando o método nativo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"> JavaScript Splice </a>, atualizamos o conteúdo de a nota, substituindo ou adicionando novos conteúdos a uma nota. </p>
<p> Nossa página de edição deve ser semelhante à imagem abaixo: </p>
<p> <img decoding="async" src="https://br.atsit.in/wp-content/uploads/2021/07/autentique-seu-aplicativo-next-js-usando-auth0-3.png"width="680"height="538"/> </p>
<h2> Renderizando nosso aplicativo </h2>
<p> Vamos navegar até nosso diretório api dentro de nossa pasta src. Dentro dele, vamos atualizar o index.js para renderizar todo o nosso aplicativo: </p>
<p>importar Cabeçalho de”próximo/cabeça”;<br />
import {useState, useEffect} de”react”;<br />
importar {useUser} de”@ auth0/nextjs-auth0″;<br />
importar estilizado de”componentes estilizados”;<br />
importar formulário de”../components/Form/Form”;<br />
importar Navbar de”../components/Navbar/Navbar”;<br />
import Note from”../components/Note/Note”; const App=()=> { const [showForm, setShowForm]=useState (false); const [notas, setNotes]=useState ([]); const [atualizar, setRefresh]=useState (false); const {usuário, isLoading, erro}=useUser (); useEffect (()=> { //Nossas notas do LocalStorage (nosso banco de dados) const store=JSON.parse (localStorage.getItem (“next: note-app”)); setNotes (armazenar); }, [atualizar]); Retorna ( <> <Head> <title> Aplicativo de nota Next.js com auth0 </title> <meta nome="descrição" content="Um projeto básico crud para ilustrar como usar o autho em um app next.js" /> <link rel="icon"href="/favicon.ico"/> </Head> <Wrapper> <Navbar/> {está carregando ? ( </p>
<p className="nodata-indicator"> Carregando… </p>
<p> ): erro? ( </p>
<p> {erro?.mensagem} </p>
<p> ): do utilizador ? ( <> {showForm? ( </p>
<article className="form-wrapper"> <Formulário setRefresh={()=> setRefresh (! atualizar)} hideForm={setShowForm} /> </article>
<p> ): ( </p>
<article className="form-wrapper"> <button onClick={()=> setShowForm (! showForm)} type=”button”> Adicionar nota </button> </article>
<p> )} {! notas?.comprimento? ( </p>
<div>
<p className="nodata-indicator"> Nenhuma nota disponível, clique no botão acima para adicionar </p>
</div>
<p> ): ( </p>
<article className="notes-wrapper"> {notes.map ((note)=> { Retorna ( <Nota chave={note.id} id={note.id} título={note.title} content={note.content} setRefresh={()=> setRefresh (! atualizar)} /> ); })} </article>
<p> )} </> ): ( </p>
<div>
<p className="non-auth-text"> Bem-vindo ao meu app de notas next.js, faça login para começar </p>
</div>
<p> )} </Wrapper> </> );<br />
}; </p>
<p> No bloco de código acima, estamos usando o gancho useEffect para obter notas de nosso armazenamento local, que atua como nosso banco de dados, e renderizando-as como nossas notas padrão. </p>
<p> Também adicionamos um título para nosso aplicativo. Usando Auth0, adicionamos recursos de login para que os usuários façam login em seus aplicativos de notas personalizadas. Também criamos um botão para adicionar uma nota. Para renderizar todas as nossas notas, usamos o objeto nativo <a href="https://www.w3schools.com/jsref/jsref_map.asp"> mapa JavaScript </a>. </p>
<p> Para completar nosso aplicativo, vamos adicionar alguns estilos: </p>
<p>const Wrapper=styled.section` margem: 1rem 0; largura máxima: 100%; overflow-x: oculto; altura: 100%; .form-wrapper { largura máxima: 60%; margem: 1,5 rem auto 0; display: flex; direção flexível: coluna; alinhar-itens: centro; justificar o conteúdo: centro; botão { fronteira: nenhum; esboço: nenhum; plano de fundo: # 5b6d5b; cor: #fff; tamanho da fonte: 1rem; altura: 2,6 rem; largura: 10rem; raio da borda: 5px; transição: opacidade 0,7s; &:flutuar { opacidade: 0,8; } } } .notes-wrapper { largura máxima: 95%; margem: 4rem automático; display: grade; colunas de modelo de grade: repetir (3, 1fr); grade-gap: 2rem; } .nodata-indicator { margem superior: 4rem; alinhamento de texto: centro; } .non-auth-text { margem superior: 4rem; alinhamento de texto: centro; tamanho da fonte: 1,5 rem; }<br />
`;<br />
exportar aplicativo padrão; </p>
<p> Nosso aplicativo deve ser semelhante à imagem abaixo: </p>
<p> <img decoding="async" src="https://br.atsit.in/wp-content/uploads/2021/07/autentique-seu-aplicativo-next-js-usando-auth0-4.png"width="680"height="462"/> </p>
<h2> Conclusão </h2>
<p> Neste artigo, aprendemos como configurar o Auth0 para autenticação em aplicativos Next.js. </p>
<p> Construímos um aplicativo Notes usando Next.js e o SDK Auth0 Next.js. Em seguida, adicionamos a autenticação com recursos como login, logout e verificação de e-mail, prontos para uso com o Auth0. </p>
<p> Auth0 é uma ótima ferramenta se você está procurando uma maneira fácil de adicionar autenticação ao seu projeto. Neste artigo, abordamos apenas a superfície dos diferentes métodos de verificação. Em última análise, a melhor solução para você dependerá das necessidades do seu projeto. </p>
<p> Uma versão funcional do código neste artigo pode ser encontrada em <a href="https://codesandbox.io/s/amazing-kapitsa-m06je"> Código </a> <a href="https://codesandbox.io/s/amazing-kapitsa-m06je">S </a> <a href="https://codesandbox.io/s/amazing-kapitsa-m06je"> andbox. </a> </p>
<p> A postagem <a href="https://blog.logrocket.com/authenticate-your-next-js-application-using-auth0/"> Autentique seu aplicativo Next.js usando Auth0 </a> apareceu primeiro em <a href="https://blog.logrocket.com"> LogRocket Blog </a>. </p>
<div style="text-align: center; margin-bottom: 20px !important; width: 100%; height: 363px; max-width: 970px; max-height: 363px;">

<ins class="adsbygoogle"
           style="display:block; width: 100%; height: 360px; max-width: 970px; max-height: 360px;"
           data-ad-client="ca-pub-5533026247140662"
           data-ad-slot="7629676416"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
          </div></p></div>
		<div class="section section-blog-info">
			<div class="row">
				<div class="col-md-6">
					<div class="entry-categories">Categories:						<span class="label label-primary"><a href="https://br.atsit.in/archives/category/uncategorized">Uncategorized</a></span><span class="label label-primary"><a href="https://br.atsit.in/archives/category/wordpress">Wordpress</a></span>					</div>
					<div class="entry-tags">Tags: <span class="entry-tag"><a href="https://br.atsit.in/archives/tag/wordpress" rel="tag">wordpress</a></span></div>				</div>
				
        <div class="col-md-6">
            <div class="entry-social">
                <a target="_blank" rel="tooltip"
                   data-original-title="Share on Facebook"
                   class="btn btn-just-icon btn-round btn-facebook"
                   href="https://www.facebook.com/sharer.php?u=https://br.atsit.in/archives/79416">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="20" height="17"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
                </a>
                
                <a target="_blank" rel="tooltip"
                   data-original-title="Share on Twitter"
                   class="btn btn-just-icon btn-round btn-twitter"
                   href="http://twitter.com/share?url=https://br.atsit.in/archives/79416&text=Autentique%20seu%20aplicativo%20Next.js%20usando%20Auth0">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="17"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
                </a>
                
                <a rel="tooltip"
                   data-original-title=" Share on Email"
                   class="btn btn-just-icon btn-round"
                   href="mailto:?subject=Autentique%20seu%20aplicativo%20Next.js%20usando%20Auth0&body=https://br.atsit.in/archives/79416">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="17"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>
               </a>
            </div>
		</div>			</div>
			<hr>
					</div>
		</div>	<div class="col-md-3 blog-sidebar-wrapper col-md-offset-1">
		<aside id="secondary" class="blog-sidebar" role="complementary">
						<div id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://br.atsit.in/">
				<label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search …" value="" name="s" />
				</label>
				<input type="submit" class="search-submit" value="Search" />
			</form></div>
		<div id="recent-posts-2" class="widget widget_recent_entries">
		<h5>Recent Posts</h5>
		<ul>
											<li>
					<a href="https://br.atsit.in/archives/506172">Controladores de jogos 8BitDo agora compatíveis com iPhone, iPad, Apple TV e Mac</a>
									</li>
											<li>
					<a href="https://br.atsit.in/archives/506171">O GPT da OpenAI pode criar mundos no metaverso diretamente do texto</a>
									</li>
											<li>
					<a href="https://br.atsit.in/archives/506169">The MacRumors Show: Quais recursos de saúde e fitness estão chegando aos AirPods?</a>
									</li>
											<li>
					<a href="https://br.atsit.in/archives/506168">As pessoas estão melhorando seu jogo Tinder com o Facebook LLaMA AI vazado</a>
									</li>
											<li>
					<a href="https://br.atsit.in/archives/506167">Revisão: WWE 2K23</a>
									</li>
					</ul>

</div><div id="categories-2" class="widget widget_categories"><h5>Categories</h5>
			<ul>
					<li class="cat-item cat-item-5"><a href="https://br.atsit.in/archives/category/it-info">IT Info</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://br.atsit.in/archives/category/uncategorized">Uncategorized</a>
</li>
	<li class="cat-item cat-item-3"><a href="https://br.atsit.in/archives/category/wordpress">Wordpress</a>
</li>
			</ul>

</div>					</aside>
	</div>
			</div>
</article>

</div>
	</div>
</div>

<div class="section related-posts">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<h2 class="hestia-title text-center">Related Posts</h2>
							<div class="row">
																	<div class="col-md-4">
										<div class="card card-blog">
																							<div class="card-image">
													<a href="https://br.atsit.in/archives/502819" title="Esses fundos de vídeo imersivos em 360 graus do Google Meet são incríveis">
														<img width="360" height="240" src="https://br.atsit.in/wp-content/uploads/2023/02/esses-fundos-de-video-imersivos-em-360-graus-do-google-meet-sao-incriveis-360x240.webp" class="attachment-hestia-blog size-hestia-blog wp-post-image" alt="" decoding="async" loading="lazy" />													</a>
												</div>
																						<div class="content">
												<h6 class="category text-info"><a href="https://br.atsit.in/archives/category/it-info" title="View all posts in IT Info" >IT Info</a> </h6>
												<h4 class="card-title">
													<a class="blog-item-title-link" href="https://br.atsit.in/archives/502819" title="Esses fundos de vídeo imersivos em 360 graus do Google Meet são incríveis" rel="bookmark">
														Esses fundos de vídeo imersivos em 360 graus do Google Meet são incríveis													</a>
												</h4>
												<p class="card-description">Reconhecidamente, este será um começo lento, mas o Google está lançando dois planos de fundo virtuais incrivelmente legais para o Google Meet no Android e no iOS que permitem aos usuários não apenas alterar seus<a class="moretag" href="https://br.atsit.in/archives/502819"> Read more…</a></p>
											</div>
										</div>
									</div>
																	<div class="col-md-4">
										<div class="card card-blog">
																							<div class="card-image">
													<a href="https://br.atsit.in/archives/501952" title="Quase 25% das novas criptomoedas em 2022 poderiam ter sido’bombas e despejos’, revela estudo">
														<img width="360" height="240" src="https://br.atsit.in/wp-content/uploads/2023/02/quase-25-das-novas-criptomoedas-em-2022-poderiam-ter-sidobombas-e-despejos-revela-estudo-360x240.png" class="attachment-hestia-blog size-hestia-blog wp-post-image" alt="" decoding="async" loading="lazy" />													</a>
												</div>
																						<div class="content">
												<h6 class="category text-info"><a href="https://br.atsit.in/archives/category/it-info" title="View all posts in IT Info" >IT Info</a> </h6>
												<h4 class="card-title">
													<a class="blog-item-title-link" href="https://br.atsit.in/archives/501952" title="Quase 25% das novas criptomoedas em 2022 poderiam ter sido’bombas e despejos’, revela estudo" rel="bookmark">
														Quase 25% das novas criptomoedas em 2022 poderiam ter sido’bombas e despejos’, revela estudo													</a>
												</h4>
												<p class="card-description">De acordo com o estudo mais recente conduzido pela Chainalysis, usuários involuntários gastaram cerca de US$ 4,6 bilhões em criptomoedas, adquirindo-as em esquemas fraudulentos no ano passado, que resultaram na criação de mais de 1,1<a class="moretag" href="https://br.atsit.in/archives/501952"> Read more…</a></p>
											</div>
										</div>
									</div>
																	<div class="col-md-4">
										<div class="card card-blog">
																							<div class="card-image">
													<a href="https://br.atsit.in/archives/501904" title="OpenSea Anuncia Taxas de Negociação de 0% e Corta Ganhos de Criadores">
														<img width="360" height="240" src="https://br.atsit.in/wp-content/uploads/2023/02/opensea-anuncia-taxas-de-negociacao-de-0-e-corta-ganhos-de-criadores-360x240.png" class="attachment-hestia-blog size-hestia-blog wp-post-image" alt="" decoding="async" loading="lazy" />													</a>
												</div>
																						<div class="content">
												<h6 class="category text-info"><a href="https://br.atsit.in/archives/category/it-info" title="View all posts in IT Info" >IT Info</a> </h6>
												<h4 class="card-title">
													<a class="blog-item-title-link" href="https://br.atsit.in/archives/501904" title="OpenSea Anuncia Taxas de Negociação de 0% e Corta Ganhos de Criadores" rel="bookmark">
														OpenSea Anuncia Taxas de Negociação de 0% e Corta Ganhos de Criadores													</a>
												</h4>
												<p class="card-description">O principal mercado de NFT, OpenSea, fez alguns anúncios importantes nas últimas horas. Por meio de sua conta oficial no Twitter, a OpenSea listou várias alterações em sua estrutura de taxas e royalties, que devem<a class="moretag" href="https://br.atsit.in/archives/501904"> Read more…</a></p>
											</div>
										</div>
									</div>
																							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-wrapper">
						<footer class="footer footer-black footer-big">
						<div class="container">
																<div class="hestia-bottom-footer-content"><ul class="footer-menu pull-left"></ul>
<div class="copyright pull-right">Hestia | Developed by <a href="https://themeisle.com" rel="nofollow">ThemeIsle</a></div></div>			</div>
					</footer>
				</div>
	</div>
<script>
var bodyt = document.getElementsByTagName("body")[0];
    const observer = new MutationObserver(function (mutations, observer) {
        bodyt.style.height = "";
    });
    observer.observe(bodyt, {
        attributes: true,
        attributeFilter: ["style"]
    });

var wrapperc = document.getElementsByClassName("wrapper")[0];
    const observer2 = new MutationObserver(function (mutations, observer) {
        wrapperc.style.height = "";
    });
    observer2.observe(wrapperc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var mainraisedc = document.getElementsByClassName("main-raised")[0];
    const observer3 = new MutationObserver(function (mutations, observer) {
        mainraisedc.style.height = "";
    });
    observer3.observe(mainraisedc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var blogpostwrapperc = document.getElementsByClassName("blog-post-wrapper")[0];
    const observer4 = new MutationObserver(function (mutations, observer) {
        blogpostwrapperc.style.height = "";
    });
    observer4.observe(blogpostwrapperc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var containerc = document.getElementsByClassName("container")[0];
    const observer5 = new MutationObserver(function (mutations, observer) {
        containerc.style.height = "";
    });
    observer5.observe(containerc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var sectiontextc = document.getElementsByClassName("section-text")[0];
    const observer6 = new MutationObserver(function (mutations, observer) {
        sectiontextc.style.height = "";
    });
    observer6.observe(sectiontextc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var rowc = document.getElementsByClassName("row")[0];
    const observer7 = new MutationObserver(function (mutations, observer) {
        rowc.style.height = "";
    });
    observer7.observe(rowc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var singlepostcontainerc = document.getElementsByClassName("single-post-container")[0];
    const observer8 = new MutationObserver(function (mutations, observer) {
        singlepostcontainerc.style.height = "";
    });
    observer8.observe(singlepostcontainerc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var singlepostwrapc = document.getElementsByClassName("single-post-wrap")[0];
    const observer9 = new MutationObserver(function (mutations, observer) {
        singlepostwrapc.style.height = "";
    });
    observer9.observe(singlepostwrapc, {
        attributes: true,
        attributeFilter: ["style"]
    });

var relatedpostsc = document.getElementsByClassName("related-posts")[0];
    const observer10 = new MutationObserver(function (mutations, observer) {
        relatedpostsc.style.height = "";
    });
    observer10.observe(relatedpostsc, {
        attributes: true,
        attributeFilter: ["style"]
    });

</script><script type='text/javascript' src='https://br.atsit.in/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://br.atsit.in/wp-content/themes/hestia/assets/bootstrap/js/bootstrap.min.js?ver=1.0.2' id='jquery-bootstrap-js'></script>
<script type='text/javascript' src='https://br.atsit.in/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script>
<script type='text/javascript' id='hestia_scripts-js-extra'>
/* <![CDATA[ */
var requestpost = {"ajaxurl":"https:\/\/br.atsit.in\/wp-admin\/admin-ajax.php","disable_autoslide":"","masonry":""};
/* ]]> */
</script>
<script type='text/javascript' src='https://br.atsit.in/wp-content/themes/hestia/assets/js/script.min.js?ver=3.0.29' id='hestia_scripts-js'></script>
</body>
</html>