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>