Adicionar autenticação ao aplicativo Apache Cordova

Artigo
06/25/2019

Resumo

Neste tutorial, você adiciona a autenticação ao projeto de início rápido todolist no Apache Cordova usando um provedor de identidade com suporte. Este tutorial se baseia no tutorial Introdução aos Aplicativos Móveis , que você deve concluir primeiro.

Registrar seu aplicativo para autenticação e configurar o Serviço de Aplicativo

Primeiro, é necessário registrar seu aplicativo em um site do provedor de identidade. Em seguida, você definirá as credenciais geradas pelo provedor no back-end dos Aplicativos Móveis.

Configure o provedor de identidade preferido, seguindo as instruções específicas do provedor:
Repita as etapas anteriores para cada provedor ao qual você desejar dar suporte em seu aplicativo.

Assista a um vídeo que mostra etapas semelhantes

Restringir permissões a usuários autenticados

Por padrão, APIs em um back-end de Aplicativos Móveis podem ser chamadas de forma anônima. Em seguida, você precisa restringir o acesso somente aos clientes autenticados.

Back-end do Node.js (por meio do portal do Azure) :

Nas configurações de seus Aplicativos Móveis, clique em Tabelas Fáceis e selecione a tabela. Clique em Alterar permissões, selecione Apenas acesso autenticado para todas as permissões e clique em Salvar.
Back-end do .NET (C#):

No projeto do servidor, navegue até ControllersTodoItemController.cs>. Adicione o atributo [Authorize] à classe TodoItemController , como a seguir. Para restringir o acesso somente aos métodos específicos, você também pode aplicar esse atributo apenas aos métodos, em vez de à classe. Republicar o projeto de servidor.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Back-end do Node.js (por meio de código Node.js) :

Para exigir autenticação para acesso à tabela, adicione a seguinte linha ao script de servidor Node.js:
```
  table.access = 'authenticated';
```
Para obter mais detalhes, veja Como exigir autenticação para acesso às tabelas. Para saber como baixar o projeto de código de início rápido do seu site, consulte Como baixar o projeto de código de início rápido de back-end do Node.js usando Git.

Agora, é possível verificar se o acesso anônimo para o back-end foi desabilitado. No Visual Studio:

Abra o projeto criado quando você concluiu o tutorial Introdução aos Aplicativos Móveis.
Executar o aplicativo no Emulador do Google Android.
Verifique se uma Falha Inesperada de Conexão é mostrada após o aplicativo ser iniciado.

Em seguida, atualize o aplicativo para autenticar os usuários antes de solicitar recursos do back-end do Aplicativo Móvel.

Adicionar autenticação ao aplicativo

Abra o projeto no Visual Studio e abra o arquivo www/index.html para edição.

Localize a marca meta Content-Security-Policy na seção de cabeçalho. Adicione o host OAuth à lista de fontes permitidas.

Provedor	Nome do provedor do SDK	Host OAuth
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

Veja a seguir um exemplo de Política de segurança de conteúdo (implementada para o Active Directory do Azure):

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

Substitua https://login.microsoftonline.com pelo host OAuth da tabela anterior. Para obter mais informações sobre a marcação meta content-security-policy, consulte a Documentação de Content-Security-Policy.

Alguns provedores de autenticação não exigem mudanças no Content-Security-Policy quando usado em dispositivos móveis apropriados. Por exemplo, nenhuma mudança na Política de segurança de conteúdo será necessária ao usar a autenticação do Google em um dispositivo Android.

Abra o www/js/index.js arquivo para edição, localize o onDeviceReady() método e, no código de criação do cliente, adicione o seguinte código:
```
 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);
```
Esse código substitui o código existente que cria a referência de tabela e atualiza a interface do usuário.

O método logon() inicia a autenticação com o provedor. O método login() é uma função assíncrona que retorna uma promessa de JavaScript. O restante da inicialização é colocado dentro da resposta de promessa para que não seja executado até a conclusão do método login().
No código que você acabou de adicionar, substitua SDK_Provider_Name pelo nome de seu provedor de logon. Por exemplo, para o Azure Active Directory, use client.login('aad').
Execute seu projeto. Após a conclusão da inicialização do projeto, o aplicativo mostrará a página de logon do OAuth para o provedor de autenticação escolhido.

Próximas etapas

Saiba mais Sobre autenticação com o Serviço de Aplicativo do Azure.
Continue o tutorial adicionando Notificações por push a seu aplicativo do Apache Cordova.

Saiba como usar os SDKs.

Share via