Criar aplicações JavaScript com o Microsoft Graph e a autenticação apenas de aplicações

Este tutorial ensina-o a criar uma aplicação de consola JavaScript que utiliza a Microsoft Graph API para aceder a dados através da autenticação apenas de aplicações. A autenticação apenas de aplicações é uma boa opção para serviços em segundo plano ou aplicações que precisam de aceder aos dados de todos os utilizadores numa organização.

Observação

Para saber como utilizar o Microsoft Graph para aceder a dados em nome de um utilizador, veja este tutorial de autenticação de utilizador (delegado).

Neste tutorial, você vai:

Listar usuários

Dica

Como alternativa a seguir este tutorial, pode transferir ou clonar o repositório do GitHub e seguir as instruções no README para registar uma aplicação e configurar o projeto.

Pré-requisitos

Antes de iniciar este tutorial, deve ter Node.js instalado no seu computador de desenvolvimento.

Também deve ter uma conta escolar ou profissional da Microsoft com a função de Administrador global. Se não tiver um inquilino do Microsoft 365, poderá qualificar-se para um através do Programa para Programadores do Microsoft 365; para obter detalhes, veja as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Observação

Este tutorial foi escrito com Node.js versão 16.14.2. Os passos neste guia podem funcionar com outras versões, mas isso não foi testado.

Registrar o aplicativo no portal

17 minutos restantes

Neste exercício, irá registar uma nova aplicação no Azure Active Directory para ativar a autenticação apenas de aplicações. Pode registar uma aplicação através do centro de administração do Microsoft Entra ou através do SDK do PowerShell do Microsoft Graph.

Registar aplicação para autenticação apenas de aplicação

Nesta secção, irá registar uma aplicação que suporta a autenticação apenas da aplicação através do fluxo de credenciais de cliente.

Centro de administração do Microsoft Entra
PowerShell

Abra um browser e navegue para o centro de administração do Microsoft Entra e inicie sessão com uma conta de Administrador global.
Selecione Microsoft Entra ID no painel de navegação esquerdo, expanda Identidade, expanda Aplicações e, em seguida, selecione Registos de aplicações.
Selecione Novo registro. Introduza um nome para a sua aplicação, por exemplo, Graph App-Only Auth Tutorial.
Defina Tipos de conta suportados como Contas apenas neste diretório organizacional.
Deixe o URI de Redirecionamento vazio.
Selecione Registrar. Na página Descrição Geral da aplicação, copie o valor do ID da Aplicação (cliente) e do ID do Diretório (inquilino) e guarde-os, irá precisar destes valores no próximo passo.
Selecione Permissões de API em Gerenciar.
Remova a permissão User.Read predefinida em Permissões configuradas ao selecionar as reticências (...) na respetiva linha e selecionar Remover permissão.
Selecione Adicionar uma permissão e, em seguida, Microsoft Graph.
Selecione Permissões de aplicativos.
Selecione User.Read.All e, em seguida, selecione Adicionar permissões.
Selecione Conceder consentimento do administrador para...e, em seguida, selecione Sim para dar consentimento do administrador para a permissão selecionada.
Selecione Certificados e segredos em Gerir e, em seguida, selecione Novo segredo do cliente.
Introduza uma descrição, escolha uma duração e selecione Adicionar.
Copie o segredo da coluna Valor . Irá precisar dele nos próximos passos.

Importante

Este segredo do cliente nunca é mostrado novamente, portanto, certifique-se de copiá-lo agora.

Para utilizar o PowerShell, precisará do SDK do PowerShell do Microsoft Graph. Se não o tiver, veja Instalar o SDK do PowerShell do Microsoft Graph para obter instruções de instalação.

Crie um novo ficheiro com o nomeRegisterAppForAppOnlyAuth.ps1 e adicione o seguinte código.

param(
  [Parameter(Mandatory=$true,
  HelpMessage="The friendly name of the app registration")]
  [String]
  $AppName,

  [Parameter(Mandatory=$true,
  HelpMessage="The application permission scopes to configure on the app registration")]
  [String[]]
  $GraphScopes,

  [Parameter(Mandatory=$false)]
  [Switch]
  $StayConnected = $false
)

$graphAppId = "00000003-0000-0000-c000-000000000000"

# Requires an admin
Connect-MgGraph -Scopes "Application.ReadWrite.All AppRoleAssignment.ReadWrite.All User.Read" -UseDeviceAuthentication -ErrorAction Stop

# Get context for access to tenant ID
$context = Get-MgContext -ErrorAction Stop
$authTenant = $context.TenantId

# Create app registration
$appRegistration = New-MgApplication -DisplayName $AppName -SignInAudience "AzureADMyOrg" -ErrorAction Stop
Write-Host -ForegroundColor Cyan "App registration created with app ID" $appRegistration.AppId

# Create corresponding service principal
$appServicePrincipal = New-MgServicePrincipal -AppId $appRegistration.AppId -ErrorAction SilentlyContinue `
  -ErrorVariable SPError
if ($SPError)
{
  Write-Host -ForegroundColor Red "A service principal for the app could not be created."
  Write-Host -ForegroundColor Red $SPError
  Exit
}

Write-Host -ForegroundColor Cyan "Service principal created"

# Lookup available Graph application permissions
$graphServicePrincipal = Get-MgServicePrincipal -Filter ("appId eq '" + $graphAppId + "'") -ErrorAction Stop
$graphAppPermissions = $graphServicePrincipal.AppRoles

$resourceAccess = @()

foreach($scope in $GraphScopes)
{
  $permission = $graphAppPermissions | Where-Object { $_.Value -eq $scope }
  if ($permission)
  {
    $resourceAccess += @{ Id =  $permission.Id; Type = "Role"}
  }
  else
  {
    Write-Host -ForegroundColor Red "Invalid scope:" $scope
    Exit
  }
}

# Add the permissions to required resource access
Update-MgApplication -ApplicationId $appRegistration.Id -RequiredResourceAccess `
 @{ ResourceAppId = $graphAppId; ResourceAccess = $resourceAccess } -ErrorAction Stop
Write-Host -ForegroundColor Cyan "Added application permissions to app registration"

# Add admin consent
foreach ($appRole in $resourceAccess)
{
  New-MgServicePrincipalAppRoleAssignment -ServicePrincipalId $appServicePrincipal.Id `
   -PrincipalId $appServicePrincipal.Id -ResourceId $graphServicePrincipal.Id `
   -AppRoleId $appRole.Id -ErrorAction SilentlyContinue -ErrorVariable SPError | Out-Null
  if ($SPError)
  {
    Write-Host -ForegroundColor Red "Admin consent for one of the requested scopes could not be added."
    Write-Host -ForegroundColor Red $SPError
    Exit
  }
}
Write-Host -ForegroundColor Cyan "Added admin consent"

# Add a client secret
$clientSecret = Add-MgApplicationPassword -ApplicationId $appRegistration.Id -PasswordCredential `
 @{ DisplayName = "Added by PowerShell" } -ErrorAction Stop

Write-Host
Write-Host -ForegroundColor Green "SUCCESS"
Write-Host -ForegroundColor Cyan -NoNewline "Client ID: "
Write-Host -ForegroundColor Yellow $appRegistration.AppId
Write-Host -ForegroundColor Cyan -NoNewline "Tenant ID: "
Write-Host -ForegroundColor Yellow $authTenant
Write-Host -ForegroundColor Cyan -NoNewline "Client secret: "
Write-Host -ForegroundColor Yellow $clientSecret.SecretText
Write-Host -ForegroundColor Cyan -NoNewline "Secret expires: "
Write-Host -ForegroundColor Yellow $clientSecret.EndDateTime

if ($StayConnected -eq $false)
{
  Disconnect-MgGraph | Out-Null
  Write-Host "Disconnected from Microsoft Graph"
}
else
{
  Write-Host
  Write-Host -ForegroundColor Yellow `
   "The connection to Microsoft Graph is still active. To disconnect, use Disconnect-MgGraph"
}

Salve o arquivo.
Abra o PowerShell e altere o diretório atual para a localização de RegisterAppForAppOnlyAuth.ps1.

Execute o seguinte comando:

.\RegisterAppForAppOnlyAuth.ps1 -AppName "Graph App-Only Auth Tutorial" -GraphScopes "User.Read.All"

Siga o pedido para abrir https://microsoft.com/devicelogin num browser, introduza o código fornecido e conclua o processo de autenticação.

Copie os valores ID de Cliente, ID do Inquilino e Segredo do cliente do resultado do script. Irá precisar destes valores no próximo passo.

SUCCESS
Client ID: ae2386e6-799e-4f75-b191-855d7e691c75
Tenant ID: 5927c10a-91bd-4408-9c70-c50bce922b71
Client secret: ...
Secret expires: 10/28/2024 5:01:45 PM

Observação

Repare que, ao contrário dos passos ao registar para autenticação de utilizador, nesta secção, configurou as permissões do Microsoft Graph no registo de aplicações. Isto deve-se ao facto de a autenticação apenas da aplicação utilizar o fluxo de credenciais do cliente, o que requer que as permissões sejam configuradas no registo de aplicações. Veja O âmbito .default para obter detalhes.

Criar uma aplicação de consola JavaScript

14 minutos restantes

Comece por criar um novo projeto Node.js. Abra a interface de linha de comandos (CLI) num diretório onde pretende criar o projeto. Execute o seguinte comando:

npm init

Responda aos pedidos ao fornecer os seus próprios valores ou ao aceitar as predefinições.

Instalar dependências

Antes de continuar, adicione algumas dependências adicionais que irá utilizar mais tarde.

Biblioteca de cliente da Identidade do Azure para JavaScript para autenticar o utilizador e adquirir tokens de acesso.
Biblioteca de cliente JavaScript do Microsoft Graph para fazer chamadas para o Microsoft Graph.
isomorphic-fetch para adicionar fetch a API a Node.js. Esta é uma dependência da biblioteca de cliente JavaScript do Microsoft Graph.
readline-sync para pedir entrada ao utilizador.

Execute os seguintes comandos na CLI para instalar as dependências.

npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync

Carregar as definições da aplicação

Nesta secção, irá adicionar os detalhes do registo da aplicação ao projeto.

Crie um ficheiro na raiz do projeto com o nome appSettings.js e adicione o seguinte código.

const settings = {
  clientId: 'YOUR_CLIENT_ID_HERE',
  clientSecret: 'YOUR_CLIENT_SECRET_HERE',
  tenantId: 'YOUR_TENANT_ID_HERE',
};

export default settings;

Atualize os valores em de settings acordo com a tabela seguinte.

Configuração Valor

clientId O ID de cliente do registo de aplicações

tenantId O ID de inquilino da sua organização.

clientSecret O segredo do cliente gerado no passo anterior

Configuração	Valor
`clientId`	O ID de cliente do registo de aplicações
`tenantId`	O ID de inquilino da sua organização.
`clientSecret`	O segredo do cliente gerado no passo anterior

Design do aplicativo

Nesta secção, irá criar um menu simples baseado na consola.

Crie um ficheiro na raiz do projeto com o nome graphHelper.js e adicione o seguinte código de marcador de posição. Irá adicionar mais código a este ficheiro em passos posteriores.
```
module.exports = {};
```

Crie um ficheiro na raiz do projeto com o nome index.js e adicione o seguinte código.

import { keyInSelect } from 'readline-sync';

import settings from './appSettings.js';
import {
  initializeGraphForAppOnlyAuth,
  getAppOnlyTokenAsync,
  getUsersAsync,
  makeGraphCallAsync,
} from './graphHelper.js';

async function main() {
  console.log('JavaScript Graph App-Only Tutorial');

  let choice = 0;

  // Initialize Graph
  initializeGraph(settings);

  const choices = ['Display access token', 'List users', 'Make a Graph call'];

  while (choice != -1) {
    choice = keyInSelect(choices, 'Select an option', { cancel: 'Exit' });

    switch (choice) {
      case -1:
        // Exit
        console.log('Goodbye...');
        break;
      case 0:
        // Display access token
        await displayAccessTokenAsync();
        break;
      case 1:
        // List emails from user's inbox
        await listUsersAsync();
        break;
      case 2:
        // Run any Graph code
        await doGraphCallAsync();
        break;
      default:
        console.log('Invalid choice! Please try again.');
    }
  }
}

main();

Adicione os seguintes métodos de marcador de posição no final do ficheiro. Irá implementá-los em passos posteriores.

function initializeGraph(settings) {
  // TODO
}

async function displayAccessTokenAsync() {
  // TODO
}

async function listUsersAsync() {
  // TODO
}

async function doGraphCallAsync() {
  // TODO
}

Esta ação implementa um menu básico e lê a escolha do utilizador a partir da linha de comandos.

Adicionar autenticação apenas de aplicação

10 minutos restantes

Nesta secção, irá adicionar a autenticação apenas de aplicação à aplicação. Isto é necessário para obter o token de acesso OAuth necessário para chamar o Microsoft Graph. Neste passo, irá integrar a biblioteca de cliente da Identidade do Azure para JavaScript na aplicação e configurar a autenticação para a biblioteca de cliente JavaScript do Microsoft Graph.

A biblioteca de Identidade do Azure fornece várias classes que implementam fluxos de TokenCredential tokens OAuth2. A biblioteca de cliente do Microsoft Graph utiliza essas classes para autenticar chamadas para o Microsoft Graph.

Configurar o cliente do Graph para autenticação apenas de aplicações

Nesta secção, irá utilizar a ClientSecretCredential classe para pedir um token de acesso com o fluxo de credenciais de cliente.

Abra graphHelper.js e adicione o seguinte código.

import 'isomorphic-fetch';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

let _settings = undefined;
let _clientSecretCredential = undefined;
let _appClient = undefined;

export function initializeGraphForAppOnlyAuth(settings) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  // Ensure settings isn't null
  if (!_settings) {
    throw new Error('Settings cannot be undefined');
  }

  if (!_clientSecretCredential) {
    _clientSecretCredential = new ClientSecretCredential(
      _settings.tenantId,
      _settings.clientId,
      _settings.clientSecret,
    );
  }

  if (!_appClient) {
    const authProvider = new TokenCredentialAuthenticationProvider(
      _clientSecretCredential,
      {
        scopes: ['https://graph.microsoft.com/.default'],
      },
    );

    _appClient = Client.initWithMiddleware({
      authProvider: authProvider,
    });
  }
}

Substitua a função empty initializeGraph no index.js pelo seguinte.

function initializeGraph(settings) {
  initializeGraphForAppOnlyAuth(settings);
}

Este código declara duas propriedades privadas, um ClientSecretCredential objeto e um Client objeto. A InitializeGraphForAppOnlyAuth função cria uma nova instância de ClientSecretCredentiale, em seguida, utiliza essa instância para criar uma nova instância de Client. Sempre que é efetuada uma chamada à API ao Microsoft Graph através do _appClient, utiliza a credencial fornecida para obter um token de acesso.

Testar o ClientSecretCredential

Em seguida, adicione código para obter um token de acesso a ClientSecretCredentialpartir do .

Adicione a seguinte função a graphHelper.js.

export async function getAppOnlyTokenAsync() {
  // Ensure credential isn't undefined
  if (!_clientSecretCredential) {
    throw new Error('Graph has not been initialized for app-only auth');
  }

  // Request token with given scopes
  const response = await _clientSecretCredential.getToken([
    'https://graph.microsoft.com/.default',
  ]);
  return response.token;
}

Substitua a função empty displayAccessTokenAsync no index.js pelo seguinte.

async function displayAccessTokenAsync() {
  try {
    const appOnlyToken = await getAppOnlyTokenAsync();
    console.log(`App-only token: ${appOnlyToken}`);
  } catch (err) {
    console.log(`Error getting app-only access token: ${err}`);
  }
}

Execute o seguinte comando na CLI na raiz do projeto.
```
node index.js
```
Introduza 1 quando lhe for pedida uma opção. A aplicação apresenta um token de acesso.
```
JavaScript Graph App-Only Tutorial

[1] Display access token
[2] List users
[3] Make a Graph call
[0] Exit

Select an option [1...3 / 0]: 1
App-only token: eyJ0eXAiOiJKV1QiLCJub25jZSI6IlVDTzRYOWtKYlNLVjVkRzJGenJqd2xvVUcwWS...
```
Dica

Apenas para fins de validação e depuração, pode descodificar tokens de acesso apenas de aplicações com o analisador de tokens online da Microsoft em https://jwt.ms. Isto pode ser útil se encontrar erros de token ao chamar o Microsoft Graph. Por exemplo, verificar se a role afirmação no token contém os âmbitos de permissão esperados do Microsoft Graph.

Listar usuários

7 minutos restantes

Nesta secção, irá adicionar a capacidade de listar todos os utilizadores no Azure Active Directory através da autenticação apenas de aplicações.

Abra graphHelper.js e adicione a seguinte função.

export async function getUsersAsync() {
  // Ensure client isn't undefined
  if (!_appClient) {
    throw new Error('Graph has not been initialized for app-only auth');
  }

  return _appClient
    ?.api('/users')
    .select(['displayName', 'id', 'mail'])
    .top(25)
    .orderby('displayName')
    .get();
}

Substitua a função empty listUsersAsync no index.js pelo seguinte.

async function listUsersAsync() {
  try {
    const userPage = await getUsersAsync();
    const users = userPage.value;

    // Output each user's details
    for (const user of users) {
      console.log(`User: ${user.displayName ?? 'NO NAME'}`);
      console.log(`  ID: ${user.id}`);
      console.log(`  Email: ${user.mail ?? 'NO EMAIL'}`);
    }

    // If @odata.nextLink is not undefined, there are more users
    // available on the server
    const moreAvailable = userPage['@odata.nextLink'] != undefined;
    console.log(`\nMore users available? ${moreAvailable}`);
  } catch (err) {
    console.log(`Error getting users: ${err}`);
  }
}

Execute a aplicação e escolha a opção 2 para listar os utilizadores.

[1] Display access token
[2] List users
[3] Make a Graph call
[0] Exit

Select an option [1...3 / 0]: 2
User: Adele Vance
  ID: 05fb57bf-2653-4396-846d-2f210a91d9cf
  Email: AdeleV@contoso.com
User: Alex Wilber
  ID: a36fe267-a437-4d24-b39e-7344774d606c
  Email: AlexW@contoso.com
User: Allan Deyoung
  ID: 54cebbaa-2c56-47ec-b878-c8ff309746b0
  Email: AllanD@contoso.com
User: Bianca Pisani
  ID: 9a7dcbd0-72f0-48a9-a9fa-03cd46641d49
  Email: NO EMAIL
User: Brian Johnson (TAILSPIN)
  ID: a8989e40-be57-4c2e-bf0b-7cdc471e9cc4
  Email: BrianJ@contoso.com

...

More users available? true

Código explicado

Considere o código na getUsersAsync função .

Obtém uma coleção de utilizadores
select Utiliza para pedir propriedades específicas
top Utiliza para limitar o número de utilizadores devolvidos
orderBy Utiliza para ordenar a resposta

Opcional: adicionar o seu próprio código

5 minutos restantes

Nesta secção, irá adicionar as suas próprias capacidades do Microsoft Graph à aplicação. Pode ser um fragmento de código da documentação do Microsoft Graph ou do Graph Explorer ou código que criou. Esta secção é opcional.

Atualizar o aplicativo

Abra graphHelper.js e adicione a seguinte função.

// This function serves as a playground for testing Graph snippets
// or other code
export async function makeGraphCallAsync() {
  // INSERT YOUR CODE HERE
}

Substitua a função empty makeGraphCallAsync no index.js pelo seguinte.

async function doGraphCallAsync() {
  try {
    await makeGraphCallAsync();
  } catch (err) {
    console.log(`Error making Graph call: ${err}`);
  }
}

Escolher uma API

Localize uma API no Microsoft Graph que gostaria de experimentar. Por exemplo, a API Criar evento . Pode utilizar um dos exemplos na documentação da API ou personalizar um pedido de API no Graph Explorer e utilizar o fragmento gerado.

Configurar as permissões

Verifique a secção Permissões da documentação de referência da API escolhida para ver que métodos de autenticação são suportados. Algumas APIs não suportam apenas aplicações ou contas Microsoft pessoais, por exemplo.

Para chamar uma API com autenticação de utilizador (se a API suportar a autenticação de utilizador (delegado), veja o tutorial de autenticação do utilizador (delegado ).
Para chamar uma API com autenticação apenas de aplicação (se a API a suportar), adicione o âmbito de permissão necessário no centro de administração do Azure AD.

Adicionar o código

Copie o código para a makeGraphCallAsync função no graphHelper.js. Se estiver a copiar um fragmento da documentação ou do Graph Explorer, certifique-se de que muda o client nome para _appClient.

Parabéns!

100% concluído!

Concluiu o tutorial javaScript do Microsoft Graph. Agora que tem uma aplicação de trabalho que chama o Microsoft Graph, pode experimentar e adicionar novas funcionalidades.

Saiba como utilizar a autenticação de utilizador (delegado) com o SDK JavaScript do Microsoft Graph.
Visite a Descrição Geral do Microsoft Graph para ver todos os dados a que pode aceder com o Microsoft Graph.

Kit de ferramentas do Microsoft Graph

Se estiver a criar aplicações JavaScript com IU, o Microsoft Graph Toolkit oferece uma coleção de componentes que podem simplificar o desenvolvimento.

Compartilhar via

Pré-requisitos

Registrar o aplicativo no portal

Registar aplicação para autenticação apenas de aplicação

Criar uma aplicação de consola JavaScript

Instalar dependências

Carregar as definições da aplicação

Design do aplicativo

Adicionar autenticação apenas de aplicação

Configurar o cliente do Graph para autenticação apenas de aplicações

Testar o ClientSecretCredential

Listar usuários

Código explicado

Opcional: adicionar o seu próprio código

Atualizar o aplicativo

Escolher uma API

Configurar as permissões

Adicionar o código

Parabéns!

Kit de ferramentas do Microsoft Graph

TypeScript/JavaScript samples (Exemplos de TypeScript/JavaScript)