Compartilhar via

Desenvolver aplicativos do ASP.NET com o Azure Active Directory

  • Artigo

por Rick Anderson

As ferramentas do Microsoft ASP.NET para o Azure Active Directory simplificam a habilitação da autenticação para aplicativos Web hospedados no Azure. Você pode usar a Autenticação do Azure para autenticar Office 365 usuários de sua organização, contas corporativas sincronizadas do Active Directory local ou usuários criados em seu próprio domínio personalizado do Azure Active Directory. Habilitar a Autenticação do Windows Azure configura seu aplicativo para autenticar usuários usando um único locatário do Azure Active Directory .

Este tutorial mostrará como criar um aplicativo ASP.NET configurado para logon com o Azure Active Directory (Azure AD). Você também aprenderá a chamar o API do Graph para obter informações sobre o usuário conectado no momento e como implantar o aplicativo no Azure.

Pré-requisitos

  1. Visual Studio Express 2013 para Web ou Visual Studio 2013.
  2. Visual Studio 2013 Update 4 – a atualização 3 ou superior é necessária.
  3. Uma conta do Azure. Clique aqui para obter uma avaliação gratuita se você ainda não tiver uma conta.

Adicionar um administrador global ao Active Directory

  1. Entre no Portal de Gerenciamento do Azure.

  2. Todas as contas do Azure contêm um Diretório Padrão – clique nele e clique na guia Usuários na parte superior da página (consulte a imagem abaixo).

  3. Clique em Adicionar usuário. Captura de tela do Portal de Gerenciamento do Azure, com Diretório Padrão descrito e selecionado à esquerda, USUÁRIOs descritos à direita e ADD USER descrito no rodapé.

  4. Crie um novo usuário com a função administrador global . Clique em Usuários no menu superior e, em seguida, clique no botão Adicionar Usuário na barra de comandos.

  5. Na caixa de diálogo Adicionar Usuário , insira um nome para o novo usuário e clique na seta para a direita.

    Captura de tela da caixa de diálogo Adicionar Usuário, com a instrução

  6. Insira o nome de usuário e defina a função como Administrador Global. Os administradores globais exigem um endereço de email alternativo para fins de recuperação de senha. Depois de terminar, clique na seta para a direita.

    Captura de tela do perfil do usuário na caixa de diálogo ADICIONAR USUÁRIO, com o Administrador Global selecionado para ROLE. O campo ENDEREÇO DE EMAIL ALTERNATIVO está realçado.

  7. Na próxima página da caixa de diálogo, clique em Criar. Uma senha temporária será criada para o novo usuário e exibida na caixa de diálogo.

    Captura de tela do perfil do usuário na caixa de diálogo ADICIONAR USUÁRIO, com a instrução Obter senha temporária exibida e o botão Criar aparecendo abaixo.

    Salve a senha, você precisará alterar a senha após o primeiro logon. A imagem a seguir mostra a nova conta de administrador. Você deve usar o Azure Active Directory para fazer logon em seu aplicativo, não a conta microsoft também mostrada nesta página.

    Captura de tela da nova conta de administrador, com as colunas NOME DE EXIBIÇÃO, NOME DE USUÁRIO e SOURCED FROM aparecendo na tabela.

Criar um aplicativo ASP.NET

As etapas a seguir usam Visual Studio Express 2013 para Web e exigem Visual Studio 2013 Atualização 3.

  1. No Visual Studio, clique em Arquivo e em Novo Projeto. Na caixa de diálogo Novo Projeto , selecione o projeto Web do Visual C# no menu à esquerda e clique em OK. Talvez você também queira desmarcar a opção Adicionar Application Insights ao Project se não quiser a funcionalidade do aplicativo.

  2. Na caixa de diálogo Novo projeto ASP.NET , selecione MVC e clique em Alterar Autenticação.

    Captura de tela da caixa de diálogo Novo Projeto DOT NET do SP, com o modelo M V C selecionado, o botão Alterar Autenticação descrito e o Host na nuvem selecionado.

  3. Na caixa de diálogo Alterar Autenticação , selecione Contas Organizacionais. Essas opções podem ser usadas para registrar automaticamente seu aplicativo com Azure AD, bem como configurar automaticamente seu aplicativo para integração com Azure AD. Você não precisa usar a caixa de diálogo Alterar Autenticação para registrar e configurar seu aplicativo, mas isso facilita muito. Se você estiver usando o Visual Studio 2012, por exemplo, ainda poderá registrar manualmente o aplicativo no Portal de Gerenciamento do Azure e atualizar sua configuração para se integrar ao Azure AD. Nos menus suspensos, selecione Nuvem – Organização Única e Single Sign On, Ler dados do diretório. Insira o domínio do diretório Azure AD, por exemplo (nas imagens abaixo) aricka0yahoo.onmicrosoft.com e clique em OK. Você pode obter o nome de domínio na guia Domínios para o Diretório Padrão no portal do azure (consulte a próxima imagem para baixo).

    Captura de tela da caixa de diálogo Alterar Autenticação; Contas organizacionais, Organização Única do Painel de Nuvem e Single Sign On, ler dados de diretório descritos.

    A imagem a seguir mostra o nome de domínio do portal do Azure.

    Captura de tela de portal do Azure, com Diretório Padrão selecionado à esquerda, DOMÍNIOS realçados no menu à direita e nome de domínio do diretório exibido abaixo.

    Observação

    Opcionalmente, você pode configurar o URI da ID do Aplicativo que será registrado no Azure AD clicando em Mais Opções. O URI da ID do Aplicativo é o identificador exclusivo de um aplicativo, que é registrado em Azure AD e usado pelo aplicativo para se identificar ao se comunicar com Azure AD. Para obter mais informações sobre o URI da ID do aplicativo e outras propriedades de aplicativos registrados, consulte este tópico. Ao clicar na caixa de seleção abaixo do campo URI da ID do Aplicativo, você também pode optar por substituir um registro existente no Azure AD que usa o mesmo URI de ID do Aplicativo.

  4. Depois de clicar em OK, uma caixa de diálogo de entrada será exibida e você precisará entrar usando uma conta de Administrador Global (não a conta da Microsoft associada à sua assinatura). Se você criou uma nova conta de Administrador anteriormente, será necessário alterar a senha e entrar novamente usando a nova senha.

    Captura de tela da caixa de diálogo Entrar no Azure Active Directory, com campos para nome da conta de Administrador Global e senha exibidos.

  5. Depois de autenticar com êxito, a caixa de diálogo Novo projeto ASP.NET mostrará sua opção de autenticação (Organizacional ) e o diretório em que o novo aplicativo será registrado (aricka0yahoo.onmicrosoft.com na imagem abaixo). Abaixo dessas informações, marque a caixa de seleção rotulada Host na nuvem. Se essa caixa de seleção estiver selecionada, o projeto será provisionado como um aplicativo Web do Azure e será habilitado para publicação fácil posteriormente. Clique em OK.

    Captura de tela da caixa de diálogo Novo Projeto DOT NET do SP, com o modelo M V C, a opção de autenticação e o diretório exibidos. O host na nuvem é descrito.

  6. A caixa de diálogo Configurar Site do Azure será exibida usando um nome de site gerado automaticamente e uma região. Observe também a conta na qual você está conectado no momento na caixa de diálogo. Você deseja garantir que essa conta seja a que sua assinatura do Azure está anexada, normalmente uma conta da Microsoft.

    Observação

    Este projeto requer um banco de dados. Você precisa selecionar um dos bancos de dados existentes ou criar um novo. Um banco de dados é necessário porque o projeto já usa um arquivo de banco de dados local para armazenar uma pequena quantidade de dados de configuração de autenticação. Quando você implanta o aplicativo em um Site do Azure, esse banco de dados não é empacotado com a implantação, portanto, você precisa escolher um acessível na nuvem. Clique em OK.

    Captura de tela da caixa de diálogo Configurar Site do Azure, exibindo o Nome do Site gerado automaticamente, Região, Servidor de banco de dados, nome de usuário do banco de dados e senha do banco de dados.

  7. O projeto será criado e suas opções de autenticação e opções de aplicativo Web serão configuradas automaticamente com o projeto. Depois que esse processo for concluído, execute o projeto localmente pressionando ^F5. Você precisará entrar usando sua conta organizacional. Forneça o nome de usuário e a senha para a conta que você criou anteriormente e clique em Entrar.

    Captura de tela da caixa de diálogo Entrar, com campos para nome de usuário da conta organizacional e senha exibidos.

  8. Após a entrada bem-sucedida, o site ASP.NET mostrará que você se autenticou exibindo o nome de usuário no canto superior direito da página.

    Captura de tela do site do A SP dot NET com l realçado na barra de endereços e no nome de usuário realçado no canto superior direito.

    Se você receber o erro: o valor não pode ser nulo ou vazio. Nome do parâmetro: linkText Captura de tela do erro do servidor. Mensagem de erro realçada, leitura, Valor não pode ser nulo ou vazio. Link de dois-pontos do nome do parâmetro Texto.

    consulte a seção de depuração no final do tutorial.

Noções básicas do API do Graph

O API do Graph é a interface programática usada para executar CRUD e outras operações em objetos no diretório Azure AD. Se você selecionar uma opção conta organizacional para autenticação ao criar um novo projeto no Visual Studio 2013, seu aplicativo já estará configurado para chamar o API do Graph. Esta seção mostra brevemente como o API do Graph funciona.

  1. No aplicativo em execução, clique no nome do usuário conectado no canto superior direito da página. Isso levará você para a página Perfil do Usuário, que é uma ação no Controlador Inicial. Você observará que a tabela contém informações do usuário sobre a conta de administrador que você criou anteriormente. Essas informações são armazenadas em seu diretório e o API do Graph é chamado para recuperar essas informações quando a página é carregada.

    Captura de tela da página Perfil do Usuário, com uma tabela incluindo Nome de Exibição, Nome e Sobrenome para a conta de administrador.

  2. Voltar para o Visual Studio e expanda a pasta Controladores e abra o arquivo HomeController.cs. Você verá uma ação UserProfile() que contém código para recuperar um token e, em seguida, chamar o API do Graph. Este código é duplicado abaixo:

    [Authorize]
public async Task UserProfile()
{
    string tenantId = ClaimsPrincipal.Current.FindFirst(TenantIdClaimType).Value;

    // Get a token for calling the Azure Active Directory Graph
    AuthenticationContext authContext = new AuthenticationContext(String.Format(CultureInfo.InvariantCulture, LoginUrl, tenantId));
    ClientCredential credential = new ClientCredential(AppPrincipalId, AppKey);
    AuthenticationResult assertionCredential = authContext.AcquireToken(GraphUrl, credential);
    string authHeader = assertionCredential.CreateAuthorizationHeader();
    string requestUrl = String.Format(
        CultureInfo.InvariantCulture,
        GraphUserUrl,
        HttpUtility.UrlEncode(tenantId),
        HttpUtility.UrlEncode(User.Identity.Name));

    HttpClient client = new HttpClient();
    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
    request.Headers.TryAddWithoutValidation("Authorization", authHeader);
    HttpResponseMessage response = await client.SendAsync(request);
    string responseString = await response.Content.ReadAsStringAsync();
    UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);

    return View(profile);
}

    Para chamar o API do Graph, primeiro você precisa recuperar um token. Quando o token é recuperado, seu valor de cadeia de caracteres deve ser acrescentado no cabeçalho Autorização para todas as solicitações subsequentes ao API do Graph. A maior parte do código acima manipula os detalhes da autenticação em Azure AD para obter um token, usando o token para fazer uma chamada para o API do Graph e, em seguida, transformando a resposta para que ela possa ser apresentada no Modo de Exibição.

    A parte mais relevante para discussão é a seguinte linha realçada: UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);. Essa linha representa o nome do usuário, que foi desserializado da resposta JSON e é apresentado no Modo de Exibição.

    Você pode chamar a API do Graph usando HttpClient e manipular os dados brutos por conta própria, mas uma maneira mais fácil é usar a Biblioteca de Clientes do Graph que está disponível por meio do NuGet. A Biblioteca de Clientes manipula as solicitações HTTP brutas e a transformação dos dados retornados para você e facilita muito o trabalho com o API do Graph em um ambiente .NET. Consulte os exemplos de código de API do Graph relacionados no GitHub.

Implantar o Aplicativo no Azure

As etapas a seguir mostrarão como implantar o aplicativo no Azure. Nas etapas anteriores, você conectou seu novo projeto a um aplicativo Web no Azure, portanto, ele está pronto para ser publicado em apenas algumas etapas.

  1. No Visual Studio, clique com o botão direito do mouse no projeto e selecione Publicar. A caixa de diálogo Publicar Web será exibida com cada configuração já configurada. Clique no botão Avançar para ir para a página Configurações . Você pode ser solicitado a autenticar; certifique-se de autenticar usando sua conta de assinatura do Azure (normalmente uma conta microsoft) e não a conta organizacional que você criou anteriormente.

    Captura de tela da caixa de diálogo Publicar Web com Conexão realçada e cada configuração já configurada à direita.

  2. Verifique a opção Habilitar Autenticação Organizacional . No campo Domínio , insira o domínio do diretório. Na lista suspensa Nível de Acesso, selecione Single Sign On, Ler dados do diretório. Você observará que o banco de dados anterior usado já está preenchido na seção Bancos de Dados. Clique em Publicar.

    Captura de tela da caixa de diálogo Publicar na Web. As Opções de Publicação de Arquivo são descritas, incluindo Habilitar a Autenticação Organizacional, o campo Domínio e o Nível de Acesso.

  3. O Visual Studio começará a implantar seu site e, em seguida, uma nova janela do navegador será exibida. Talvez seja solicitado que você se autentique no diretório mais uma vez. Depois de autenticar, você será redirecionado para seu site recém-publicado no Azure.

    Captura de tela do site do A SP dot NET, com você l do site publicado recentemente no Azure exibido na barra de endereços.

Depurando o aplicativo

Se você receber o seguinte erro: o valor não pode ser nulo ou vazio. Nome do parâmetro: linkText

Captura de tela do erro erver que pode resultar. Mensagem de erro realçada, leitura, Valor não pode ser nulo ou vazio. Link de dois-pontos do nome do parâmetro Texto.

Substitua o código no arquivo Views\Shared\_LoginPartial.cshtml pelo seguinte:

@{
   var user = "Null User";
   if (!String.IsNullOrEmpty(User.Identity.Name))
   {
      user = User.Identity.Name;
   }

}

@if (Request.IsAuthenticated)
{
    <text>
         <ul class="nav navbar-nav navbar-right">
            <li>
                @*@Html.ActionLink(User.Identity.Name, "UserProfile", "Home", routeValues: null, htmlAttributes: null)*@
               @Html.ActionLink(user, "UserProfile", "Home", routeValues: null, htmlAttributes: null)
            </li>
            <li>
                @Html.ActionLink("Sign out", "SignOut", "Account")
            </li>
        </ul>
    </text>
}
else
{
     <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "Index", "Home", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Depois de executar o aplicativo, se o usuário conectado mostrar "Usuário Nulo", saia e entre novamente com a conta do Active Directory que você criou anteriormente.

Um excelente tutorial a seguir é o Aprofundamento de Rick Rainey: Sites do Azure e Autenticação Organizacional usando Azure AD.

Mais informações