Integrando com WordPress

Este guia irá orientá-lo pelo processo de integração do Logto com o WordPress usando o plugin OIDC. Mas primeiro, vamos dar uma olhada na experiência do usuário assim que a integração estiver completa.

O processo de login com a integração do Logto#

1. O usuário acessa a página de login do site WordPress, que é [URL DO SITE]/wp-login.php por padrão, e há um botão de login pelo OIDC.
2. O usuário clica no botão e é redirecionado para a página de login do Logto com a sua experiência de login personalizada.
3. O usuário escolhe um método de login e o Logto irá autenticar o usuário.
4. Assim que o usuário for autenticado, o Logto o redirecionará de volta ao site WordPress.
5. O WordPress criará uma nova conta de usuário ou fará login na conta de usuário existente e redirecionará o usuário para a página anterior.

Agora que vimos o resultado final da integração do Logto com o WordPress, vamos colocar as mãos na massa e mergulhar no processo de integração.

Pré-requisitos#

Antes de começarmos, certifique-se de ter o seguinte:

1. Um site WordPress: É necessário um site WordPress totalmente funcional. Garanta acesso administrativo para gerenciar plugins e configurar configurações.
2. Uma instância Logto: Crie uma nova instância Logto visitando o Console Logto, ou hospede sua própria instância seguindo o guia de instalação.

Etapas de Integração#

Etapa 1: Crie uma aplicação no Logto#

1. Visite o Console Logto.
2. Navegue até "Aplicações" e clique em "Criar aplicação".
3. Clique em "Criar app sem framework".
4. Selecione "Web Tradicional" como o tipo de aplicação.
5. Nomeie sua aplicação e clique em "Criar aplicação".

Etapa 2: Instale o plugin#

1. Faça login no seu site WordPress.
2. Navegue até "Plugins" e clique em "Adicionar Novo".
3. Procure por "OpenID Connect Generic" e instale o plugin de daggerhart.
4. Ative o plugin.

Etapa 3: Configure o plugin#

1. Abra as configurações do plugin navegando até "Configurações" > "OpenID Connect Generic".
2. Preencha os seguintes campos:
   • ID do Cliente: O ID do aplicativo da sua aplicação Logto.
   • Segredo do Cliente: O segredo do aplicativo da sua aplicação Logto.
   • Escopo OpenID: Insira email profile openid offline_access.
   • URL do Endpoint de Login: A URL do endpoint de autorização da sua aplicação Logto, que é https://[tenant-id].logto.app/oidc/auth, você pode clicar em "mostrar detalhes do endpoint" na página da aplicação Logto para obter a URL.
   • URL do Endpoint de Userinfo: A URL do endpoint de userinfo da sua aplicação Logto, que é https://[tenant-id].logto.app/oidc/me.
   • URL do Endpoint de Validação de Token: A URL do endpoint de validação de token da sua aplicação Logto, que é https://[tenant-id].logto.app/oidc/token.
   • URL do Endpoint de Finalizar Sessão: A URL do endpoint de finalização de sessão da sua aplicação Logto, que é https://[tenant-id].logto.app/oidc/session/end.
   • Chave de Identidade: A chave única no token ID que contém a identidade do usuário, pode ser email ou sub, dependendo da sua configuração.
   • Chave de Apelido: A chave no token ID que contém o apelido do usuário, você pode configurá-la para sub e alterá-la posteriormente.

Etapa 4: Configure a aplicação#

1. Nas configurações do plugin, role para baixo até a seção "Notas" e copie o valor "Redirect URI".
2. No Console Logto, navegue até as configurações da sua aplicação.
3. Adicione o valor copiado "Redirect URI" ao campo "Redirect URIs".

Etapa 5: Teste a integração#

1. Deslogue do seu site WordPress.
2. Visite a página de login do WordPress e clique no botão "Sign in with Logto".
3. Você será redirecionado para a página de login do Logto.
4. Faça login com sua conta Logto.
5. Você será redirecionado de volta ao site WordPress e logado automaticamente.

Etapas finais#

Parabéns! Você integrou com sucesso o Logto ao WordPress.

Para personalizar ainda mais a integração, você pode explorar recursos adicionais na página de configurações do plugin, como vinculação de usuários existentes, personalização do botão de login, uso do modo SSO, e mais.