Pular para o conteúdo principal

Configurar login social com Alipay (Web)

O conector oficial do Logto para login social do Alipay em aplicativos web.

dica

Neste guia, assumimos que você tem conhecimento básico sobre Conectores (Connectors) do Logto. Se não tiver, confira o guia Configurar conectores para começar.

Introdução​

O conector Alipay Web é projetado para aplicativos Web de desktop. Ele aproveita o fluxo de autenticação OAuth 2.0 do Alipay e permite que os usuários do Alipay façam login em outros aplicativos usando perfis públicos de usuários do Alipay sem passar por um processo de registro complicado.

Registrar conta de desenvolvedor Alipay​

Registre uma conta de desenvolvedor Alipay se você ainda não tiver uma.

Criar e configurar aplicativo Alipay​

  1. Faça login no console do Alipay com a conta que você acabou de registrar.
  2. Vá para a aba "Web & Mobile Apps" (网页&移动应用) no painel "My Application" (我的应用).
  3. Clique no botão "Create an App" (立即创建) para começar a configurar seu aplicativo.
  4. Nomeie seu aplicativo em "Application Name" (应用名称) seguindo as convenções de nomenclatura e faça upload do seu "Application Icon" (应用图标), certifique-se de escolher "web application" (网页应用) como "App type" (应用类型).
  5. Após terminar de criar o aplicativo, chegamos à página de Visão Geral, onde devemos clicar em "add ability" (添加能力) para adicionar "Third-party application authorization" (第三方应用授权), "Get member information" (获取会员信息) e "App Alipay login" (App 支付宝登录) antes de habilitar o login do Alipay.
  6. Vá para o Centro de Atendimento ao Cliente do Alipay e faça login com a conta de desenvolvedor Alipay. Clique em "Account Center" (账号中心) na barra superior e vá para "APPID binding" (APPID 绑定), cuja entrada pode ser encontrada na parte inferior da barra lateral. "Add binding" (添加绑定) digitando o APPID do aplicativo web que você acabou de criar no passo 4.
  7. Clique no botão "Sign" de "App Alipay login" e conclua o processo de assinatura seguindo o guia. Após concluir esta etapa, espera-se que você encontre as habilidades que acabou de adicionar no passo 5 em ação.
  8. Volte para a página do console da plataforma aberta do Alipay e você pode encontrar "Interface signing method" (接口加签方式（密钥/证书）) na seção "development information" (开发信息). Clique no botão "set up" (设置) e você se encontrará em uma página de configuração do método de assinatura. "Public Key" (公钥) é o modo de assinatura preferido, e preencha os conteúdos do arquivo de chave pública que você gerou na caixa de entrada de texto.
  9. Configure o "Authorization Redirect URI" (授权回调地址) clicando no botão "set up" (设置) na parte inferior da página do console do Alipay. ${your_logto_origin}/callback/${connector_id} é o URI de redirecionamento padrão usado no núcleo do Logto. O connector_id pode ser encontrado na barra superior da página de detalhes do conector do Logto Admin Console.
  10. Após concluir todas essas etapas, volte para o canto superior direito da página do console do Alipay e clique em "Submit for review" (提交审核). Uma vez que a revisão seja aprovada, você está pronto para um fluxo de login suave do Alipay.

ℹ️ Nota

Você pode usar openssl para gerar pares de chaves em sua máquina local executando o seguinte trecho de código no terminal.

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem

Ao preencher a chave pública no site de configuração do aplicativo Alipay, você precisa remover o cabeçalho e o rodapé de public.pem, excluir todos os caracteres de nova linha e colar o restante do conteúdo na caixa de entrada de texto para "public key".

Configurar as configurações do conector Logto Alipay Web​

  1. No workspace do console Alipay vá para o painel "My application" (我的应用) e clique na aba "Web & Mobile Apps" (网页&移动应用), você pode encontrar o APPID de todos os aplicativos.
  2. No passo 7 da parte anterior, você já gerou um par de chaves incluindo uma chave privada e uma chave pública.
  3. Preencha as configurações do conector Logto:
    • Preencha o campo appId com o APPID que você obteve no passo 1.
    • Preencha o campo privateKey com o conteúdo do arquivo de chave privada mencionado no passo 2. Por favor, CERTIFIQUE-SE de usar '\n' para substituir todos os caracteres de nova linha e não remova o cabeçalho e o rodapé no arquivo de chave privada.
    • Preencha o campo signType com 'RSA2' devido ao modo de assinatura Public key que escolhemos no passo 7 de "Criar e Configurar Aplicativos Alipay".
    • Preencha o campo charset com 'gbk' ou 'utf8'. Você pode deixar este campo em branco, pois é OPCIONAL. O valor padrão é 'utf8'.
    • Preencha o campo scope com 'auth_base' ou 'auth_user'. Você pode deixar este campo em branco, pois é OPCIONAL. O valor padrão é 'auth_user'. Você pode conferir a diferença entre os diferentes valores.

Tipos de configuração​

NomeTipoValores Enum
appIdstringN/A
privateKeystringN/A
signTypeenum string'RSA' | 'RSA2'
charsetenum string (OPCIONAL)'gbk' | 'utf8' | undefined
scopeenum string (OPCIONAL)'auth_user' | 'auth_base'

Testar o conector web do Alipay​

É isso. Não se esqueça de Habilitar o conector social na experiência de login.

Uma vez que o conector web do Alipay esteja habilitado, você pode construir e executar seu aplicativo web para ver se funciona.

Referências​