| Fluxo | Quando usar | Função do SDK |
|---|---|---|
| OTP | Validação de telefone em cadastro, recuperação de conta, checkout ou confirmação de contato. | NvoipAuthWidget.startOTP() |
| 2FA | Segunda etapa de segurança depois que e-mail e senha já foram validados pelo backend. | NvoipAuthWidget.start2FA() |
Em projetos com npm, instale o SDK:
npm install nvoip-web-sdkVocê também pode usar os arquivos distribuídos em dist/nvoip-auth-widget.css e dist/nvoip-auth-widget.js.
O frontend deve chamar endpoints próprios da sua aplicação, por exemplo:
POST /api/nvoip/auth/start: inicia o envio do código por SMS, ligação ou WhatsApp.POST /api/nvoip/auth/confirm: valida o código informado pelo usuário.No backend, use a API da Nvoip para gerar o OAuth e chamar os endpoints corretos. Para OTP, os canais principais são:
POST /otp com phoneNumber e methods.sms=true.POST /otp com phoneNumber e methods.torpedo=true.GET /check/otp com code e key.Para 2FA por SMS, use POST /2fa e depois GET /check/2fa.
Depois que o backend validar e-mail e senha, abra o 2FA. Ao validar o código, o SDK pode redirecionar para a URL final do login.
<link rel="stylesheet" href="/dist/nvoip-auth-widget.css" />
<script src="/dist/nvoip-auth-widget.js"></script>
<script>
async function startVerification(payload) {
const response = await fetch("/api/nvoip/auth/start", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
return response.json();
}
async function confirmVerification(payload) {
const response = await fetch("/api/nvoip/auth/confirm", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
return response.json();
}
function afterPasswordLogin(user) {
NvoipAuthWidget.start2FA({
channels: ["sms", "voice", "whatsapp"],
phone: user.phone,
maskedPhone: user.maskedPhone,
accountLabel: user.email,
returnTo: "/app",
startVerification,
confirmVerification
});
}
</script>Use OTP quando o usuário ainda está em cadastro, recuperação de conta ou confirmação de número.
<button id="validate-phone">Validar telefone</button>
<input id="phone" type="tel" placeholder="5511999999999" />
<script>
document.getElementById("validate-phone").addEventListener("click", () => {
NvoipAuthWidget.startOTP({
channels: ["whatsapp", "sms", "voice"],
phone: document.querySelector("#phone").value,
returnTo: "/cadastro/concluido",
startVerification,
confirmVerification
});
});
</script>O desenvolvedor controla quais opções aparecem para o usuário:
channels: ["sms", "voice", "whatsapp"]Se a conta ainda não tiver template de WhatsApp aprovado, mantenha apenas SMS e ligação até concluir a configuração.
O repositório possui duas demos:
npm run demo:mock
npm run demo:realaccess_token no backend usando OAuth.