Verificatie toevoegen aan uw Apache Cordova-app

  • Artikel

Samenvatting

In deze zelfstudie voegt u verificatie toe aan het snelstartproject todolist in Apache Cordova met behulp van een ondersteunde id-provider. Deze zelfstudie is gebaseerd op de Aan de slag met Mobile Apps zelfstudie, die u eerst moet voltooien.

Registreer uw app voor verificatie en configureer de App Service

Eerst moet u uw app registreren op de site van een id-provider en vervolgens stelt u de door de provider gegenereerde referenties in de back-end Mobile Apps in.

  1. Configureer uw voorkeurs-id-provider door de providerspecifieke instructies te volgen:

  2. Herhaal de vorige stappen voor elke provider die u in uw app wilt ondersteunen.

Bekijk een video van vergelijkbare stappen

Machtigingen beperken voor geverifieerde gebruikers

API's in een back Mobile Apps-end kunnen standaard anoniem worden aangeroepen. Vervolgens moet u de toegang beperken tot alleen geverifieerde clients.

  • Node.js back-end (via de Azure Portal) :

    Klik in Mobile Apps instellingen op Eenvoudige tabellen en selecteer uw tabel. Klik op Machtigingen wijzigen, selecteer Alleen geverifieerde toegang voor alle machtigingen en klik vervolgens op Opslaan.

  • .NET-back-end (C#):

    Navigeer in het serverproject naar ControllersTodoItemController.cs>. Voeg het [Authorize] kenmerk als volgt toe aan de klasse TodoItemController . Als u de toegang alleen wilt beperken tot specifieke methoden, kunt u dit kenmerk ook alleen toepassen op die methoden in plaats van op de klasse . Het serverproject opnieuw publiceren.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js back-Node.js (via Node.js code) :

    Als u verificatie wilt vereisen voor toegang tot de tabel, voegt u de volgende regel toe aan Node.js serverscript:

      table.access = 'authenticated';

    Zie How to: Require authentication for access to tables (Verificatie vereisen voor toegang tot tabellen) voor meer informatie. Zie How to: Download the Node.js backend quickstart code project using Git (Het codeproject voor de snelstartgids voor de back-Node.js downloaden met git) voor meer informatie over het downloaden van het codeproject uit de snelstartgids van uw site.

U kunt nu controleren of anonieme toegang tot uw back-end is uitgeschakeld. In Visual Studio:

  • Open het project dat u hebt gemaakt toen u de zelfstudie Aan de slag met Mobile Apps.
  • Voer uw toepassing uit in de Google Android Emulator.
  • Controleer of er een onverwachte verbindingsfout wordt weergegeven nadat de app is gestart.

Werk vervolgens de app bij om gebruikers te verifiëren voordat u resources aanvraagt bij de back-end van de mobiele app.

Verificatie toevoegen aan de app

  1. Open uw project in Visual Studio en open vervolgens het bestand www/index.html om te bewerken.

  2. Zoek de Content-Security-Policy metatag in de hoofdsectie. Voeg de OAuth-host toe aan de lijst met toegestane bronnen.

    Provider SDK-providernaam OAuth-host
    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

    Een voorbeeld van Content-Security-Policy (geïmplementeerd voor Azure Active Directory) is als volgt:

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

    Vervang https://login.microsoftonline.com door de OAuth-host uit de voorgaande tabel. Zie de documentatie Content-Security-Policy voor meer informatie over de metatag content-security-policy.

    Sommige verificatieproviders vereisen geen wijzigingen in het inhoudsbeveiligingsbeleid wanneer ze worden gebruikt op de juiste mobiele apparaten. Er zijn bijvoorbeeld geen wijzigingen in het inhoudsbeveiligingsbeleid vereist bij het gebruik van Google-verificatie op een Android-apparaat.

  3. Open het bestand www/js/index.js om het te bewerken, zoek de methode onDeviceReady() en voeg onder de code voor het maken van de client de volgende code toe:

     // 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);

    Deze code vervangt de bestaande code die de tabelverwijzing maakt en vernieuwt de gebruikersinterface.

    De login()-methode start de verificatie bij de provider. De login()-methode is een asyntische functie die een JavaScript Promise retourneert. De rest van de initialisatie wordt in het promise-antwoord geplaatst, zodat deze pas wordt uitgevoerd als de aanmeldingsmethode() is voltooid.

  4. Vervang in de code die u zojuist hebt toegevoegd SDK_Provider_Name door de naam van uw aanmeldingsprovider. Gebruik bijvoorbeeld voor Azure Active Directory.client.login('aad')

  5. Voer uw project uit. Wanneer het project is initialiseren, toont uw toepassing de OAuth-aanmeldingspagina voor de gekozen verificatieprovider.

Volgende stappen

Informatie over het gebruik van de SDK's.