Implementando os recursos extras para o Plugin cake-control do CakePHP 3


Em Inglês

Obs: Este é um plugin para controle de acesso com bons recursos para Aplicativos usando o Framework CakePHP 3.

O Plugin cake-control está no GitHub:

https://github.com/ribafs/cake-control


O plugin tem Suporte a PostgreSQL e MySQL

Na pasta docs existe um script para a criação das tabelas groups, users, permissions e outras (para mysql e para postgresql),  que serão usadas na criação da seção de administração. Quando for criar outro aplicativo, pode usar o roteiro abaixo e criar suas próprias tabelas no lugar destas, assim como gerar seu próprio código, usando o Bake ou partindo do zero.

Lembre de manter as tabelas groups, users e permissões, pois são a base do Plugin cake-control.

Customers é apenas tabela de demonstração, apenas para demonstrar como poderemos criar as nossas.

Os registros da tabela permissions serão cadastrados pelo aplicativo automaticamente, através da chamada do componente em AppController.php, somente quando implementarmos a autenticação, no primeiro login.


Roteiro para a criação do aplicativo com Controle de Acesso

Considere que estou criando um aplicativo chamado de control1 (altere a vontade)

Vou considerar que você já tenha criado o aplicativo, instalado o plugin e feito as demais configurações básicas suegridas no artigo abaixo:

http://ribafs.org/portal/cakephp/plugins/cake-control/introducao

1) Datas no formato usado no Brasil e bake gerando Users já com login e logout

Faça o download do plugin em
https://github.com/ribafs/cake-control

Descompacte e acesse a pasta docs. Então faça as seguintes cópias sobrescrevendo existentes:

bootstrap.php para a control1/config (somente para idiomas diferentes do en_US. Se diferente de pt_BR adapte)
bootstrap_cli.php para a control1/config (template para Bake gerar Users com login e logout)
AppController2.php para control1/src/Controller/AppControler.php

Obs.: O AppController2.php já contém os helper e o layout.
O bootstrap.php já vem com o plugin CakeControl carregado, além da formatação de datas para o Brasil.


2) Gerar novamente os CRUDS mas agora com suporte à formatação brasileira de datas e gerando login e logout

Agora irei gerar todo o código novamente, pois agora irá gerar com os dois templates (default e bootstrap).

cd control1

bin/cake bake all groups --theme CakeControl --force
bin/cake bake all users --theme CakeControl --force
bin/cake bake all permissions --theme CakeControl --force
bin/cake bake all customers --theme CakeControl --force

O --force sobrescreve o código existente sem pedir confirmação.


Cadastro dos 4 Usuários

Os usuários já foram incluídos com o migrations.


Acesse pela Web, ou melhor, vá ao navegador e tecle F5 para atualizar.

http://localhost/control1/

Veja que agora ele solicita senha, já está com o bootstrap e devemos remover o menu estático.

Após o Primeiro Login

Comente as linhas abaixo no método initialize() do AppController.php, que não são mais necessárias

/*
            $this->Control->populate(1);
            $this->Control->populate(2);
            $this->Control->populate(3);
*/

Customizando o less

Os procedimentos abaixo já estão implementados. Seu menu já deve aparecer com links brancos, mas relatei caso queira customizar algo.

Precisamos mudar a cor dos links (a de âncora), sobrescrevendo o comportamento do bootstrap em:

Verificando com o inspector do navegador, percebi que preciso alterar a cor da âncora da classe btn-primary.

Mas é melhor não alterar a mesma, pois estarei alterando outras áreas. Idealmente criaremos outra classe adicionando apenas o a e herdando de btn-primary.

Edite então o script:

vendor/ribafs/cake-control/webroot/less/buttons.less

Logo abaixo da classe

.btn-primary {

Criei esta:


.btn-primary a {
  color: #fff;
}


Antes de implementar o controle de acesso é uma boa ideia desabilitar o menu estático que criei, para que o dinâmico entre em ação:

Edite o arquivo

control1/vendor/ribafs/cake-control/src/Template/Layout/admin.ctp

e comente a linha 74, assim:
//                    echo $this->element('CakeControl.topmenu-no');

Comente também de
control1/vendor/ribafs/cake-control/src/Template/Layout/default.ctp

Datas Formatadas para Brasil

Após implementar a autenticação e usar o ControlComponent.php veja o formato das datas em qualquer um dos controllers.

3) Acesse o aplicativo pela web

Já existem 4 usuários cadastrados: super, admin, manager e user.

Experimente acessar com:

super e super

Item de Menu CakeControl

Caso apareça um item de menu CakeControl, vá até o gerenciador do banco de dados e remova os registros que tem o Controller CakeControl na tabela permissions
então vá até o AppController e comente estas 3 linhas:
/*            
            $this->Control->populate(1);// Full permissions in all tables to users from Supers group            
            $this->Control->populate(2);// Full only in groups, users and permissions tables to users from Admins group            
            $this->Control->populate(3);// All in all tables that are not groups, users and permissions to all users from group Managers
*/            
Agora pode voltar ao navegador e teclar F5 para atualizar.

Veja aqui:

Observe que a criptografia já está ativa, pois a senha não aparece em texto claro, mas criptografada.



É interessante remover o campo senha da index.ctp, tanto label quanto valor. Edite o control1/src/Template/Users/index.ctp e remova esta linha:
                <th><?= $this->Paginator->sort('password') ?></th>

E esta:
                <td><?= h($user->password) ?></td>

Então seu Users/index aparecerá assim (confira o formato das datas):


Agora temos 4 grupos, com um usuário em cada um:

Supers - poder total, acessam tudo do aplicativo
Admins -acesso total às tabelas administrativas: groups, users e permissions
Managers - acessam tudo que Admins não acessam: todas as tabelas diferentes de groups, users e permissions, no caso servidores
Users - inicialmente tem acesso somente ao login e logout. Para que possa acessar qualquer outro action precisa que seja cadastrado nos actions respectivos.

Dois Layouts

Observe que qaundo efetuamos login com manager ou user cor do background fica branca. Esta foi a única alteração que fiz para diferenciar os dois layouts:


3.2) Testando o Aplicativo

Para liberar o acesso ao aplicativo comente a linha 73 do control1/src/AppController.php e salve.

Dica: lembrando que os usuários dos grupos Managers e Users são automaticamente redirecionados para o controller Customers, visto que não têm acesso ao controller default que é Groups. Caso não tenha o controller Customer então altere a propriedade $noAdmins no AppController.php.

Experimente acessar com:
login - user
senha - user

Ele acessa, tanto que mostra "Logged in as user" e o botão Logout, mas recebe uma
mensagem de erro por não ter acesso a Customers/index.

Veja a mensagem que recebo ao tentar acessar Users/index com o usuário manager:


Dica: O componente popula automaticamente a tabela permissions, mas somente com permissões para supers, admins e managers. Nada para users

Customização do Template

Observe que a mensagem acima e à esquerda "Logado como: super" não está aparecendo (esta tela foi capturada com o código original do login twbs-cake-plugin).
Novamente contei com a ajuda da excelente ferramenta Inspecionar Elemento (Firefox) ou Inspetor (Chrome).
Cliquei com o botaõ direito na região onde sabia que a mensagem estava e escolhi Inspecioinar elemento. Então percebi que havia o seguinte código HTML para a região:

Veja à direita uma clase logado que exise na linha 35 do script scaffolding.less (em control1/vendor/ribafs/cake-control/webroot/less).
No seu esta classe também já existe, mas foi criada por mim, realmente na linha 35 do scaffolding.less. Estou relatando, pois acho importante saber disso para customizar o template.

Veja como ficou após criar a classe logado:



3.3) Concedendo Permissões


Vamos dar acesso ao usuário user apenas no controller Servidores e action index().

Acesse pela web
http://localhost/control1/permissions/add

(Faça login como super ou admin. Ambos têm permissão de acesso total em Permissions)

Antes acesse como user e user para ver que não tem acesso a nada.

E adicione uma nova Permissions para o Group "Users" acessar o controller Servidores, action index:
Somente para efeito de testes.

Group - Users
Controller - Customers
Action - index

Obs.: idealmente devemos criar duas combos para o Permissions/add.ctp, uma para controller e outra para action.

Clique em Sair

- Faça login agora com o usuário "user" e senha "user":

http://localhost/control1/ 

Experimente acessar qualquer outro action, que não seja index. Será negado o acesso.
Também é importante observar que não aparece, por default o ícone do Excluir, mas isso somente acontece com o usuário user.
Se quizer ver o código para este comportamento acesse Template/Users/Index.ctp os ifs.


Escondendo o Delete do usuário user em Servidores

Observe que mesmo não tendo permissão de acessar Delete o usuário user consegue deletar os registros. Um bug no componente.
Um paliativo é esconder o ícone do delete do usuário user no controller Servidores.
Para isso efetue as alterações no src/Template/Servidores/index.ctp de acordo com o arquivo:

https://raw.githubusercontent.com/ribafs/cake-control/master/docs/dicas/esconderDelete.txt

Após implementar o código acima a tela de Servidores quando o user se loga fica assim (escondendo o ícone do Delete):



3.4) Dica
Removemos o rótulo e o valor do campo password em Template/Users/index.ctp, fica a sugestão de proceder de forma semelhante para tabelas com muitos campos, deixe apenas os mais importantes na index.ctp. Lembre que fazendo isso apenas deixará de mostrar alguns campos na tela.

4) Implementar busca

O exemplo mais prático é o de Customers, que já está quase pronto.

Edite o controller CustomersController.php e descomente o action index() do controller Customers e comente ou remova o action index() existente.
Caso queira implementar para outro controller faça as devidas alterações, tanto do controller quanto dos campos.

Depois acesse o index.ctp do Template/Customers e remova as linhas 10 e 17 (comentários) do código da busca.

ALERTA: o código existente e comentado para a busca é para customers e com os campos atuais. Caso queira implementar a busca para outra tabela e com outros campos precisará efetuar as devidas alterações no código.

Veja como ficou a busca no Customers


5) Customização dos Rótulos

Veja o arquivo FormHelper.txt, com algumas dicas sobre o assunto:
https://github.com/ribafs/cake-control/blob/master/docs/dicas/FormHelper.txt


6) Validações

De cpf, cnpj, fone, email, data, cep, null, not null, login (nome.sobrenome)
Apenas alguns foram implementados. Veja o arquivo docs/ValidacoesDicas.txt:

https://github.com/ribafs/control-default/blob/master/docs/dicas/ValidacoesDicas.txt


7) DisplayField()
Veja que Servidores/index mostra o ID dos usuários mas vamos mudar isso para que
apareça o username ao invés do ID.
Veja como está no original:

Os valores da coluna User, que são o campo user_id na tabela servidores. Está aparecendo os IDs, mas como servidores e users estão relacionados o Cake em um método que ajuda a trazer ao invés do ID mas trazer outro campo da tabela users. No caso vamos trazer o campo username, que é melhor de identificar que o ID.

Veja em Permissions, que Group, que é group_id já vem com o Name do group e não com o id:

Isso acontece porque group já atende à convenção do cake de vir com um campo do tipo name. Quando a tabela tem um campo chamado name ou title, ele já é aproveitado automaticamente no displayField().

Acontece o mesmo com ProductItems relacionado com Products que já mostra o name de Products sem ter que fazer nada, apenas seguir a convenção.

Veja como fazer no arquivo docs/displayField.txt:
https://raw.githubusercontent.com/ribafs/cake-control/master/docs/dicas/displayField.txt

Então ficará assim:

Ao invés dos IDs aparecem os usernames.


Editor TinyMCE automaticamente em campos do tipo textarea


- Copiar toda o conteúdo da pasta docs/js para A pasta control1/webroot/js

- Copiando a pasta js o template bootstrap já está pronto para o TinyMCE

Veja em Customers/add o campo observation, que já mostra o editor.: