@hotmart/hot-login v0.0.14
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>