Adicionar autenticação ao aplicativo Apache Cordova

Artigo
05/05/2021

Nota

Este produto está desativado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca datasync do Kit de Ferramentas da Comunidade .

Neste tutorial, você adicionará 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 de sincronização offline habilitada.

Configurar o back-end para autenticação

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

Crie um registro de aplicativo.
Configurar a Autenticação e a Autorização do Serviço de Aplicativo do Azure.
Adicione seu aplicativo às URLs de Redirecionamento Externo Permitidas.

Durante este tutorial, configuraremos 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 a ID do Microsoft Entra 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 fornecido quando você provisionou o serviço.

Criar um registro de aplicativo

Entre no portal do do Azure.
Selecione registros de aplicativo>da ID do Microsoft Entra>Novo registro.
Na página Registrar um aplicativo, insira no campo nome do .
Em tipos de conta com suporte, selecione Contas em qualquer diretório organizacional (qualquer diretório do 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 a URL de back-end for https://zumo-abcd1234.azurewebsites.net, você inserirá https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Pressione o botão Registrar na parte inferior do formulário.
Copie a ID do aplicativo (cliente).
No painel esquerdo, selecione Certificados & segredos>novode segredo do cliente.
Insira uma descrição adequada, selecione uma duração de validade e selecione Adicionar.
Copie o segredo na página de segredos & certificados . O valor não é exibido novamente.
Selecione de 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 do segredo do cliente (senha) é uma credencial de segurança importante. Não compartilhe a senha com ninguém ou distribua-a em um aplicativo cliente.

Configurar autenticação e autorização do Serviço de Aplicativo do Azure

No portal do Azure, selecione Todos os Recursose, em seguida, seu Serviço de Aplicativo.
Selecione configurações de de autenticação de.
Pressione Adicionardo 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 de de ID do aplicativo (cliente) e caixas de de segredo do cliente.
- Para de URL do Emissor, insira https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Essa URL é a "URL de locatário mágica" para logons da Microsoft.
- Para Restringirde acesso, selecione Exigirde autenticação.
- Para de solicitação não autenticada, selecione HTTP 401 Não Autorizado.
Pressione Adicionar.
Depois que a tela de autenticação for retornada, pressione Editar ao lado das configurações de Autenticação.
Na caixa URLs de redirecionamento externo permitidas , insira .
Pressione Salvar.

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

VOCÊ SABIA? Você também pode permitir que 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

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

Adicionar autenticação ao aplicativo

Para adicionar autenticação por meio do provedor interno, você deve:

Adicione o provedor de autenticação à lista de boas fontes conhecidas.
Chame o provedor de autenticação antes de acessar dados.

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

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

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

Editar www/index.html; adicione o host OAuth para a ID do Microsoft Entra 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 é várias linhas para legibilidade. 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 aplicativo.

Chamar o provedor de autenticação

Editar www/js/index.js. Substitua o método setup() pelo 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 o aplicativo

Execute o seguinte comando:

cordova run android

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

Ponta

Se o emulador não for iniciado automaticamente, abra o Android Studio e selecione Configurar>do AVD 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 você concluiu o tutorial de início rápido, pode excluir os recursos com az group delete -n zumo-quickstart. Você também pode excluir o registro de aplicativo global usado para autenticação por meio do portal.

Próximas etapas

Dê uma olhada nas seções HOW TO:

Servidor (Node.js)
Servidor (ASP.NET Framework)
do cliente Apache Cordova

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

windows (UWP)
do WPF (Windows)
Xamarin.Android
do Xamarin.Forms
do Xamarin.iOS

Compartilhar via