Adicione a autenticação à sua app Apache Cordova

Resumo

Neste tutorial, adiciona-se autenticação ao projeto de arranque rápido todo-lista no Apache Cordova utilizando um fornecedor de identidade suportado. Este tutorial é baseado no Get started com o tutorial de [Aplicações Móveis,] que você deve completar primeiro.

Registe a sua aplicação para autenticação e configure o Serviço de Aplicações

Em primeiro lugar, você precisa registar a sua app no site de um fornecedor de identidade, e depois irá definir as credenciais geradas pelo fornecedor nas Aplicações Móveis de volta.

  1. Configure o seu fornecedor de identidade preferido seguindo as instruções específicas do fornecedor:

  2. 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 extremidade de apps móveis podem ser invocadas anonimamente. Em seguida, você precisa restringir o acesso a apenas clientes autenticados.

  • Extremidade de lado nonó (através do portal Azure) :

    Nas definições das suas 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 controladores > TodoItemController.cs. Adicione [Authorize] o 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. Republique o projeto do servidor.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Node.js backend (via Código Node.js) :

    Para exigir a autenticação para acesso à mesa, adicione a seguinte linha ao script do servidor Node.js:

      table.access = 'authenticated';
    

    Para mais detalhes, consulte Como: Exigir autenticação para acesso às mesas. Para aprender a descarregar o projeto de código quickstart a partir do seu site, consulte Como: Descarregue o projeto de código de arranque rápido Node.js usando Git.

Agora, pode verificar se o acesso anónimo ao seu backend foi desativado. No Estúdio Visual:

  • Abra o projeto que criou quando completou o tutorial [Get started com Aplicações Móveis.]
  • Execute a sua aplicação no Emulator Androiddo Google .
  • Verifique se uma falha de ligação inesperada é mostrada após o início da aplicação.

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

Adicionar autenticação à app

  1. Abra o seu projeto no www/index.html Visual Studioe abra o ficheiro para edição.

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

    Fornecedor Nome do provedor SDK Hospedeiro OAuth
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook facebook https://www.facebook.com
    Google google https://accounts.google.com
    Microsoft conta microsoft https://login.live.com
    Twitter twitter https://api.twitter.com

    Um exemplo de Política de Segurança de Conteúdo (implementado para o Diretório Ativo Azure) é 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-a https://login.microsoftonline.com com o hospedeiro OAuth da mesa anterior. Para obter mais informações sobre a meta-tag de política de segurança do conteúdo, consulte a [documentação]sobre a política de segurança do conteúdo .

    Alguns fornecedores de autenticação não requerem alterações na Política de Segurança do Conteúdo 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.

  3. Abra www/js/index.js o ficheiro para edição, localize o onDeviceReady() método e, sob 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 da 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 assinizada que devolve uma Promessa JavaScript. O resto da inicialização é colocado dentro da resposta da promessa para que não seja executada até que o método de login() complete.

  4. No código que acabou de SDK_Provider_Name adicionar, substitua-o pelo nome do seu fornecedor de login. Por exemplo, para o Diretório client.login('aad')Ativo Azure, utilize.

  5. Gereno seu projeto. Quando o projeto terminar de inicializar, a sua aplicação mostra a página de login DaOuth para o fornecedor de autenticação escolhido.

Próximos Passos

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

Saiba como utilizar os SDKs.