Lägga till autentisering i din Apache Cordova-app

  • Artikel

Sammanfattning

I den här självstudien lägger du till autentisering i todolist-snabbstartsprojektet på Apache Cordova med hjälp av en identitetsprovider som stöds. Den här självstudien baseras på Kom igång med Mobile Apps självstudie, som du måste slutföra först.

Registrera din app för autentisering och konfigurera App Service

Först måste du registrera din app på en identitetsproviders webbplats och sedan ange de autentiseringsuppgifter som genererats av providern Mobile Apps-backend.

  1. Konfigurera den identitetsprovider du föredrar genom att följa de providerspecifika anvisningarna:

  2. Upprepa föregående steg för varje provider som du vill stödja i din app.

Titta på en video som visar liknande steg

Begränsa behörigheter till autentiserade användare

Som standard kan API:er Mobile Apps en backend anropas anonymt. Därefter behöver du begränsa åtkomsten till endast autentiserade klienter.

  • Node.js (via Azure Portal):

    I inställningarna Mobile Apps klickar du på Enkla tabeller och väljer tabellen. Klicka på Ändra behörigheter, välj Endast autentiserad åtkomst för alla behörigheter och klicka sedan på Spara.

  • .NET-backend (C#):

    I serverprojektet navigerar du till ControllersTodoItemController.cs>. Lägg till [Authorize] attributet i klassen TodoItemController enligt följande. Om du bara vill begränsa åtkomsten till specifika metoder kan du även använda det här attributet bara för dessa metoder i stället för klassen . Publicera om serverprojektet.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js (via Node.js kod):

    Om du vill kräva autentisering för tabellåtkomst lägger du till följande rad i Node.js serverskriptet:

      table.access = 'authenticated';

    Mer information finns i Gör så här: Kräv autentisering för åtkomst till tabeller. Information om hur du laddar ned snabbstartskodprojektet från webbplatsen finns i How to: Download the Node.js backend quickstart code project using Git (Så här gör du: Ladda ned kodprojektet för Node.js backend med Git).

Nu kan du kontrollera att anonym åtkomst till din backend har inaktiverats. I Visual Studio:

  • Öppna projektet som du skapade när du slutförde självstudien Kom igång med Mobile Apps.
  • Kör ditt program i Google Android-Emulator.
  • Kontrollera att ett oväntat anslutningsfel visas när appen startar.

Uppdatera sedan appen för att autentisera användare innan du begär resurser från mobilapps-servern.

Lägga till autentisering i appen

  1. Öppna projektet i Visual Studio och öppna sedan filen www/index.html för redigering.

  2. Leta upp Content-Security-Policy metataggen i huvudavsnittet. Lägg till OAuth-värden i listan över tillåtna källor.

    Leverantör SDK-providernamn OAuth-värd
    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

    Ett exempel på en Content-Security-Policy (implementerad för Azure Active Directory) är följande:

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

    Ersätt https://login.microsoftonline.com med OAuth-värden från föregående tabell. Mer information om metataggen content-security-policy finns i dokumentationen Content-Security-Policy.

    Vissa autentiseringsproviders kräver inte innehållssäkerhetsprincipändringar när de används på lämpliga mobila enheter. Till exempel krävs inga ändringar av innehållssäkerhetsprincipen när du använder Google-autentisering på en Android-enhet.

  3. Öppna filen www/js/index.js för redigering, leta upp metoden onDeviceReady() och lägg till följande kod under koden för klientskapande:

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

    Den här koden ersätter den befintliga koden som skapar tabellreferensen och uppdaterar användargränssnittet.

    Metoden login() startar autentiseringen med providern. Metoden login() är en asynkron funktion som returnerar ett JavaScript Promise. Resten av initieringen placeras i promise-svaret så att den inte körs förrän metoden login() har slutförts.

  4. I den kod som du just lade till ersätter du SDK_Provider_Name med namnet på din inloggningsprovider. Om du till exempel Azure Active Directory använder du client.login('aad').

  5. Kör projektet. När projektet har initierats visas OAuth-inloggningssidan för den valda autentiseringsprovidern i programmet.

Nästa steg

Lär dig hur du använder SDK: er.