Implementação

Guia completo para instalar e implementar o Autenticar.me na sua aplicação Vue.js.

Instalação do SDK

Instale o SDK do Autenticar.me para Vue.js usando seu gerenciador de pacotes preferido:

NPM

Yarn

Uso Básico

Após a instalação, importe e use os componentes do Autenticar.me em qualquer parte da sua aplicação:

<template>
  <div class="auth-container">
    <SignInButton />
    <SignUpButton />
    <SignOutButton />
    <UserProfile />
  </div>
</template>

<script setup>
import {
  SignInButton,
  SignUpButton,
  SignOutButton,
  UserProfile
} from '@autenticar/vue'
</script>

Componentes Disponíveis

O SDK oferece componentes organizados em três categorias:

Componentes Individuais

SignInButton

Botão para login de usuários.

<template>
  <SignInButton />
</template>

<script setup>
import { SignInButton } from '@autenticar/vue'
</script>

SignUpButton

Botão para cadastro de novos usuários.

<template>
  <SignUpButton />
</template>

<script setup>
import { SignUpButton } from '@autenticar/vue'
</script>

SignOutButton

Botão para logout do usuário autenticado.

<template>
  <SignOutButton />
</template>

<script setup>
import { SignOutButton } from '@autenticar/vue'
</script>

UserProfile

Componente para exibir informações do perfil do usuário.

<template>
  <UserProfile />
</template>

<script setup>
import { UserProfile } from '@autenticar/vue'
</script>

Componente de Troca Automática

AuthSwitcher

Componente que alterna automaticamente entre login e cadastro.

<template>
  <AuthSwitcher />
</template>

<script setup>
import { AuthSwitcher } from '@autenticar/vue'
</script>

SignInFullScreenButton

Botão que abre o formulário de login em tela cheia.

<template>
  <SignInFullScreenButton />
</template>

<script setup>
import { SignInFullScreenButton } from '@autenticar/vue'
</script>

SignUpFullScreenButton

Botão que abre o formulário de cadastro em tela cheia.

<template>
  <SignUpFullScreenButton />
</template>

<script setup>
import { SignUpFullScreenButton } from '@autenticar/vue'
</script>

Tabela de Componentes

Componente	Categoria	Descrição
`SignInButton`	Individual	Botão de login
`SignUpButton`	Individual	Botão de cadastro
`SignOutButton`	Individual	Botão de logout
`UserProfile`	Individual	Perfil do usuário
`AuthSwitcher`	Troca Automática	Alterna entre login e cadastro
`SignInFullScreenButton`	Tela Cheia	Login em modal fullscreen
`SignUpFullScreenButton`	Tela Cheia	Cadastro em modal fullscreen

Instalação do SDK#

NPM#

Yarn#

Uso Básico#

Componentes Disponíveis#

Componentes Individuais#

SignInButton#

SignUpButton#

SignOutButton#

UserProfile#

Componente de Troca Automática#

AuthSwitcher#

Componentes de Modal para Tela Cheia#

SignInFullScreenButton#

SignUpFullScreenButton#

Tabela de Componentes#