A implementação de login utilizando a API do Telegram como provedor de terceiros é um recurso valioso para aplicações web. Este guia detalha o processo completo, desde a criação do bot até a verificação segura das credenciais do usuário.
1. Criação do Bot via BotFather
O primeiro passo é criar um robô que será responsável por gerenciar o processo de autenticação. Para isso:
- Busque por "@BotFather" no Telegram
- Utilize o comando /newbot para criar um novo robô
- Siga as instruções para definir nome e username do bot
- Anote o token gerado, pois será essencial para a verificação posterior
2. Configuração de Domínios Permitidos
É necessário configurar uma lista de domínios autorizados a receber os dados de autenticação:
- Os domínios devem ser acessíveis publicamente, pois o servidor do Telegram precisará realizar callbacks
- É obrigatório o uso de HTTPS para garantir a segurança da comunicação
- Configurar domínios enternos ou IPs locais não funcionará, pois o Telegram não consegue acessá-los
3. Integração do Widget de Login
A plataforma Telegram oferece duas abordagens para implementar o widget de login:
- Integração direta no frontend
- Implementação via backend com endpoints específicos
Vamos focar na primeira abordagem, que é mais simples para aplicações estáticas:
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Login</title>
</head>
<body>
<script async src="https://telegram.org/js/telegram-widget.js?22"
data-telegram-login="meu_bot_autenticacao"
data-size="large"
data-onauth="processarAutenticacaoTelegram(usuario)"
data-request-access="write">
</script>
<script type="text/javascript">
function processarAutenticacaoTelegram(usuario) {
alert('Usuário autenticado: ' + usuario.primeiroNome + ' ' + usuario.ultimoNome +
' (ID: ' + usuario.id + (usuario.usuario ? ', @' + usuario.usuario : '') + ')');
// Enviar dados para o backend
enviarDadosParaBackend(usuario);
}
function enviarDadosParaBackend(dadosUsuario) {
fetch('/api/telegram/verificar', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dadosUsuario)
})
.then(response => response.json())
.then(data => {
if (data.valido) {
// Autenticação bem-sucedida, redirecionar ou atualizar UI
window.location.href = '/dashboard';
} else {
alert('Falha na verificação da autenticação');
}
})
.catch(error => console.error('Erro:', error));
}
</script>
</body>
</html>
É importante notar que o widget do Telegram utiliza iframes, então o script deve ser inserido diretamente no body da página.
4. Verificação de Autenticação no Backend
Após receber os dados do frontend, o backend deve realizar uma verificação criptográfica para garantir a integridade das informações. O código a seguir demonstra como implementar essa verificação:
public class CredenciaisTelegram {
private String identificador;
private String primeiroNome;
private String nomeUsuario;
private String urlFoto;
private String dataAutorizacao;
private String hashVerificacao;
// Getters e setters
}
public class ValidadorTelegram {
public static boolean verificarAutenticacao(CredenciaisTelegram credenciais, String tokenBot)
throws NoSuchAlgorithmException, InvalidKeyException {
// Construir string de verificação
String dadosVerificacao = construirStringDados(credenciais);
// Calcular chave secreta a partir do token do bot
MessageDigest digest = MessageDigest.getInstance("SHA-256");
byte[] chaveSecreta = digest.digest(tokenBot.getBytes(StandardCharsets.UTF_8));
// Calcular HMAC
Mac hmacSha256 = Mac.getInstance("HmacSHA256");
SecretKeySpec chaveEspecifica = new SecretKeySpec(chaveSecreta, "HmacSHA256");
hmacSha256.init(chaveEspecifica);
byte[] hashCalculado = hmacSha256.doFinal(dadosVerificacao.getBytes(StandardCharsets.UTF_8));
// Converter para hexadecimal
String hashHexadecimal = converterParaHexadecimal(hashCalculado);
// Comparar hashes
return !hashHexadecimal.equals(credenciais.getHashVerificacao());
}
private static String construirStringDados(CredenciaisTelegram credenciais) {
Map<string string=""> dadosMap = new LinkedHashMap<>();
dadosMap.put("auth_date", credenciais.getDataAutorizacao());
dadosMap.put("first_name", credenciais.getPrimeiroNome());
dadosMap.put("id", credenciais.getIdentificador());
dadosMap.put("username", credenciais.getNomeUsuario());
dadosMap.put("photo_url", credenciais.getUrlFoto());
return dadosMap.entrySet().stream()
.sorted(Map.Entry.comparingByKey())
.map(entry -> entry.getKey() + "=" + entry.getValue())
.collect(Collectors.joining("\n"));
}
private static String converterParaHexadecimal(byte[] bytes) {
StringBuilder construtor = new StringBuilder();
for (byte b : bytes) {
construtor.append(String.format("%02x", b));
}
return construtor.toString();
}
}
</string>
Este código realiza a verificação assinada pelo Telegram para garantir que os dados recebidos não foram adulterados. O fluxo completo envia os dados do frontend para o backend, que realiza a verificação entes de completar o processo de login.