Implementação de Login com Código QR do WeChat em Sites Usando OAuth2.0

  1. Visão Geral do OAuth2.0

O OAuth2.0 é um protocolo de autorização aberto que permite a usuários conceder acesso limitado a seus recursos em um serviço a aplicações de terceiros, sem expor credenciais. Em vez de compartilhar senhas, os usuários fornecem tokens temporários que definem escopos e duração específicos de acesso.

  1. Objetivo do Projeto

Neste exemplo, simularemos a integração do login via código QR do WeChat em uma aplicação web, seguindo o fluxo OAuth2.0 para obter informações básicas do usuário após a autorização. A documentação completa está disponível no portal da Plataforma Aberta do WeChat.

  1. Pré-requisitos e Configuração

Para desenvolver, é necessário ter uma conta de desenvolvedor na Plataforma Aberta do WeChat e um aplicativo web aprovado. O processo inclui:

  • Registro da Conta: Crie uma conta em https://open.weixin.qq.com/ usando uma conta QQ.
  • Submissão do Aplicativo: No painel de controle, selecione "Centro de Gerenciamento" > "Aplicativos Web" > "Criar Aplicativo Web". Preencha os detalhes, envie um formulário assinado e configure um domínio de callback (ex.: seudominio.com).
  • Aprovação e Credenciais: Após a revisão, você receberá um AppID, AppSecret e o domínio de callback autorizado.
  • Autenticação de Desenvolvedor: Para acessar APIs avançadas como login, é obrigatório ter uma conta de desenvolvedor autenticada.
  1. Fluxo de Autorização OAuth2.0

O fluxo do tipo authorization_code é suportado para aplicações com servidor backend. As etapas são:

  1. A aplicação redireciona o usuário para o endpoint de autorização do WeChat, onde ele escaneia um código QR.

  2. Após a autorização, o WeChat redireciona de volta com um parâmetro code temporário.

  3. O servidor da aplicação usa o code para trocar por um access_token via API.

  4. Com o access_token, a aplicação pode acessar informações do usuário ou serviços autorizados.

  5. Obtendo o Código QR para Web


Com as credenciais configuradas, gere o código QR usando a seguinte URL padrão:

https://open.weixin.qq.com/connect/qrconnect?appid=SEU_APPID&redirect_uri=SEU_CALLBACK_CODIFICADO&response_type=code&scope=snsapi_login&state=SEU_ESTADO_ALEATORIO#wechat_redirect

Parâmetros-chave:

Parâmetro Obrigatório Descrição
appid Sim Identificador único do aplicativo.
redirect_uri Sim URL de callback, codificada (ex.: https%3A%2F%2Fseudominio.com%2Fcallback).
scope Sim Escopo de autorização; use snsapi_login para login web.
state Não Valor aleatório para prevenção contra CSRF; recomendado.

Resposta do Usuário:

  • Se autorizado, o WeChat redireciona para SEU_CALLBACK_CODIFICADO?code=CODIGO_TEMPORARIO&state=SEU_ESTADO.
  • Se negado, apenas state é retornado.

Nota: O domínio de callback deve ser um nome de domínio completo (ex.: seudominio.com), e todas as páginas sob ele terão acesso ao OAuth2.0.

  1. Obtendo Informações do Usuário

6.1. Trocando o Code por Access Token

Faça uma requisição GET para:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=SEU_APPID&secret=SEU_APPSECRET&code=CODIGO_TEMPORARIO&grant_type=authorization_code

Exemplo de Resposta Bem-sucedida (JSON):

{
  "access_token": "TOKEN_ACESSO",
  "expires_in": 7200,
  "refresh_token": "TOKEN_REFRESH",
  "openid": "ID_UNICO_USUARIO",
  "scope": "snsapi_login",
  "unionid": "ID_UNICO_PLATAFORMA"
}

Campos Importantes:

  • access_token: Credencial para chamadas de API subsequentes (expira em 32 minutos).
  • openid: Identificador único do usuário para este aplicativo.
  • unionid: Identificador único em toda a Plataforma Aberta do WeChat (se disponível).

6.2. Acessando Dados Pessoais do Usuário

Com um access_token válido e o escopo snsapi_userinfo autorizado, obtenha informações pessoais:

https://api.weixin.qq.com/sns/userinfo?access_token=TOKEN_ACESSO&openid=ID_UNICO_USUARIO&lang=pt_BR

Exemplo de Resposta (JSON):

{
  "openid": "ID_UNICO_USUARIO",
  "nickname": "NICKNAME",
  "sex": 1,
  "province": "PROVINCIA",
  "city": "CIDADE",
  "country": "PAIS",
  "headimgurl": "URL_DA_IMAGEM",
  "privilege": ["PRIVILEGIO1"],
  "unionid": "ID_UNICO_PLATAFORMA"
}

Notas:

  • O escopo snsapi_userinfo requer autorização explícita do usuário (interface de confirmação).
  • Para aplicações múltiplas sob a mesma Plataforma Aberta, use unionid para identificar usuários de forma consistente.
  • URLs de avatar (headimgurl) podem expirar; recomenda-se salvar a imagem lcoalmente.
  1. Considerações Finais

O login via código QR em sites segue o fluxo OAuth2.0 padrão do WeChat. Em comparação com o login via conta pública:

  • O login web exige que o usuário escaneie o código QR em um navegador, enquanto o login via conta pública ocorre dentro do apilcativo WeChat após seguir a conta.
  • Ambos os métodos usam endpoints semelhantes para troca de code e obtenção de access_token, com escopos idênticos.
  • A autenticação de desenvolvedor é necessária para ambos os tipos de aplicativo, mas contas de teste estão disponíveis apenas para contas públicas no momento.

Tags: WeChat OAuth2.0 QR Code Login Web API WeChat

Publicado em 6-5 20:05 por Thomas