Escolha uma Página

Última Atualização

(Last Updated On: 13/10/2019)

 Vimos no artigo “Como instalar Identidade e Autorização da Microsoft criar um projeto novo com o Syncfusion“, com todos componentes que deseja usar –  e depois como acrescentar Autenticação e Identidade da Microsoft.

Neste artigo veremos como modificar e ampliar o arquivo de “usuários” (“AspNetUsers”) – personalizando-o para ter mais campos e também para usar uma identidade (ID) que seja numérica – e não string.

Passo 1: Instale a sua aplicação Core MVC 2.2

Estou Assumindo que você já tenha um aplicativo da Web com a autenticação do usuário ativada, montada pelo próprio template do Visual Studio 2017 ou 2019. Na geração da aplicação você pode configurá-lo selecionando “Contas de usuário individuais” como o tipo de autenticação ao criar seu projeto.

Ou você pode adicioná-lo manualmente a um aplicativo seguindo as instruções do artigo:

Como instalar Identidade e Autorização da Microsoft criar um projeto novo com o Syncfusion

 

Passo 2: O que pode ser alterado no arquivo de Identidade?

Há duas coisas que não gosto quando a Microsoft instala seu Microsoft Identity Manager – mas devo reconhecer que essa funcionalidade torna realmente fácil adicionar usuários ao seu site ASP.NET Core.

Há sempre duas coisas que quero sempre mudar imediatamente.

A primeira é pedir o nome de um usuário (para inclusive poder usá-lo depois na barra de navegação com um “Olá NOME DE USUÁRIO” (no lugar de “Ola EMAIL DO USUÁRIO”. A segunda é alterar aquela detestável chave primária do usuário em “string”, substituindo-a por valores “inteiros”. – tornando muito mais fácil integrar a tabela de usuários (“ASPNETUSERS”) com as demais tabelas da aplicação. Nos próximos passos deste artigo vamos ver como fazer isso.

No exemplo, ao registra um usuário vou perguntar seu NOME COMPLETO. Na sua implementação você pode optar por perguntar separadamente o nome e sobrenome (e criar, no modelo, um campo só de leitura que junta o nome com o sobrenome, criando o nome completo automaticamente (a vantagem de fazer isso é que a pessoa é sempre obrigada a digitar os 2 campos… Quando você pede somente o nome completo, ela pode desconsiderar e digitar somente o primeiro nome).

Você pode acrescentar quantos campos quiser no padrão de gerenciamento de identidade padrão da Microsoft, que por default utiliza apenas de endereços de e-mail.

Finalmente, como já falei,  gosto de mudar a chave primária de uma string para um inteiro para corresponder ao resto do meu modelo de dados. Costumo preferir números inteiros em GUIDs, e não strings, difíceis de conferir. O pressuposto aqui é que você já tenha um aplicativo da Web com a autenticação do usuário ativada. Ao criá-lo, você pode configurá-lo selecionando Contas de usuário individuais como sendo o tipo de autenticação do projeto. Ou você pode adicioná-lo manualmente a um aplicativo seguindo nossas instruções no artigo do Passo 1.

 

Passo 3: Adicionando novos modelos para Autorização / Identidade

Vamos começar adicionando dois novos modelos ao nosso aplicativo. Nas suas pastas Modelos (Models), crie uma nova classe chamada AppRole que estende o IdentityRole. Isso pode ser usado para atribuir funções especiais a usuários como “admin” e outras categorias de usuários, com papéis diferentes na sua aplicação.

Em seguida, adicione uma classe AppUser que amplia o IdentityUser para que possamos coletar mais dados sobre eles (você pode acrescentar mais campos se quiser). Note que o nome completo é montado a partir de nome sobrenome, neste exemplo.

Note que as duas classes são marcadas com <int>.

Isso informa ao Gerenciamento de Identidades que queremos usar chaves primárias baseadas em números inteiros.

O AppUser marca suas propriedades com algumas anotações de dados padrão para tornar o primeiro e o último nome necessários com um comprimento máximo de 20 caracteres. Essas propriedades também são marcadas com PersonalData, ficando disponíveis automaticamente para download e exclusão.

Tornar os dados capazes de serem baixados e excluídos ajuda a atender aos requisitos GDPR. Também foi uma propriedade FullName para formatar de forma consistente o nome completo de um usuário em todo o aplicativo.

Passo 4 – Preparando o banco de dados

Muito provavelmente sua aplicação vai rodar em um servidor externo MYSQL ou MSSQL.

Crie o database em vazio (sem tabelas ainda) e pegue a definição da string de conexão. Exemplo:

“Data Source=EndereçoDoServidor;Initial Catalog=NomeDOBancoDeDados;User Id=NomeDoUsuario;Password=SenhaDoUsuario;”

No arquivo appsetings,json TROQUE a string de conexão gerada na criação do seu aplicativo pela sua string de conexão.

Passo 5 – Atualizando o Context Database (diretório Data, arquivo ApplicationDbContext.cs

O contexto do banco de dados estende IdentityDbContext, precisamos atualizá-lo para informá-lo sobre nossas novas classes e estratégia de chave primária.

 

Nós também queremos adicionar ou atualizar OnModelCreating para ignorar a propriedade FullName que adicionamos. É uma propriedade computada que não queremos armazenar no banco de dados.

Nossa classe de inicialização está fazendo referência à identidade padrão. Precisamos atualizá-lo para nossa identidade personalizada. Antes, no arquivo startup.cs:

Depois:

Passo 6 – Atualizando _loginPartial.cshtml

O controle de login na barra de ferramentas também possui referências que precisam ser atualizadas. (Não se esqueça de adicionar uma declaração usando à sua pasta de modelos aqui.)

 

Lembre-se não vamos mais mostrar ao usuário seu endereço de e-mail. Em vez disso, vamos mostrar seu nome.

Antes:

Depois:

Possível Problema com caracteres alienígenas

Se a linha do navegador apresentar caracteres internacionais com símbolos alienígena, é porque o Visual Studio salvou o arquivo _loginPartial.cshtml em ANSI – e não em UTF-8.

O artigo aqui explica isso. Abra o arquivo _loginPartial.cshtml  com o notepad++  (instale esse editor gratuito que é fantástico, dá de 100 a 0 no notepad da Microsoft). Salve o arquivo com ENCODING UTF-8 e rode a aplicação para ver como “sumiram os caracteres alienígenas”.

 

Passo 7 – Substituir páginas de identidade padrão (Default Identity Pages)

  1. Clique com o botão direito no nome do projeto.
  2. Selecione ADD> New Scaffolded Item.
  3. Selecione Identity (Identidade) no menu à esquerda.
  4. Selecione ADD.
  5. Escolha Account/Manage/Index e também a opção Account/Register.
  6. Selecione sua classe de contexto do banco de dados existente.

Isso criará novas páginas para o registro do usuário e a página do perfil do usuário, onde podemos solicitar o primeiro e o último nome.
Nota> se quiser usar o primeiro nome, o ultimo no ou ainda o nome completo, em outras páginas, escolha essas páginas já no item 5, acima,

 

Passo 8 – Arquivo _ValidationScriptsPartial.cshtml

Copie o HTML do seu arquivo atual, localizado na pasta Pages/Shared, para o novo na pasta Areas/Identity/Pages, para ter certeza de que são os mesmos.

 

Passo 9 – Arquivo Register.cshtml.cs

Adicione propriedades de primeiro e último nome à classe InputModel. Se não encontrar o arquivo, é porque se esqueceu de fazer o ADD NEW SCAFFOLDED do passo 7. Este arquivo Fica na pasta Areas;Identity/Pages/Account e dentro de Register.cshtml

 

Adicione esses valores de propriedade à declaração de variável do usuário em OnPostAsync

Passo 10 – Arquivo Register.cshtml

Adicione os campos de entrada para primeiro e último nome, logo abaixo do controle asp-validation-summary.

 

Passo 11 – Arquivo Index.cshtml.cs

Esta é uma classe de fica no folder Areas/Identity/Pages/Account/Manage

Adicione novamente as propriedade first e last name na classe InputModel.

Atualize a variável Input e OnGetAsync para popular essas propriedades.

Salve as propriedades em OnPostAsync que fica próxima ao final do método.

Passo 12 – Arquivo Index.cshtml

Adicione os campos de entrada para nome e sobrenome abaixo da entrada de e-mail e acima do número de telefone.

Passo 13 – Atualizando Migrações (Update Migrations)

O próximo passo lógico é atualizar migrações, para criar no banco de dados todas as tabelas de autorização e de identidade (ji usando números inteiros para o ID de pessoas (Users) e regras (Roles). 

Se o seu banco de dados está criado mas está vazio (sem tabelas)

Neste caso minha primeira recomendação é criar um template do seu projeto, para que você possa iniciar novas aplicações já a partir do estágio atingido no passo 12. Para criar o template:

  1. No menu superior dê um BUILD na solução para ter certeza de que não há nenhum erro ou file,
  2. Salve os arquivos todos.
  3. No menu superior, em Project, escolha Export Template. Deixe marcado Export Template e dê um NEXT. e um nome e uma descriçao para o seu temlate, que vai aparecer cada vez que você iniciar um novo projeto

Se eu banco de dados está criado, mas não está vazio (tem tabelas)

Isso significa que você já fez pelo menos alguma migração neste projeto. Se você tentar adicionar uma nova migração, ela falhará devido à alteração da chave primária.

Neste caso, o caminho mais fácil é:

  1. Excluir sua pasta de migração
  2. Excluir seu banco de dados ou recriá-lo (não esqueça de mudar a string de conexão em APPSETTINGS.
  3. Se você não quiser recriar o banco de dados, mas somente limpá-lo completamente, deixando-o sem tabelas, views e procedures, rode no sue MSSQL a rotina proposta abaixo. Abra uma janela de NEW QUERY, copie a rotina e execute.
  4. Depois de recriar ou limpar o banco de dados, você poderá adicionar sua “primeira migração”.
  5. No Console do Gerenciador de Pacotes PMC rode estes dois comandos, um após o outro:
    1. Add-Migration Initial -o Data\Migrations
    2. Update-Database

Agora execute seu aplicativo e você poderá registrar uma conta com nome e sobrenome, ver o nome do usuário na barra de navegação e atualizar o primeiro e último nome. Agora você pode usar a propriedade AppUser.Id em seus próprios modelos para referenciar o registro do usuário como faria com qualquer outro modelo.

 

Rodando o script acima, ele vai mostrar que apagou os índices e as tabelas:

Dropped FK Constraint: FK_AspNetRoleClaims_AspNetRoles_RoleId on AspNetRoleClaims
Dropped FK Constraint: FK_AspNetUserClaims_AspNetUsers_UserId on AspNetUserClaims
Dropped FK Constraint: FK_AspNetUserLogins_AspNetUsers_UserId on AspNetUserLogins
Dropped FK Constraint: FK_AspNetUserRoles_AspNetRoles_RoleId on AspNetUserRoles
Dropped FK Constraint: FK_AspNetUserRoles_AspNetUsers_UserId on AspNetUserRoles
Dropped FK Constraint: FK_AspNetUserTokens_AspNetUsers_UserId on AspNetUserTokens
Dropped PK Constraint: PK___EFMigrationsHistory on __EFMigrationsHistory
Dropped PK Constraint: PK_AspNetRoleClaims on AspNetRoleClaims
Dropped PK Constraint: PK_AspNetRoles on AspNetRoles
Dropped PK Constraint: PK_AspNetUserClaims on AspNetUserClaims
Dropped PK Constraint: PK_AspNetUserLogins on AspNetUserLogins
Dropped PK Constraint: PK_AspNetUserRoles on AspNetUserRoles
Dropped PK Constraint: PK_AspNetUsers on AspNetUsers
Dropped PK Constraint: PK_AspNetUserTokens on AspNetUserTokens
Dropped Table: __EFMigrationsHistory
Dropped Table: AspNetRoleClaims
Dropped Table: AspNetRoles
Dropped Table: AspNetUserClaims
Dropped Table: AspNetUserLogins
Dropped Table: AspNetUserRoles
Dropped Table: AspNetUsers
Dropped Table: AspNetUserTokens

Note, abaixo, que as tabelas foram geradas dom IDs com números inteiros!!!

Rodando a aplicação, a tela de entrada contendo à direita os campos de Login e Registro

Tela de Registro, com Nome e Sobrenome:

Tela Inicial, mostrando o nome no lugar do e-mail. E aparece o campo de Logout, no lugar de login.

Instalando o Syncfusion

Instalando os pacotes via NuGet Packages

O NuGet Package Manager pode ser usado para pesquisar e instalar pacotes do NuGet na solução ou no projeto do Visual Studio.

Passo 1 : Clique com o botão direito do mouse no projeto / solução na guia Solution Explorer e escolha Manage NuGet Packages…

 

Alternativamente, clique Tools, menu, NuGet Package Manager | Manage NuGet Packages for Solution…

Passo 2 : Selecione o NuGet.org na lista suspensa Fonte do pacote (Package source drop-down).

Passo 3 : Todos os Pacotes do Syncfusion NuGet estão listados e disponíveis. Pesquise e instale os pacotes necessários em seu aplicativo clicando no botão Instalar..

Os pacotes Syncfusion NuGet estão disponíveis publicamente em NuGet.org desde a versão v16.2.0.46 . Para instalar versões anteriores à 16.2.0.46 , configure Syncfusion URL fees privado.

Em nosso exemplo vamos instalar a versão CORE J2 17.2.0.34.

Os controles do ASP.NET Core UI são criados do zero para serem leves, responsivos, modulares e sensíveis ao toque. Inclui mais de 50 componentes, incluindo grade, gráfico, agendador e muito mais. Saiba mais: https://www.syncfusion.com/aspnet-core-ui-controls Características principais:

  • Suporta o TagHelper e o construtor fluente para inicialização de controle.
  • Suporte de anotação de dados.
  • Temas internos impressionantes, incluindo material, bootstrap, tecido, etc.
  • Conformidade com os padrões de acessibilidade – WCAG 2.0 e Seção 508.

Componentes e controles disponíveis:

GRIDS
DataGrid
Pivot Table
Tree Grid (Preview)
DATA VISUALIZATION
Charts
Stock Chart (Preview)
Circular Gauge
Diagram
Heatmap chart
Linear Gauge
Maps
Range Selector
Smith Chart
Sparkline Charts
TreeMap
EDITORS
Rich Text Editor
Word Processor
Chips (Preview)
CALENDARS
Scheduler
Calendar
DatePicker
DateRangePicker
DateTime Picker
TimePicker
BUTTONS
Button
ButtonGroup
Dropdown Menu
Progress Button
Split Button
DROPDOWNS
AutoComplete
ComboBox
Dropdown List
MultiSelect Dropdown
NAVIGATION
Accordion
Context Menu
Menu Bar
Sidebar
Tabs
Toolbar
TreeView
INPUTS
Form Validator
TextBox
Input Mask
Numeric Textbox
Radio Button
Checkbox
Color Picker
File Upload
Range Slider
Toggle Switch Button
LAYOUT
Avatar
Card
Dialog
ListView
Tooltip
Splitter (Preview)
NOTIFICATIONS
Badge
Toast
FORMS
In-place Editor (Preview)
Viewer
PdfViewer (Preview)

Passo 4: Ajustes Finais

Visual Studio 2017/2019

Abra o arquivo ~/Views/_ViewImports.cshtml e importe o pacote Syncfusion.EJ2. Acrescente:

@addTagHelper *, Syncfusion.EJ2

Adicione os recursos do lado do cliente por meio do CDN ou do pacote npm local no elemento <head> da página de layout ~/Views/Shared/_Layout.cshtml. Acrescente:

Adicione o Essential JS 2 Script Manager no final do elemento <body> na página de layout ~/Views/Shared/_Layout.cshtml.

Agora, adicione os componentes do Syncfusion Essential JS 2 em qualquer página da web (cshtml) na pasta Views.

Por exemplo, o componente de calendário é adicionado na página ~/Views /Home/Index.cshtml.

Execute o aplicativo. O componente de calendário do Essential JS 2 será renderizado no navegador da web.

Conclusão

Agora você pode salvar o template do projeto considerando o uso dos componentes e controles do Syncfusion. Basta ir in Projec->Export Template. Ao iniciar um novo projeto, poderá desfrutar de inicio de todas as mudanças. Eventualmente, terá de mudar a conexão ao banco de dados (em appsettings), apagar o diretórios migrations e fazer a primeira migração novamente. Mas isso é coisa que tomará ,initos – e não horas. Esperamos que tenha curtido este artigo e – se tiver sugestões ou dúvidas – é só nos enviar,