Escolha uma Página

Syncfusion Core: como instalar Identidade e Autorização da Microsoft

por | 14/07/2019 | Desenvolvimento de Aplicações, Dicas, Identidade/Autorização, Syncfusion, Tutorial | 0 Comentários

(Last Updated On: 13/10/2019)

Antigamente, ao definir um projeto novo em core MVC, você tinha que definir se o projeto teria ou não identificação/autorização. A partir do core 2.1 isso não é mais necessário. Você pode definir isso depois. Melhor ainda: você pode criar um projeto novo com o Syncfusion, com todos componentes que deseja usar –  e depois acrescentar Autenticação e Identidade da Microsoft

Passo 1: Instale o Gerenciador (Painel de Controle) da Syncfusion

Ao instalar, escolha ao menos a opção Syncfusion ASP.NET Core versão JS 2. Importante: pegue sua licença comunitária na Syncfusion antes… Ela serve para todos seus projetos.

Passo 2: Instale as extensões “Syncfusion Visual Studio extension”.

Você pode definir se quer as extensões para o Visual Studio 2017, 2019 ou ambas. Notar que na verdão 2017 as opções do Syncfusion estarão na barra superior, primeiro nível. Já no 2019. procure em Extesões -> Syncfusion. Veja aqui como fazer.

Passo 3: Gere sua aplicação inicial

Duas opções para gerar:

  1. logo syncfusionA partir do Visual Studio: procure o template CORE MVC com a marca da SYNCFUSION (deve ser o último da lista) e gere a aplicação.
  2. A partir do Painel de Controle da Syncfusion. Neste caso, você pode pré-selecionar todos os componentes que pretende usar em seus projetos.

Nos dois casos você pode escolher se quer arquivos auxiliares locais ou em CDN (eu escolhi CDN) e o tipo de tema que vai querer usar (eu escolhi Bootstrap).

Uma vez que você criou o projeto, rode em debug para ver se está OK na máquina local.

Passo 4: Instale a Identidade/Autorização da Microsoft

  • Clique (com o botão da direita) no nome de seu  projeto no Solution Explorer do Visual Studio. Você deverá rodar o Identity Scafolder;  Add > New Scaffolded Item.
  • No painel esquerdo do diálogo Add Scafold,  selecione  Identity > ADD;
  • No Add Identity, selecione as opções que você vai querer usar (tipo págias de deleção, de troca de senha, de confirmação de e-mail, etc – além da página de login);
    • Selecione a página de layout que você já possui (_layout.cshtm, normalmente em Views/Shared). Do contrário, seu arquivo de layout será escrito com códigos incorretos. Por exemplo , escolha ~/Pages/Shared/_Layout.cshtml  se você tiver páginas Razor. Ou <~/Views/Shared/_Layout.cshtml para projetos MVC (seu caso deve ser este)
    • Selecione o botá + para criar uma Classe de Contexto de Dados (Data context class) . O sistema vai sugerir um, use esse. Se não sugerir, defina um,
  • Selecione ADD.

Passo 5: Acertando o arquivo de Layout (_layout.cshtm)

Para poder “ver” os dados de login assim que rodar a aplicação, é fundamental adicionar no seu arquivo  Views/Shared/_Layout.cshtml o login parcial ( (_loginPartial). Para isso terá que inserir <partial name=“_LoginPartial” />. Como a aplicação usa cookies, também terá de inserir <partial name=”_CookieConsentPartial” />. Veja no arquido de exemplo abaixo onde  deve inserir esses comandos. No SEU próprio arquivo, nã mude MAIS NADA a não ser incluir essas duas linha. Veja um exemplo abaixo (não copie todas as linhas para o seu arquivo  Views/Shared/_Layout.cshtml.

Exemplo de c&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;digo: veja onde inserir as linhas de login parcial e cookies no arquivo _layout.cshtm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DiagnosticoCultura</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous" />
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    </environment>
  <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/17.2.34/bootstrap4.css" />

  <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js"></script>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">DiagnosticoCultura</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" asp-controller="Home" asp-action="Index">Home<span class="sr-only">(current)</span></a>
                    <!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
                </li>
                <li class="nav-item">
                    <a class="nav-link" asp-controller="Home" asp-action="About">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" asp-controller="Home" asp-action="Contact">Contact</a>

                </li>
            </ul>
            @* https://docs.microsoft.com/pt-br/aspnet/core/security/authentication/scaffold-identity?view=aspnetcore-2.2&tabs=visual-studio *@
            <partial name="_LoginPartial" />



            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    @* https://docs.microsoft.com/pt-br/aspnet/core/security/authentication/scaffold-identity?view=aspnetcore-2.2&tabs=visual-studio *@
    <partial name="_CookieConsentPartial" />



    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - DiagnosticoCultura</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous">
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    <ejs-scripts></ejs-scripts>
    @RenderSection("Scripts", required: false)
</body>
</html>

Você tem muitas outras opções de incluir ou alterar a identidade. Basta conferir no artigo “Scaffold Identity in ASP.NET Core projects” da Microsoft.

Passo 6 – 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 7 – Fazendo o Scafolding acertar seu banco de dados, criando as tabelas para identificação e autorização

A identidade é essencialmente configurada em Areas/Identity/IdentityHostingStartup.cs. Para mais informações, consulte IHostingStartup.

As tabelas do banco de dados para Identidade e Autorização requerem o uso do Entity Framework Core Migrations. Será necessário fazer uma migração e autulizar o banco de dados. Isso pode ser feito em Tools->NudgePackageManager->PacketManagerConsole (usuamente chamada de PMC). Rode os seguintes comando:

 

Rodando o Scafolding no PMC

Add-Migration CreateIdentitySchema
Update-Database

O parâmetro “CreateIdentitySchema” psrs o comando Add-Migration descreve no nome da migração. Ele é opcional, mas é sempre últil dar um nome para você lembrar depois o que essa migração fez (criou nova tabela, modificou uma tabela, acrescentou um campo, eliminou um campo, etc.

No arquivo startup.cs é fundamental ter certeza que estão as seguintes linhas de configuração da aplicação:

app.UseStaticFiles();

app.UseAuthentication();

A segunda linha é fundamental. Veja abaixo onde encaixar essas 2 linhas:

Incluindo app.UseStaticFiles() e app.UseAuthentication(); no arquivo startup.cs

public class Startup
{

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseAuthentication();
        app.UseMvcWithDefaultRoute();
    }
}

Agora você pode rodar sua aplicação localmente e fazer os ajustes que quiser. Os 2 artigos da referência dão muitas dicas, inclusive para implementar o serviço de e-mail e alterar páginas Razor.

Referências:

  1. Scaffold Identity in ASP.NET Core projects
  2.  Changes to authentication code to ASP.NET Core 2.1 and later
  3. Syncfusion VS extensions now on the Visual Studio Marketplace!
  4. ASP.NET Core Extensions – Syncfusion
  5. Syncfusion Visual Studio Extensions
  6. Identity model customization in ASP.NET Core
  7. Add, download, and delete custom user data to Identity in an ASP.NET Core project
  8. Syncfusion -Get Your Free Trial Today

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários aqui no final da página.

Trackbacks/Pingbacks

  1. Modificando e ampliando o Gerenciamento de Identidades do ASP.NET Core 2.2 e implementar Componentes Synfusion | Core MVC - […] no artigo “Como instalar Identidade e Autorização da Microsoft criar um projeto novo com o Syncfusion“, com todos componentes…

Enviar Comentário

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.