Publicando Aplicativos Web no Azure utilizando Identity SQLite e GitHub Actions

Instalando o gerador e os pacotes

Primeiro, instale a ferramenta de geração de código do ASP.NET e os pacotes de que o projeto precisa:

dotnet tool install -g dotnet-aspnet-codegenerator
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add package Microsoft.AspNetCore.Identity.UI
dotnet add package Microsoft.EntityFrameworkCore.Tools

Se o scaffolder retornar algum erro mais adiante, confira as versões dos pacotes. Afinal, elas precisam ser compatíveis com o framework alvo do projeto.

Executando o scaffolder

Agora, liste as opções do scaffolder e execute-o informando a classe do usuário, as páginas que devem ser criadas e o uso do SQLite:

dotnet aspnet-codegenerator identity --help
dotnet aspnet-codegenerator identity --userClass ApplicationUser --files "Account.Register;Account.Login;Account.Logout;Account.RegisterConfirmation;Account._StatusMessage;Account.Manage.Index" --useSqLite

Como o PowerShell usa o ponto e vírgula para separar comandos, a lista de arquivos fica entre aspas. Se você quiser gerar todas as páginas do Identity, basta remover o parâmetro --files.

Para exibir os botões de login, abra Pages/Shared/_Layout.cshtml. Logo depois do </ul> que fecha os links de navegação, adicione a linha <partial name="_LoginPartial" />.

Página de registro

Em Areas/Identity/Pages/Account/Register.cshtml.cs, adicione a propriedade Name à classe InputModel:

[Required]
[Display(Name = "Name")]
public string Name { get; set; }

Em seguida, no método OnPostAsync(), logo após a linha var user = CreateUser();, adicione user.Name = Input.Name;. Dessa forma, o valor digitado vai para a propriedade do usuário.

Depois, em Register.cshtml, antes da <div> que recebe o Input.Email, inclua o campo do nome:

<div class="form-floating mb-3">
    <input asp-for="Input.Name" class="form-control" autocomplete="name" aria-required="true" placeholder="Name"/>
    <label asp-for="Input.Name">Name</label>
    <span asp-validation-for="Input.Name" class="text-danger"></span>
</div>

Página de gerenciamento da conta

Em Account/Manage/Index.cshtml.cs, adicione também a propriedade Name ao InputModel. Então, no método LoadAsync(), preencha o nome ao criar o InputModel:

Input = new InputModel
{
    Name = user.Name,
    PhoneNumber = phoneNumber
};

No método OnPostAsync(), depois do if que altera o telefone, atualize o nome quando ele mudar:

// Atualiza o nome apenas se o usuário alterou o valor
if (Input.Name != user.Name)
{
    user.Name = Input.Name;
}

await _userManager.UpdateAsync(user);

Em Account/Manage/Index.cshtml, depois da <div> do UserName, adicione o campo:

<div class="form-floating mb-3">
    <input asp-for="Input.Name" class="form-control" placeholder="Please choose your name." />
    <label asp-for="Input.Name" class="form-label"></label>
</div>

Por fim, em Pages/Shared/_LoginPartial.cshtml, troque o trecho Hello @UserManager.GetUserName(User)! por Hello @((await UserManager.GetUserAsync(User))?.Name)!. Assim, a saudação exibe o nome do usuário no lugar do e-mail.

Implementando o IEmailSender

Na aplicação, adicione o pacote com dotnet add package SendGrid. Depois, crie a pasta Services com a classe EmailSender:

public class EmailSender : IEmailSender
{
    public async Task SendEmailAsync(string toEmail, string subject, string message)
    {
        // Interrompe o envio se a chave do SendGrid não foi configurada
        if (string.IsNullOrEmpty(Configuration.SendGridKey.SendGridApiKey))
            throw new Exception("SendGrid key is missing");

        await Execute(Configuration.SendGridKey.SendGridApiKey, subject, message, toEmail);
    }

    public static async Task Execute(string apiKey, string subject, string message, string toEmail)
    {
        var client = new SendGridClient(apiKey);
        var msg = new SendGridMessage
        {
            From = new EmailAddress("noreply@example.com", "Article App"),
            Subject = subject,
            PlainTextContent = message,
            HtmlContent = message
        };
        msg.AddTo(new EmailAddress(toEmail));

        // Desativa o rastreamento de cliques nos links do e-mail
        msg.SetClickTracking(false, false);
        await client.SendEmailAsync(msg);
    }
}

O Identity usa injeção de dependência da interface IEmailSender para enviar e-mails. Por isso, no Program.cs, registre a implementação com builder.Services.AddSingleton<IEmailSender, EmailSender>();.

O ciclo de vida Singleton faz sentido aqui, já que a classe não guarda estado no aplicativo web, nem localmente nem no Azure. Com isso, sempre que o Identity precisar do IEmailSender, ele usa a implementação EmailSender.

Lendo a chave da API

No appsettings.json, adicione uma seção para a chave. O valor real ficará nas configurações do aplicativo web no Azure, então aqui usamos apenas um marcador:

{
  "SendGridKey": {
    "SendGridApiKey": "My_SendGrid_Key"
  }
}

Na raiz do projeto, crie a classe Configuration para guardar essa chave:

public class Configuration
{
    public static SendGridConfig SendGridKey { get; set; }

    public class SendGridConfig
    {
        public string SendGridApiKey { get; set; }
    }
}

Então, no Program.cs, leia a seção e atribua o valor à propriedade estática:

// Lê a seção SendGridKey e preenche a configuração estática
var sendGridKey = new Configuration.SendGridConfig();
app.Configuration.GetSection("SendGridKey").Bind(sendGridKey);
Configuration.SendGridKey = sendGridKey;

Por fim, ajuste o final do OnPostAsync() em Register.cshtml.cs e a página RegisterConfirmation, como mostra a imagem a seguir. Além disso, confirme que options.SignIn.RequireConfirmedAccount está como true na configuração do Identity.

Esse ajuste é importante porque, segundo a documentação do ASP.NET Core Identity, a página RegisterConfirmation padrão exibe o link de confirmação apenas para testes. Em produção, a verificação automática deve ficar desativada.

Grupo de recursos do aplicativo web no Azure

Com a assinatura pronta, procure por "Grupos de recursos" na barra de busca e clique em "+ Criar". Selecione a assinatura, dê um nome ao grupo e escolha a região "(South America) Brazil South".

Em seguida, clique em "Revisar + criar" e depois em "Criar". O grupo de recursos vai reunir tudo o que o aplicativo web no Azure precisa.

Da mesma forma, abra "Serviços de Aplicativos" e clique em "+ Criar". Selecione a assinatura, o grupo de recursos criado e um nome único para a aplicação, já que ele vira parte da URL.

Em "Publicar", escolha "Código"; na "Pilha de runtime", selecione a versão do .NET do projeto; e em "Sistema operacional", escolha "Linux", na região "Brazil South". No plano Linux, clique em "Criar novo", dê um nome a ele e, em "Alterar tamanho", selecione o plano "Gratuito F1, 1 GB de memória".

Para finalizar, clique em "Revisar + criar" e em "Criar". Pronto, o aplicativo web no Azure já existe, embora ainda sem o nosso código.

Centro de Implantação

No portal, abra a aplicação e selecione "Centro de Implantação" no menu lateral. Em "Source", escolha "GitHub" e autentique sua conta pelo próprio navegador.

Depois, selecione seu usuário em "Organization", o repositório da aplicação em "Repository" e a branch main em "Branch". Se quiser conferir o workflow antes, clique em "Preview file" e, em seguida, salve com "Save".

O Azure então cria a pasta .github/workflows no repositório remoto, com o arquivo main_{nome-do-app}.yml. Esse arquivo contém os passos que o GitHub Actions vai executar.

Secrets do repositório

No GitHub, abra "Settings", depois "Actions" e "General". Em "Actions permissions", marque "Allow all actions and reusable workflows" e salve.

Em seguida, abra "Secrets" e "Actions". Lá você encontra o secret AZUREAPPSERVICE_PUBLISHPROFILE_... que o Azure criou, e vamos adicionar mais dois.

O primeiro se chama AZURE_SQLITE_CONNECTION_STRING e recebe o valor DataSource=wwwroot/app.db;Cache=Shared. O segundo, AZURE_CREDENTIALS, depende de um service principal criado pela CLI do Azure:

# Troque AppName, SubscriptionId e ResourceGroupName pelos seus valores
az ad sp create-for-rbac --name "AppName" --role contributor --scopes /subscriptions/SubscriptionId/resourceGroups/ResourceGroupName --sdk-auth

Esse comando retorna um JSON, que você copia e cola como valor do secret. Vale saber que versões recentes da CLI marcam a opção --sdk-auth como obsoleta, e a Microsoft recomenda o login com OpenID Connect em projetos novos.

Ajustando o workflow do aplicativo web no Azure

Execute um git pull para trazer o workflow para o repositório local. Então, adicione a connection string, o login no Azure, a instalação do EF Tools e o database update:

name: Build and deploy ASP.NET Core app to Azure Web App - articleidentity

on:
  push:
    branches:
      - main
  workflow_dispatch:

env:
  ConnectionStrings__DefaultConnection: ${{ secrets.AZURE_SQLITE_CONNECTION_STRING }}

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: '7.x'

      - name: Azure Login
        uses: azure/login@v2
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Install EF Tools
        run: dotnet tool install --global dotnet-ef

      - name: Build with dotnet
        run: dotnet build --configuration Release

      - name: Update database
        run: dotnet ef database update

      - name: dotnet publish
        run: dotnet publish -c Release -o ${{ env.DOTNET_ROOT }}/myapp

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: .net-app
          path: ${{ env.DOTNET_ROOT }}/myapp

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: .net-app

      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'articleidentity'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXX }}
          package: .

A variável ConnectionStrings__DefaultConnection faz o dotnet ef database update criar o banco em wwwroot/app.db no runner. Como o dotnet publish copia o conteúdo de wwwroot, o arquivo do banco segue no pacote publicado.

As versões das actions acima são as majors atuais, porque as versões antigas de upload-artifact e download-artifact foram descontinuadas pelo GitHub. Para aprofundar o assunto, veja também como criar workflows reutilizáveis no GitHub Actions.