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

(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:

A 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.
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;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:

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.

← Anterior Próximo →