Pular para o conteúdo principal

Configurar login social com Alipay (Web)

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

dica:

Este guia assume que você tem um entendimento básico dos Conectores (Connectors) do Logto. Para aqueles que não estão familiarizados, consulte o guia de Conectores para começar.

Primeiros passos​

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

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 guia "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 "Application Icon" (应用图标). Certifique-se de escolher "web application" (网页应用) como "App type" (应用类型).
  5. Após criar o aplicativo, você será direcionado para a página de visão geral, onde deve clicar em "add ability" (添加能力) para adicionar "Third-party application authorization" (第三方应用授权), "Get member information" (获取会员信息) e "App Alipay login" (App 支付宝登录) antes de habilitar o login com Alipay.
  6. Acesse o Alipay Customer Center 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. Clique em "Add binding" (添加绑定) e digite o APPID do aplicativo web que você criou 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, você deverá ver as habilidades que acabou de adicionar no passo 5 funcionando.
  8. Volte para a página do console da plataforma aberta do Alipay, e você encontrará "Interface signing method" (接口加签方式(密钥/证书)) na seção "development information" (开发信息). Clique no botão "set up" (设置) e você será direcionado para uma página de configuração do método de assinatura. "Public Key" (公钥) é o modo de assinatura preferido; preencha o conteúdo do arquivo de chave pública que você gerou na caixa 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 Logto core. O connector_id pode ser encontrado na barra superior da página de detalhes do conector no 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" (提交审核). Assim que a revisão for aprovada, você estará pronto para um fluxo de login com Alipay suave.
nota:

Você pode usar o 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é do public.pem, excluir todos os caracteres de nova linha e colar o restante do conteúdo na caixa de texto para "public key".

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

  1. No workspace do console Alipay, vá para o painel "My application" (我的应用) e clique na guia "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 obtido 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é do arquivo de chave privada.
    • Preencha o campo signType com 'RSA2' devido ao modo de assinatura Public key escolhido 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 no cadastro e login.

Depois que o conector web do Alipay estiver habilitado, você pode construir e executar seu aplicativo web para ver se está funcionando.

Referências​

Documentação Alipay - Preparação de acesso - Como criar um aplicativo

Documentação Alipay - Web & Mobile Apps - Criar um aplicativo