Adicionar autenticação ao seu aplicativo Apache Cordova

Artigo
05/05/2021

Observação

Este produto foi retirado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca Community Toolkit Datasync.

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

Entre no portal do Azure.
Selecione Microsoft Entra ID>Registos de aplicações>Novo registo.
Na página Registrar um aplicativo, digite zumoquickstart no 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 de URI de redirecionamento , 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ê digitará https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Pressione o botão Registrar na parte inferior do formulário.
Copie o ID do aplicativo (cliente).
No painel esquerdo, selecione Certificados & segredos>Novo segredo do cliente.
Insira 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 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 Recursose, em seguida, o Serviço de Aplicativo.
Selecione Configurações>Autenticação.
Pressione Adicionar provedor de identidade.
Selecione Microsoft como o provedor de identidade.
- Para tipo de registo de aplicação, selecione Fornecer os detalhes de umde registo de aplicação existente .
- Cole os valores copiados anteriormente na de ID do Aplicativo (cliente) e caixas Segredo do cliente.
- Para URL do Emissor, introduza 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.
- Para Restringir acesso, selecione Exigir autenticação.
- Para de solicitação não autenticada , selecione HTTP 401 Unauthorized.
Pressione 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.
Pressione Salvar.

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 o 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 cabeçalho Content-Security-Policy. Cada provedor suportado tem um host OAuth que precisa ser adicionado:

Fornecedor	Nome do provedor SDK	OAuth Host
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Linkedin	Linkedin	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Linkedin	Linkedin	`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() com o seguinte código:

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.

Dica

Se o emulador não iniciar automaticamente, abra o Android Studio e, em seguida, selecione ConfigurarAVD Manager . Isso permitirá que você inicie o dispositivo manualmente. Se você executar adb devices -l, 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