Lägga till autentisering i Apache Cordova-appen

2019-06-25

Sammanfattning

I den här handledningen lägger du till autentisering i snabbstartsprojektet Todolist på Apache Cordova med hjälp av en stödd identitetsleverantör. Den här självstudien baseras på självstudien Kom igång med Mobile Apps , 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 anger du de providergenererade autentiseringsuppgifterna i mobile apps-serverdelen.

Konfigurera din önskade identitetsprovider genom att följa de providerspecifika anvisningarna:
Upprepa föregående steg för varje leverantör 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 i en Mobile Apps-serverdel anropas anonymt. Därefter måste du begränsa åtkomsten till endast autentiserade klienter.

Node.js backend (via Azure-portalen) :

I inställningarna för Mobilappar 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 Controllers>TodoItemController.cs. [Authorize] Lägg till 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. Återpublicera serverprojektet.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (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 Så här: Kräv autentisering för åtkomst till tabeller. Information om hur du laddar ned snabbstartskodprojektet från din webbplats finns i Så här laddar du ned snabbstartskodprojektet Node.js serverdel med Git.

Nu kan du kontrollera att anonym åtkomst till serverdelen 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-emulatorn.
Kontrollera att ett oväntat anslutningsfel visas när appen startas.

Uppdatera sedan appen för att autentisera användare innan du begär resurser från mobilappens serverdel.

Lägga till autentisering i appen

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

Content-Security-Policy Leta upp metataggen i huvudavsnittet. Lägg till OAuth-värd 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	microsoftkonto	https://login.live.com
Twitter	Twitter	https://api.twitter.com

Ett exempel på Innehåll-Security-Policy (implementerat för Azure Active Directory) är som följer:

 <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ärd från föregående tabell. Mer information om metataggen content-security-policy finns i dokumentationen om content-Security-Policy.

Vissa autentiseringsprovidrar kräver inte innehålls-Security-Policy ändringar när de används på lämpliga mobila enheter. Inga förändringar av Content-Security-Policy krävs när du använder Google-autentisering på en Android-enhet.

www/js/index.js Öppna filen för redigering, leta upp onDeviceReady() metoden och under koden för att skapa klienten lägger du till följande kod:
```
 // 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 autentisering 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.
I koden som du precis lade till ersätter SDK_Provider_Name du med namnet på din inloggningsprovider. För Azure Active Directory använder du client.login('aad')till exempel .
Kör projektet. När projektet har initierats visar programmet inloggningssidan för OAuth för den valda autentiseringsprovidern.

Nästa steg

Läs mer om autentisering med Azure App Service.
Fortsätt självstudien genom att lägga till push-meddelanden i din Apache Cordova-app.

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

Dela via