npm package: @hotmart/hot-login
Description: Este package tem como finalidade auxiliar a integração com o SSO da Hotmart.
Latest version: 0.0.14

[![Build Status](https://drone.integration.hotmart.com/api/badges/Hotmart-Org/hot-login/status.svg)](https://drone.integration.hotmart.com/Hotmart-Org/hot-login)
[![npm version](https://badge.fury.io/js/@hotmart%2Fhot-login.svg)](https://badge.fury.io/js/@hotmart%2Fhot-login)
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# 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

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

### NPM

Instale o package executando:

```bash
npm install @hotmart/hot-login
```

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

```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:

```html
<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](https://app-vlc.hotmart.com/tools/credentials) após a criação do service de autenticação. Para solicitar a criação de um service basta preencher o seguinte [formulário](https://hotmart1.typeform.com/to/MousjmZA);
- `redirect-uri`: URI de callback cadastrada no service de autenticação. Para consulta-la, acesse as [credenciais da plataforma Hotmart](https://app-vlc.hotmart.com/tools/credentials);
- `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](https://github.com/Hotmart-Org/hotmart-authentication-guide);
- `code-challenge`: Hash SHA256 criado na aplicação back-end responsável por implementar o Hotmart Autenticação. [Guia de implementação](https://github.com/Hotmart-Org/hotmart-authentication-guide);

#### 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'`       |

```html
<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

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