Compartilhar via

Início Rápido - Conectar usuários e chamar uma API Web no aplicativo Web de exemplo do Node.js

Aplica-se a: Círculo verde com um símbolo de marca de seleção branca que indica que o conteúdo a seguir se aplica a locatários externos. Locatários externos (saiba mais)

Neste Início Rápido, você aprenderá a conectar usuários e chamar uma API Web de um aplicativo Web Node.js no seu locatário externo. O aplicativo de exemplo chama uma API .NET. O aplicativo Web de exemplo usa a MSAL (Biblioteca de Autenticação da Microsoft) para Node para lidar com autenticação.

Pré-requisitos

Configurar escopos e funções de API

Ao registrar a API Web, você deve configurar escopos de API para definir as permissões que um aplicativo cliente pode solicitar para acessar a API Web. Além disso, você precisa configurar funções de aplicativo para especificar as funções disponíveis para usuários ou aplicativos e conceder as permissões de API necessárias ao aplicativo Web para permitir que ele chame a API Web.

Configurar escopos de API

Uma API precisa publicar um mínimo de um escopo, também chamado de permissão delegada, para que os aplicativos cliente obtenham um token de acesso para um usuário com êxito. Para publicar um escopo, siga estas etapas:

  1. Na página Registros de aplicativo, selecione o aplicativo de API que você criou (ciam-ToDoList-api) para abrir a respectiva página Visão geral.

  2. Em Gerenciar, selecione Expor uma API.

  3. Na parte superior da página, ao lado do URI da ID do Aplicativo, selecione o link Adicionar para gerar um URI exclusivo para esse aplicativo.

  4. Aceite o URI da ID do Aplicativo proposto, como api://{clientId}, e selecione Salvar. Quando o aplicativo Web solicita um token de acesso à API Web, ele adiciona esse URI como prefixo para cada escopo que você define para a API.

  5. Em Escopos definidos por esta API, selecione Adicionar um escopo.

  6. Digite os seguintes valores que definem um acesso de leitura à API e selecione Adicionar escopo para salvar as alterações:

    Propriedade Valor
    Nome do escopo Lista de tarefas.Ler
    Quem pode consentir Somente administradores
    Nome de exibição do consentimento do administrador Leia a lista de tarefas dos usuários usando a "TodoListApi"
    Descrição do consentimento do administrador Permita que o aplicativo leia a lista de tarefas do usuário usando a TodoListApi".
    Estado Habilitado

  7. Selecione Adicionar um escopo novamente e digite os seguintes valores que definem um escopo de acesso de leitura e gravação à API. Selecione Adicionar escopo para salvar as alterações:

    Propriedade Valor
    Nome do escopo ToDoList.ReadWrite
    Quem pode consentir Somente administradores
    Nome de exibição do consentimento do administrador Leia e escreva a lista de tarefas dos usuários usando a "ToDoListApi"
    Descrição do consentimento do administrador Permita que o aplicativo leia e grave na lista ToDo do usuário usando “ToDoListApi”
    Estado Habilitado

Saiba mais sobre o princípio do privilégio mínimo ao publicar permissões para uma API Web.

Configurar funções de aplicativo

Uma API precisa publicar pelo menos uma função de aplicativo, também chamada de permissão de aplicativo, para que os aplicativos cliente possam obter um token de acesso em nome deles próprios. As permissões de aplicativo são o tipo de permissões que as APIs devem publicar quando desejam permitir que os aplicativos cliente se autentiquem com êxito como eles mesmos e não precisem conectar usuários. Para publicar uma permissão de aplicativo, siga estas etapas:

  1. Na página Registros de aplicativo, selecione o aplicativo que você criou (como ciam-ToDoList-api) para abrir sua página Visão geral.

  2. Em Gerenciar, selecione Funções do aplicativo.

  3. Selecione Criar função do aplicativo, insira os seguintes valores e selecione Aplicar para salvar suas alterações:

    Propriedade Valor
    Nome de exibição ToDoList.Read.All
    Tipos de membro permitidos Aplicativos
    Valor ToDoList.Read.All
    Descrição Permitir que o aplicativo leia a lista ToDo de cada usuário usando "TodoListApi"
    Quer habilitar esta função de aplicativo? Mantenha-o marcado

  4. Selecione Criar função de aplicativo novamente, insira os seguintes valores para a segunda função de aplicativo e selecione Aplicar para salvar suas alterações:

    Propriedade Valor
    Nome de exibição ToDoList.ReadWrite.All
    Tipos de membro permitidos Aplicativos
    Valor ToDoList.ReadWrite.All
    Descrição Permitir que o aplicativo leia e grave a lista de tarefas de cada usuário usando 'ToDoListApi'
    Quer habilitar esta função de aplicativo? Mantenha-o marcado

Configurar declarações opcionais

Você pode adicionar a declaração opcional idtyp para ajudar a API Web a determinar se um token é um token de aplicativo ou um aplicativo + token de usuário. Embora você possa usar uma combinação de declarações scp e funções para a mesma finalidade, usar a declaração idtyp é a maneira mais fácil de diferenciar um token de aplicativo e um aplicativo + token de usuário. Por exemplo, o valor dessa declaração é app quando o token é um token somente de aplicativo.

Use os passos no artigo Configurar declarações opcionais para adicionar idtyp ao token de acesso:

  • Para o tipo de token , selecione Access.
  • Na lista de declarações opcionais, selecione idtyp.

Conceder permissões de API para o aplicativo Web

Para conceder permissões de API ao aplicativo cliente (ciam-client-app), siga estas etapas:

  1. Na página Registros de aplicativo, selecione o aplicativo que você criou (como ciam-client-app) para abrir a página Visão geral.

  2. Em Gerenciar, selecione Permissões de API.

  3. Em Permissões Configuradas, selecione Adicionar uma permissão.

  4. Selecione a guia APIs que a minha organização usa.

  5. Na lista de APIs, selecione a API como ciam-ToDoList-api.

  6. Selecione a opção Permissões delegadas.

  7. Na lista de permissões, selecione ToDoList.Read, ToDoList.ReadWrite (use a caixa de pesquisa, se necessário).

  8. Selecione o botão Adicionar permissões. Neste ponto, você atribuiu as permissões corretamente. No entanto, como o locatário é um locatário do cliente, os próprios usuários consumidores não podem consentir essas permissões. Para resolver esse problema, você, como administrador, deve consentir com essas permissões em nome de todos os usuários no locatário:

    1. Selecione Dar consentimento de administrador para <nome do seu locatário> e selecione Sim.

    2. Selecione Atualizar e verifique se Concedido para <seu nome de locatário> aparece em Status para ambos os escopos.

  9. Na lista Permissões configuradas, selecione as permissões ToDoList.Read e ToDoList.ReadWrite, uma de cada vez, e copie o URI completo da permissão para uso posterior. O URI de permissão completa é semelhante a api://{clientId}/{ToDoList.Read} ou api://{clientId}/{ToDoList.ReadWrite}.

Clonar ou baixar o aplicativo Web e a API Web 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-ciam-javascript-tutorial.git

  • Baixe o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Instalar as dependências do projeto

  1. Abra uma janela do console e altere para o diretório que contém o aplicativo de exemplo Node.js/Express:

    cd 2-Authorization\4-call-api-express\App

  2. Execute os seguintes comandos para instalar as dependências do aplicativo Web:

    npm install && npm update

Configurar a API e o aplicativo Web de exemplo

Para usar seu registro de aplicativo no exemplo de aplicativo Web cliente:

  1. No seu editor de código, abra o arquivo App\authConfig.js.

  2. Localize o espaço reservado:

    • Enter_the_Application_Id_Here e substitua-o pela ID do Aplicativo (cliente) do aplicativo cliente que você registrou anteriormente. O aplicativo cliente é aquele que você registrou nos pré-requisitos.
    • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do diretório (locatário). Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.
    • Enter_the_Client_Secret_Here e substitua-o pelo valor do segredo do aplicativo copiado anteriormente.
    • Enter_the_Web_Api_Application_Id_Here e substitua-a pela ID do aplicativo (cliente) da API Web copiada anteriormente como parte dos pré-requisitos.

Para usar o registro de aplicativo no exemplo de API Web:

  1. No seu editor de código, abra o arquivo API\ToDoListAPI\appsettings.json.

  2. Localize o espaço reservado:

    • Enter_the_Application_Id_Here e substitua-o pela ID do aplicativo (cliente) da API Web que você copiou. O aplicativo de API Web é aquele que você registrou anteriormente como parte dos pré-requisitos.
    • Enter_the_Tenant_Id_Here e substitua-o pela ID do Diretório (locatário) copiado anteriormente.
    • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do diretório (locatário). Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.

Executar e testar o exemplo de API e aplicativo Web

  1. Abra uma janela do console e execute a API Web usando os seguintes comandos:

    cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run

  2. Execute o cliente do aplicativo Web usando os seguintes comandos:

    cd 2-Authorization\4-call-api-express\App
npm install
npm start

  3. Abra o navegador e acesse http://localhost:3000.

  4. Selecione o botão Entrar. Você é solicitado a fazer login.

    Captura de tela de entrada em um aplicativo Web do Node.

  5. Na página de entrada, digite seu Endereço de email, selecione Avançar, digite sua Senha e selecione Entrar. Se você não tiver uma conta, selecione o link Não tem uma conta? Crie uma, que iniciará o fluxo de inscrição.

  6. Se você escolher a opção de inscrição, após preencher seu email, senha de uso único, nova senha e mais detalhes da conta, você concluirá todo o fluxo de inscrição. Você verá uma página semelhante à seguinte captura de tela. Você verá uma página semelhante se escolher a opção de entrada.

    Captura de tela de entrada em um aplicativo Web do Node e chamada a uma API.

Chamar API

  1. Para chamar a API, selecione o link Exibir sua lista de tarefas pendentes. Você verá uma página semelhante à seguinte captura de tela.

    Captura de tela da lista de tarefas pendentes da API de processamento.

  2. Manipule a lista de tarefas pendentes criando e removendo itens.

Como funciona

Você dispara uma chamada à API sempre que exibir, adicionar ou remover uma tarefa. Cada vez que você dispara uma chamada à API, o aplicativo Web cliente adquire um token de acesso com as permissões (escopos) necessárias para chamar um ponto de extremidade de API. Por exemplo, para ler uma tarefa, o aplicativo Web cliente precisa adquirir um token de acesso com permissão/escopo ToDoList.Read.

O ponto de extremidade da API Web precisa verificar se as permissões ou escopos no token de acesso, fornecidos pelo aplicativo cliente, são válidos. Se o token de acesso for válido, o ponto de extremidade responderá à solicitação HTTP; caso contrário, ele responderá com um erro HTTP 401 Unauthorized.

Conteúdo relacionado

  • Last updated on