Configurando Strapi com Keycloak

Trabalhei em um projeto onde iniciamos ele utilizando o Strapi que é um Headless CMS, e sempre gostei dele por ele usar por trás o KOA que é um framework bem interessante.

Recentemente tive a oportunidade de voltar a usá-lo, e resolvi integrar o Keycloak e ver como seria essa integração.

Para quem não conhece o Keycloak é um software open source de gerenciamento de identidade.

Essa integração tem seus pontos de atenção, principalmente se você utiliza o Docker para suas aplicações, é bem difícil de encontrar um material atualizado, por isso resolvi escrever esse artigo.

Ambiente

Estou usando o Macbook com Docker, então pode ter alguns ajustes para outros sistemas operacionais, fiquem livres para fazer ajustes e melhorias de código.

• Docker;
• Keycloak 24;
• Strapi 4;
• Vite React;
• MySql 8;
• Postgres 12;
• Nginx;

O projeto que irei compartilhar está tudo junto com exceção da aplicação Frontend que no caso é a aplicação de exemplo da própria documentação do Strapi, eu só criei uma nova utilizando o React com Vite, pois estava com alguns erros.

Veja o vite.config.ts eu adicionei a chamada via o Proxy do Vite, para não ter erro de CORS.

Algumas breves explicações do porque o projeto está dessa forma:

No docker-compose.yml eu tenho os seguintes services:

• strapi-app: que é nosso Container que vai rodar o Strapi, já configurado com as variáveis de ambientes comuns do Strapi, e build aponta para nosso dockerfile.strapi que é a imagem para rodar em desenvolvimento. O único diferencial desse dockerfile.strapi são as linhas 9 - que adicionei o node-red, linha 12 - que adicionei NODE_TLS_REJECT_UNAUTHORIZED=0 e por fim linha 13 - que rodo o node-red, isso basicamente ignora os certificados assinados, precisamos disso pois nosso Keycloak está atrás de um Nginx com um certificado fake para desenvolvimento.
• strapi-db: que é o nosso banco de dados para o Strapi.
• strapi-keycloak: que é o nosso Keycloak;
• strapi-keycloak-db: que é nosso banco de dados para o Keycloak;
• strapi-nginx: que é o nosso Nginx, no build uso uma imagem do mkcert, para gerar os certificados, e temos o nginx.conf que é nossa configuração de servidor, para funcionar corretamente com https.

Ainda no docker-compose.yml temos nossa network externa para todos containers, um detalhe é que no strapi-app é necessário adicionar um extra_hosts para o Strapi enxergar o Keycloak.

Observação como nossa rede é externa é necessário criar via comando a rede, docker network create strapi-network.

Um outro detalhe é adicionar em nosso hosts os endereços corretos, como disse estou no mac então se eu digitar no terminal sudo vi /etc/hosts posso editar meus endereços e posso adicionar:

127.0.0.1 localhos.keycloak

Basicamente é isso não temos mais detalhes, claro que temos muito docker, então é bom ter um entendimento legal para saber o que fazer, e eu também não vou entrar em detalhes referente a cada linha de docker.

Na raiz do projeto rode os comandos yarn para poder instalar as dependências e docker compose up --build.

Observação: não esqueça do arquivo .env duplique o .env.example e preencha corretamente.

Se tudo correr bem, e todos os containers forem executados, podemos digitar:

https://localhost.keycloak/ para acessar nosso Keycloak local com https.

http://localhost:1337/admin/auth/login para acessar nosso Strapi.

Configuração Keycloak

Para acessar use admin / admin.

A configuração do Keycloak é simples vamos ter de criar nosso Realm e nosso Client.

Na criação do Relm é simples no caso eu criei um chamado strapi, e tem alguns detalhes que gosto de fazer:

• Na aba Login eu deixo assim:

• Na aba Themes eu deixo assim, adiciono um tema para os formulários, que já está no repositório:

• Na aba Localization deixo assim:

Fique livre para configurar como quiser, caso tenha mais conhecimentos do Keycloak.

Para criar o Client, também é bem simples, criei com o nome de app e ative o Client authentication e não preencha mais nada.

• Na aba Settings coloque esses endereços:

• Na aba Credentials iremos precisar apenas copiar o Client Secret para colocar no Strapi que vamos fazer nos próximos passos.

Se você já fez tudo isso finalizamos com o Keycloak.

Configuração Strapi

Após o primeiro acesso e todo cadastro de usuário, você verá a tela de login:

Para configurar o Strapi é tudo muito simples também, vá em Settings -> Providers no meu caso eu desabilitei o padrão que é de Email, e ativei o Keycloak com essas configurações:

São configurações simples, todos endereços que geramos via docker, e se tudo estiver funcionando não terá problemas, ali em Client Secret cole o Secret Key que citamos acima.

O campo Host URI foi o que deu mais trabalho, pois não podemos usar o protocolo e ele sempre aponta para o https, por isso toda a questão de usar um Nginx e as configurações mais complexas de certificados.

Tudo funcionando =)

Com tudo rodando e configurado o resultado tem de ser esse:

Pronto temos um Strapi integrado ao Keycloak, agora é possível utilizar todos poderes do Keycloak.

Repositórios:

Strapi completo: https://github.com/alcir-junior-caju/study-ts-strapi-keycloak

React (Vite) com a aplicação simples de login: https://github.com/alcir-junior-caju/study-ts-strapi-login-with-keycloak