Adicione autenticação à sua aplicação Apache Cordova

Artigo
06/25/2019

Resumo

Neste tutorial, você adiciona autenticação ao projeto de quickstart todolist em Apache Cordova usando um provedor de identidade apoiado. Este tutorial baseia-se no Introdução com o tutorial de Mobile Apps, que deve completar primeiro.

Registe o seu aplicativo para autenticação e configuure o Serviço de Aplicações

Primeiro, precisa de registar a sua aplicação no site de um fornecedor de identidade, e depois vai definir as credenciais geradas pelo fornecedor nas Aplicações Móveis.

Configure o seu fornecedor de identidade preferido seguindo as instruções específicas do fornecedor:
Repita os passos anteriores para cada fornecedor que pretende suportar na sua aplicação.

Veja um vídeo que mostra os passos semelhantes

Restringir permissões a utilizadores autenticados

Por padrão, as APIs numa parte traseira de Aplicações Móveis podem ser invocadas de forma anónima. Em seguida, tem de restringir o acesso apenas a clientes autenticados.

Node.js parte de trás (através do portal do Azure) :

Nas definições de Aplicações Móveis, clique em Tabelas Fáceis e selecione a sua tabela. Clique em Alterar permissões, selecione acesso autenticado apenas para todas as permissões e, em seguida, clique em Guardar.
.NET back end (C#):

No projeto do servidor, navegue para ControllersTodoItemController>.cs. Adicione o [Authorize] atributo à classe TodoItemController , da seguinte forma. Para restringir o acesso apenas a métodos específicos, também pode aplicar este atributo apenas a esses métodos em vez da classe. Republicar o projeto do servidor.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (através do código Node.js) :

Para exigir autenticação para acesso à mesa, adicione a seguinte linha ao Node.js script do servidor:
```
  table.access = 'authenticated';
```
Para mais detalhes, consulte Como: Requera autenticação para acesso às tabelas. Para aprender a descarregar o projeto de código quickstart do seu site, consulte Como: Descarregue o projeto de código de arranque rápido de backend Node.js usando Git.

Agora, pode verificar se o acesso anónimo ao seu backend foi desativado. Em Visual Studio:

Abra o projeto que criou quando completou o tutorial Introdução com aplicações móveis.
Execute a sua aplicação no Google Android Emulator.
Verifique se uma Falha de Ligação Inesperada é mostrada após o início da aplicação.

Em seguida, atualize a aplicação para autenticar os utilizadores antes de solicitar recursos a partir do backend da Aplicação Móvel.

Adicionar autenticação à app

Abra o seu projeto em Visual Studio e, em seguida, abra o www/index.html ficheiro para edição.

Localize a Content-Security-Policy meta-etiqueta na secção da cabeça. Adicione o anfitrião OAuth à lista de fontes permitidas.

Fornecedor	Nome do provedor SDK	Anfitrião da 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

Um exemplo de Política de Segurança de Conteúdo (implementada para Azure Ative Directory) é o seguinte:

 <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 o anfitrião OAuth da tabela anterior. Para obter mais informações sobre a meta-etiqueta de política de segurança de conteúdos, consulte a documentação content-Security-Policy.

Alguns fornecedores de autenticação não necessitam de alterações na Política de Segurança de Conteúdos quando utilizados em dispositivos móveis apropriados. Por exemplo, não são necessárias alterações na Política de Segurança de Conteúdo quando se utiliza a autenticação do Google num dispositivo Android.

Abra o www/js/index.js ficheiro para edição, localize o onDeviceReady() método e, de acordo com o 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);
```
Este código substitui o código existente que cria a referência de tabela e atualiza a UI.

O método de login inicia a autenticação com o fornecedor. O método de login é uma função async que devolve uma Promessa JavaScript. O resto da inicialização é colocada dentro da resposta da promessa de modo a que não seja executada até que o método de login esteja concluído.
No código que acaba de adicionar, substitua-o SDK_Provider_Name pelo nome do seu fornecedor de login. Por exemplo, para Azure Ative Directory, utilizeclient.login('aad').
Executar o seu projeto. Quando o projeto tiver terminado a rubrica, a sua aplicação mostra a página de login da OAuth para o fornecedor de autenticação escolhido.

Passos Seguintes

Saiba mais sobre autenticação com Serviço de Aplicações do Azure.
Continue o tutorial adicionando Notificações Push à sua aplicação Apache Cordova.

Saiba como utilizar os SDKs.

Share via