Adicionar autenticação ao seu aplicativo Apache Cordova

Artigo
11/08/2023

Neste tutorial, você adiciona a autenticação da Microsoft ao projeto de início rápido usando a ID do Microsoft Entra. Antes de concluir este tutorial, verifique se você criou o projeto e habilitou a sincronização offline.

Configurar seu back-end para autenticação

Para configurar seu back-end para autenticação, você deve:

Crie um registro de aplicativo.
Configure a Autenticação e Autorização do Serviço de Aplicativo do Azure.
Adicione seu aplicativo às URLs de redirecionamento externo permitido.

Durante este tutorial, vamos configurar seu aplicativo para usar a autenticação da Microsoft. Um locatário do Microsoft Entra foi configurado automaticamente em sua assinatura do Azure. Você pode usar o Microsoft Entra ID para configurar a autenticação da Microsoft.

Você precisa da URL de back-end do serviço de Aplicativos Móveis do Azure que foi fornecida quando você provisionou o serviço.

Criar um registo de aplicação

Inicie sessão no portal do Azure.
Selecione Registos da>aplicação Microsoft Entra ID>Novo registo.
Na página Registar uma candidatura, introduza zumoquickstart o campo Nome.
Em Tipos de conta suportados, selecione Contas em qualquer diretório organizacional (Qualquer diretório Microsoft Entra - multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox).
Em Redirecionar URI, selecione Web e digite <backend-url>/.auth/login/aad/callback. Por exemplo, se o URL de back-end for https://zumo-abcd1234.azurewebsites.net, você digitaria https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Pressione o botão Registrar na parte inferior do formulário.
Copie o ID da Aplicação (cliente).
No painel esquerdo, selecione Certificados & segredos Novo segredo do>cliente.
Introduza uma descrição adequada, selecione uma duração de validade e, em seguida, selecione Adicionar.
Copie o segredo na página Certificados & segredos . O valor não é exibido novamente.
Selecione Autenticação.
Em Concessão implícita e fluxos híbridos, habilite os tokens de ID.
Pressione Salvar na parte superior da página.

Importante

O valor secreto do cliente (senha) é uma credencial de segurança importante. Não partilhe a palavra-passe com ninguém nem a distribua numa aplicação cliente.

Configurar a Autenticação e Autorização do Serviço de Aplicativo do Azure

No portal do Azure, selecione Todos os Recursos e, em seguida, o Serviço de Aplicativo.
Selecione Autenticação de configurações>.
Pressione Adicionar provedor de identidade.
Selecione Microsoft como o provedor de identidade.
- Para Tipo de registro de aplicativo, selecione Fornecer os detalhes de um registro de aplicativo existente.
- Cole os valores copiados anteriormente nas caixas ID do aplicativo (cliente) e Segredo do cliente.
- Em URL do emissor, digite https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Este URL é o "URL de inquilino mágico" para inícios de sessão da Microsoft.
- Em Restringir acesso, selecione Exigir autenticação.
- Para Solicitação não autenticada, selecione HTTP 401 Não autorizado.
Prima Adicionar.
Quando a tela de autenticação retornar, pressione Editar ao lado de Configurações de autenticação.
Na caixa URLs de redirecionamento externo permitidos, digite zumoquickstart://easyauth.callback.
Prima Guardar.

A etapa 10 exige que todos os usuários sejam autenticados antes de acessar seu back-end. Você pode fornecer controles refinados adicionando código ao seu back-end.

VOCÊ SABIA? Você também pode permitir usuários com contas organizacionais no Microsoft Entra ID, Facebook, Google, Twitter ou qualquer provedor compatível com OpenID Connect. Siga as instruções na documentação do Serviço de Aplicativo do Azure.

Testar se a autenticação está sendo solicitada

Execute o aplicativo usando cordova run android
Verifique se uma exceção não tratada com um código de status de 401 (Não autorizado) é gerada após o início do aplicativo.

Adicionar autenticação ao aplicativo

Para adicionar autenticação através do fornecedor incorporado, tem de:

Adicione o provedor de autenticação à lista de fontes válidas.
Ligue para o provedor de autenticação antes de acessar os dados.

Atualizar a Política de Segurança de Conteúdo

Cada aplicativo Apache Cordova declara suas fontes boas conhecidas por meio de um Content-Security-Policy cabeçalho. Cada provedor suportado tem um host OAuth que precisa ser adicionado:

Provider	Nome do provedor SDK	OAuth Host
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	Linkedin	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Twitter	twitter	`https://api.twitter.com`

Editar www/index.html; adicione o host OAuth para Microsoft Entra ID da seguinte maneira:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' 
    data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; 
    style-src 'self'; media-src *;">

O conteúdo é composto por várias linhas para facilitar a leitura. Coloque todo o código na mesma linha.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; style-src 'self'; media-src *;">

Você já substituiu ZUMOAPPNAME pelo nome do seu aplicativo.

Ligue para o provedor de autenticação

Editar www/js/index.js. Substitua o método setup() pelo código abaixo:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Testar a aplicação

Execute o seguinte comando:

cordova run android

Quando a inicialização inicial estiver concluída, você será solicitado a entrar com suas credenciais da Microsoft. Depois de concluído, você pode adicionar e excluir itens da lista.

Gorjeta

Se o emulador não iniciar automaticamente, abra o Android Studio e selecione Configurar>o AVD Manager. Isso permitirá que você inicie o dispositivo manualmente. Se você executar adb devices -lo , deverá ver o dispositivo emulado selecionado.

Excluindo os recursos

Agora que concluiu o tutorial de início rápido, pode eliminar os recursos com az group delete -n zumo-quickstart. Você também pode excluir o registro global do aplicativo usado para autenticação por meio do portal.

Próximos passos

Dê uma olhada nas seções COMO:

Você também pode fazer um Início Rápido para outra plataforma usando o mesmo serviço:

Partilhar via