Aggiungere l'autenticazione all'app per Xamarin.iOS

Articolo
06/25/2019

Panoramica

Questo argomento descrive come autenticare gli utenti di un'app mobile del servizio app dall'applicazione client. In questa esercitazione verrà aggiunta l'autenticazione al progetto di guida introduttiva Xamarin.iOS tramite un provider di identità supportato dal servizio app. In seguito all'autenticazione e all'autorizzazione da parte dell'app per dispositivi mobili, viene visualizzato il valore dell'ID utente e si sarà in grado di accedere ai dati della tabella con restrizioni.

È necessario completare prima l'esercitazione Creare un'app per Xamarin iOS. Se non si usa il progetto server di avvio rapido scaricato, è necessario aggiungere il pacchetto di estensione di autenticazione al progetto. Per altre informazioni sui pacchetti di estensione server, vedere l'articolo Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.

Registrare l'app per l'autenticazione e configurare i servizi app

Innanzitutto, è necessario registrare l'app nel sito di un provider di identità e quindi impostare le credenziali generate dal provider nel back-end dell'app per dispositivi mobili.

Configurare il provider di identità preferito seguendo le istruzioni specifiche del provider:
Ripetere i passaggi precedenti per ogni provider di cui si desidera il supporto nell'app.

Aggiungere l'app agli URL di reindirizzamento esterni consentiti

L'autenticazione sicura richiede la definizione di un nuovo schema URL per l'app. In questo modo il sistema di autenticazione reindirizza all'app al termine del processo di autenticazione. In questa esercitazione si usa lo schema URL appname. È tuttavia possibile usare QUALSIASI schema URL. Lo schema deve essere univoco per l'applicazione per dispositivi mobili. Per abilitare il reindirizzamento sul lato server:

Nel portale di Azure selezionare il servizio app.
Fare clic sull'opzione di menu Autenticazione/Autorizzazione.
In URL di reindirizzamento esterni consentiti specificare url_scheme_of_your_app://easyauth.callback. Il valore url_scheme_of_your_app in questa stringa è lo schema URL per l'applicazione per dispositivi mobili. Deve seguire le normale specifica URL per un protocollo, ovvero usare solo lettere e numeri e iniziare con una lettera. È opportuno prendere nota della stringa scelta perché sarà necessario modificare il codice dell'applicazione per dispositivi mobili con lo schema URL in diverse posizioni.
Fare clic su OK.
Fare clic su Save (Salva).

Limitare le autorizzazioni agli utenti autenticati

Per impostazione predefinita, le API in un back-end dell'app per dispositivi mobili possono essere richiamate in modo anonimo. È necessario limitare l'accesso solo ai client autenticati.

Back-end Node. js nuovamente fine (tramite il Portale di Azure) :

Nelle impostazioni di App per dispositivi mobili fare clic su Tabelle semplici e selezionare la tabella. Fare clic su Modifica autorizzazioni, selezionare Authenticated access only (Solo accesso con autenticazione) per tutte le autorizzazioni e quindi fare clic su Salva.
Back-end. NET (C#):

Nel progetto server passare a ControllersTodoItemController.cs>. Aggiungere l'attributo [Authorize] alla classe TodoItemController, come indicato di seguito. Per limitare l'accesso solo a metodi specifici, è inoltre possibile applicare questo attributo solo a tali metodi anziché alla classe. Pubblicare di nuovo il progetto server.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Back-end Node.js (tramite codice Node.js) :

Per richiedere l'autenticazione per l'accesso alla tabella, aggiungere la riga seguente allo script del server Node.js:
```
  table.access = 'authenticated';
```
Per altre informazioni, vedere Procedura: Richiedere l'autenticazione per l'accesso alle tabelle. Per informazioni su come scaricare il progetto di codice di avvio rapido dal sito, vedere Procedura: Scaricare il progetto di codice di avvio rapido del back-end Node.js tramite Git.

In Visual Studio o Xamarin Studio, eseguire il progetto client su un dispositivo o un emulatore. Verificare che dopo l'avvio dell'app venga generata un'eccezione non gestita con codice di stato 401 (Non autorizzato). L'errore viene registrato nella console del debugger. In Visual Studio l'errore dovrebbe quindi essere visualizzato nella finestra di output.

Questo errore non autorizzato viene generato perché l'app prova ad accedere al back-end dell'app per dispositivi mobili come utente non autenticato. La tabella TodoItem richiede ora l'autenticazione.

Si aggiornerà quindi l'app client per richiedere le risorse dal back-end dell'app per dispositivi mobili con un utente autenticato.

Aggiungere l'autenticazione all'app

In questa sezione si procederà alla modifica dell'app in modo da visualizzare una schermata di accesso prima dei dati. All'avvio, l'app non si connetterà al servizio app e non sarà visualizzato alcun dato. Dopo la prima volta che l'utente esegue il movimento di aggiornamento verrà visualizzata la schermata di accesso. Dopo aver eseguito correttamente l'accesso, verrà visualizzato un elenco di elementi ToDo.

Nel progetto client aprire il file QSTodoService.cs e aggiungere quanto segue tramite l'istruzione MobileServiceUser con la funzione di accesso alla classe QSTodoService:
```
using UIKit;

// Logged in user
private MobileServiceUser user;
public MobileServiceUser User { get { return user; } }
```

Aggiungere un nuovo metodo denominato Authenticate a QSTodoService con la definizione seguente:

public async Task Authenticate(UIViewController view)
{
    try
    {
        AppDelegate.ResumeWithURL = url => url.Scheme == "{url_scheme_of_your_app}" && client.ResumeWithURL(url);
        user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
    }
    catch (Exception ex)
    {
        Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
    }
}

Nota

Se si usa un provider di identità diverso da Google, sostituire il valore passato a LoginAsync riportato in precedenza con uno dei seguenti: MicrosoftAccount, Twitter, Google o WindowsAzureActiveDirectory.

Aprire QSTodoListViewController.cs. Modificare la definizione del metodo di ViewDidLoad rimuovendo la chiamata a RefreshAsync() verso la fine:

public override async void ViewDidLoad ()
{
    base.ViewDidLoad ();

    todoService = QSTodoService.DefaultService;
    await todoService.InitializeStoreAsync();

    RefreshControl.ValueChanged += async (sender, e) => {
        await RefreshAsync();
    }

    // Comment out the call to RefreshAsync
    // await RefreshAsync();
}

Modificare il metodo RefreshAsync per autenticare e visualizzare una schermata di accesso se la proprietà User è Null. Aggiungere il codice seguente nella parte superiore della definizione del metodo:

// start of RefreshAsync method
if (todoService.User == null) {
    await QSTodoService.DefaultService.Authenticate(this);
    if (todoService.User == null) {
        Console.WriteLine("couldn't login!!");
        return;
    }
}
// rest of RefreshAsync method

Aprire AppDelegate.cs e aggiungere il seguente metodo:

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    if (client.ResumeWithURL(app, url, options))
        return true;
    return base.OpenUrl(app, url, options);
}

Aprire il file Info.plist e passare a Tipi di URL nella sezione Avanzate. Configurare ora l'identificatore e gli schemi URL del tipo di URL e fare clic su Aggiungi tipo di URL. Gli schemi URL devono essere gli stessi del valore {url_scheme_of_your_app}.
In Visual Studio, connettersi all'host Mac o a Visual Studio per Mac e quindi eseguire il progetto client scegliendo come destinazione un dispositivo o un emulatore. Verificare che nell'app non siano visualizzati dati.

Eseguire il movimento di aggiornamento spostando verso il basso l'elenco di elementi, in modo da visualizzare la schermata di accesso. Dopo aver correttamente immesso le credenziali valide, verrà visualizzato l'elenco di elementi ToDo e sarà possibile aggiornare i dati nell'app.

Condividi tramite