Guia de início rápido: entre usuários em um aplicativo de página única (SPA) e chame a API do Microsoft Graph usando Blazor WebAssembly

Este guia de início rápido usa um aplicativo de página única (SPA) Blazor WebAssembly (WASM) de exemplo para mostrar como entrar 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

Registar a aplicação e os identificadores de registo

Para concluir o registro, forneça um nome ao aplicativo, especifique os tipos de conta suportados e adicione um URI de redirecionamento. Uma vez registrado, o painel Visão geral do aplicativo exibe os identificadores necessários no código-fonte do aplicativo.

  1. Inicie sessão 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é Registros do aplicativo Aplicativos de identidade>>, selecione Novo registro.

  4. Insira um Nome para o aplicativo, como identity-client-spa.

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

  6. Selecione Registar.

    Captura de ecrã que mostra como introduzir 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 é concluído. Registre o ID do diretório (locatário) e o ID do aplicativo (cliente) a serem usados no código-fonte do aplicativo.

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

    Nota

    Os tipos de conta suportados podem ser alterados consultando Modificar as contas suportadas por um aplicativo.

Adicionar um URI de redirecionamento de plataforma

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

  1. Em Gerir, 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 os URIs de redirecionamento, digite http://localhost:5000/authentication/login-callback.
  4. Selecione Configurar para salvar as alterações.

Clone ou baixe 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 digite o seguinte comando:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet
    
  • Transfira o ficheiro .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Configurar o projeto

  1. No 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 é um URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor de ID de diretório (locatário) que foi registrado anteriormente.
    • ClientId - O identificador da aplicação, também referido como o cliente. Substitua o texto entre aspas pelo valor de ID do aplicativo (cliente) que foi registrado anteriormente.

Execute o aplicativo e entre

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

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

    dotnet run
    
  2. Copie o http URL que aparece no terminal, por exemplo, http://localhost:5000e cole-o em um navegador. Recomendamos o uso de uma sessão privada ou anônima do navegador.

  3. Siga os passos e introduza os detalhes necessários para iniciar sessão com a sua conta Microsoft. Ser-lhe-á solicitado um endereço de e-mail para que lhe possa ser enviado um código de acesso único. Insira o código quando solicitado.

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

    Captura de tela do Blazor WASM SPA App retratando os resultados da chamada de API.

Sair do aplicativo

  1. Encontre o botão Sair no canto superior direito da página e selecione-o.
  2. Você será solicitado a escolher uma conta da qual sair. Selecione a conta que utilizou para iniciar sessão.

É apresentada uma mensagem a indicar que terminou sessão. Agora você pode fechar a janela do navegador.

Consulte também