@hotmart/hot-login

hot-login

Este package tem como finalidade auxiliar a integração com o SSO da Hotmart.

Como instalar

Você pode consumir o package via CDN (direto no HTML, sem a necessidade de baixar no projeto) ou adicionando no seu bundle JS, instalando via NPM

CDN (unpkg)

Basta inserir a tag script com o source do package no seu arquivo HTML e os componentes customizados já estarão disponíveis para uso

<script src="https://unpkg.com/@hotmart/hot-login/dist/hot-login/hot-login.esm.js" type="module"></script>

NPM

Instale o package executando:

npm install @hotmart/hot-login

Em seguida, faça a importação do package na raiz da sua aplicação Javascript

import '@hotmart/hot-login/dist/hot-login/hot-login.esm';

Como usar os componentes

Hot Login Button

Este componente de botão tem a única finalidade de redirecionar o usuário para a tela de SSO da Hotmart. Basta chamar o elemento hot-login-button com os seguintes atributos:

<hot-login-button client-id="" redirect-uri="" scopes="" state="" code-challenge=""></hot-login-button>

• client-id: ClientId disponível na sessão de credenciais da plataforma Hotmart após a criação do service de autenticação. Para solicitar a criação de um service basta preencher o seguinte formulário;
• redirect-uri: URI de callback cadastrada no service de autenticação. Para consulta-la, acesse as credenciais da plataforma Hotmart;
• scopes: Escopos de acesso desejados. Ex: developers club sales subscriptions;
• state: Hash MD5 criado na aplicação back-end responsável por implementar o Hotmart Autenticação. Guia de implementação;
• code-challenge: Hash SHA256 criado na aplicação back-end responsável por implementar o Hotmart Autenticação. Guia de implementação;

Propriedades

Property	Attribute	Description	Type	Default
clientId	client-id		string	undefined
redirectUri	redirect-uri		string	undefined
scopes	scopes		string	undefined
state	state		string	undefined
codeChallenge	code-challenge		string	undefined
full	full		boolean	false
rounded	rounded		boolean	false
size	size		"large" | "medium" | "small"	'medium'
tab	tab		string	'0'

<hot-login-button
  client-id=""
  redirect-uri=""
  scopes=""
  state=""
  code-challenge=""
  full="true"
  rounded="true"
  size="large"
  tab="-1"
></hot-login-button>

Como NÃO usar

Por uma questões de branding e tom de voz, não permitimos a alteração do texto do botão. Sendo assim, as assinaturas a seguir não irá renderizar com sucesso

<hot-login-button>Login com a Hotmart</hot-login-button>
<hot-login-button>
  <span>Login com a Hotmart</span>
</hot-login-button>