Início rápido: conectar usuários em um aplicativo de página única (SPA) e chamar a API do Microsoft Graph usando o Blazor WebAssembly

Este início rápido usa um aplicativo SPA (aplicativo de página única) do Blazor WebAssembly (WASM) de exemplo para mostrar como conectar usuários usando o fluxo de código de autorização com PKCE (Proof Key for Code Exchange) e chamar a API do Microsoft Graph. O exemplo usa o Microsoft.Authentication.WebAssembly.MSAL para manipular a autenticação.

Pré-requisitos

Registrar o aplicativo e os identificadores de registro

Para concluir o registro, forneça um nome ao aplicativo, especifique os tipos de conta com suporte e adicione um URI de redirecionamento. Depois de registrada, o painel Visão geral do aplicativo exibirá os identificadores necessários no código-fonte do aplicativo.

  1. Entre no Centro de administração do Microsoft Entra.

  2. Se você tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para o locatário no qual deseja registrar o aplicativo no menu Diretórios + assinaturas.

  3. Navegue até Identidade>Aplicativos>Registros de aplicativo e selecione Novo registro.

  4. Insira um Nome para o aplicativo, como identidade-cliente-spa.

  5. Para Tipos de contas com suporte, selecione Contas somente neste diretório organizacional. Para obter informações sobre diferentes tipos de conta, selecione a opção Ajudar-me a escolher.

  6. Selecione Registrar.

    Captura de tela mostrando como inserir um nome e selecionar o tipo de conta no centro de administração do Microsoft Entra.

  7. O painel Visão geral do aplicativo é exibido quando o registro for concluído. Registre a ID do Diretório (locatário) e a ID do aplicativo (cliente) a ser usada no código-fonte do aplicativo.

    Captura de tela mostrando os valores do identificador na página de visão geral no centro de administração do Microsoft Entra.

    Observação

    Os Tipos de conta com suporte podem ser alterados referindo-se a Modificar as contas suportadas por um aplicativo.

Adicionar uma URI de redirecionamento de plataforma

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

  1. Em Gerenciar, selecione Autenticação.
  2. Na página Configurações da plataforma, selecione Adicionar uma plataforma e, em seguida, selecione a opção SPA.
  3. Para o Redirecionamento de URIs, insira http://localhost:5000/authentication/login-callback.
  4. Selecione Configurar para salvar as alterações.

Clonar ou baixar o aplicativo de exemplo

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

  • Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet
    
  • Baixar o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome seja menor que 260 caracteres.

Configurar o projeto

  1. Em seu IDE, abra a pasta do projeto, ms-identity-docs-code-dotnet/spa-blazor-wasm, que contém o exemplo.

  2. Abra wwwroot/appsettings.json e atualize os seguintes valores com as informações registradas anteriormente no centro de administração.

    {
      "AzureAd": {
        "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
        "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
        "ValidateAuthority": true
      }
    }
    
    • Authority - A autoridade é uma URL que indica um diretório do qual o MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor da ID do diretório (locatário) que foi registrado anteriormente.
    • ClientId – O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor da ID do Aplicativo (locatário) que foi registrado anteriormente.

Agora execute o aplicativo e entre

Execute o projeto com um servidor Web usando o .NET:

  1. Para iniciar o servidor, execute os seguintes comandos no diretório do projeto:

    dotnet run
    
  2. Copie a http URL que aparece no terminal, por exemplo, http://localhost:5000e cole-a em um navegador. É recomendável usar uma sessão de navegador privada ou anônima.

  3. Siga as etapas e insira os detalhes necessários para entrar com sua conta Microsoft. Você receberá um endereço de email para que uma senha única possa ser enviada a você. Insira o código quando solicitado.

  4. O aplicativo solicitará permissão para manter o acesso aos dados aos quais você lhe deu acesso e para entrar e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do perfil da API do Microsoft Graph.

    Captura de tela do Aplicativo Blazor WASM SPA ilustrando os resultados da chamada à API.

Saia do aplicativo

  1. Localize o botão Sair no canto superior direito da página e selecione-o.
  2. Você será solicitado a escolher uma conta para sair. Selecione a conta usada para entrar.

Uma mensagem é exibida indicando que você saiu. Agora você pode fechar a janela do navegador.

Confira também