Login via web

Antes de começar

O login com MeuID via web tem dois possíveis comportamentos:

Login via browser desktop: Ao clicar no botão de login, é exibido um modal com QR Code para que o usuário possa ler (usando câmera do celular ou o leitor interno do MeuID), e assim continuar o fluxo. Ao finalizar o processo de autenticação e autorização, o modal é fechado automaticamente e passado as informações necessárias para o callback implementado (mais detalhes abaixo).

Login via browser mobile: Ao clicar no botão de login, o aplicativo MeuID é aberto automaticamente e o usuário pode continuar o fluxo. Ao finalizar o processo de autenticação e autorização, o aplicativo MeuID abre o navegador utilizando a redirectUrl cadastrada previamente (mais detalhes abaixo).

🚧

Tenha suas credenciais antes de começar

Caso ainda não tenha realizado seu cadastro e obtido as credenciais, entre em contato com nosso time através do [email protected]

Sequência de chamadas

Implementação

Carregue a biblioteca de login com MeuID.

Você deve incluir a biblioteca JavaScript na página que deseja integrar com o MeuID.

HTML

<script src="https://login.meuid.com.br/sdk/index.js" defer>
</script>

Adicione o botão Login com MeuID

O botão de Login com MeuID é injetado automaticamente assim que é chamada a função initialize
disponibilizada pela biblioteca, e usa o id meuid-login como referência, então para isso adicione na sua
página:

HTML

<div id="meuid-login"></div>

Nós disponibilizamos três estilos diferentes de botões e dois tamanhos que você pode configurar via data-
attributes, sendo eles:

data-size	data-theme
medium (default)	regular (default)
small	white
	white-borderless

Exemplos de implementação:

Você também pode escolher o texto que o botão vai apresentar usando o data-attribute data-label. As opções são as seguintes:

data-label	texto
acessar	Acessar com MeuID
cadastrar	Cadastrar com MeuID
entrar	Entrar com MeuID
continuar	Continuar com MeuID
autenticar	Autenticar com MeuID
login (default)	Login com MeuID

HTML

<div
  id="meuid-login"
  data-size="medium"
  data-theme="white-borderless"
  data-label="acessar"></div>

Javascript

Utilizando a biblioteca

Assim que a biblioteca é carregada, é adicionada uma variável dentro de window chamada meuID. Faça
então uma chamada para meuID.initialize passando o seu appId, e um callback para lidar com a
resposta de login onLogin.

JavaScript

const meuID = window.meuID;
meuID.initialize({
  appId: 'c5bb4e97-9a6d-46a9-ad81-9a25f818af7b',
  onLogin: response => {
  	// lidar com os parametros recebidos do sdk.
	}
});

Resposta de login via browser desktop

A resposta da request de login é definida por um objeto que possui duas propriedades, code e code_verifier.

Após receber esses dados, você deve realizar o fluxo para obter dados do usuário

Exemplo do objeto que recebe no onLogin:

JSON

{
  "auth": {
    "parameters": {
      "code": "tZoNONIuEZYFodueySyRkShhOfRtxBDsAXQPvtZYicBFmxacrKefswRvaajzcPigINUPRImZhjrStDwSJoIPGMswEVEDaNdKoAobKaJOWmiipFARMJHLGgLjiHhHtLKqyGKnLxNocAUNBhvQwsaTyp",
      "code_verifier": "zwMb4XMNQCJpREcwAxqWeSWR8rmoBVIJB3tqibyC2mcti"
    }
  }
}

Resposta de login via browser mobile

Quando o usuário faz login via browser mobile, no fim do processo, o aplicativo MeuID abre uma nova janela no navegador do celular, utilizando uma url previamente cadastrada em nosso sistema.

Essa url deve receber o code e code_verifier via query parameter.

🚧

Não deixa suas credenciais expostas no frontend

Após receber o code e code_verifier, envie para seu servidor para que ele faça o fluxo de obter dados do usuário.