Egy .NET fejlesztő vagy, aki mindig is szeretett volna mobil alkalmazást készíteni? Vagy talán már próbálkozott natív mobilalkalmazások készítésével Android vagy iOS segítségével, de nem tetszettek a nyelvek? Nos, akkor szerencsés vagy! A .NET világot megáldotta a Xamarin; egy olyan eszközkészlet, amellyel mobilalkalmazásokat készíthet Androidra, iOS-re és Windowsra a Visual Studióban.

A Xamarin két fő ízben létezik: Xamarin platform (Xamarin.iOS és Xamarin.Android) és Xamarin.Forms. A Xamarin.Forms segítségével az üzleti logika és a felhasználói felület túlnyomó többsége egyetlen megosztott projektben írható, amely teljesen működő alkalmazásokat készít mindhárom iOS, Android és Windows (UWP) operációs rendszeren. A Xamarin platform ezzel szemben nagyon is platformspecifikus munka, és inkább hasonlít a natív alkalmazások írásához, de C#-val.

Ebben a bemutatóban a Xamarin platformot és az Android operációs rendszer Xamarin.Android néven ismert eszközkészletét fogom közelebbről megvizsgálni. Az általános cél az, hogy lehetővé tegye egy egyszerű natív Android-alkalmazás létrehozását, alapvető felhasználói hitelesítéssel együtt.

A Visual Studio és a környezet beállítása

A követéshez szükséged lesz a Visual Studio egy példányára, valamint a ‘Mobilfejlesztés .NET-tel’ című munkarészre. Ezt a funkciót vagy a Visual Studio első telepítésekor engedélyezheti, vagy a ‘Tools -> Get Tools and Features…’ menüpontból érheti el:

Az alkalmazás tesztelése és futtatása során választhat, hogy ezt a fejlesztőgépén futó Android emulátorral, vagy közvetlenül egy meglévő Android készülékhez csatlakozva teszi. Itt nincs helyes választás, és a különböző fejlesztők különböző formátumok használatát részesítik előnyben. Ha az előbbi lehetőséget választja, akkor a munkaterhelés kiválasztása után biztosítania kell, hogy a jobb oldali ablakban (“Telepítés részletei”) az Intel Hardware Accelerated Execution Manager és a Google Android Emulator jelölőnégyzetek be legyenek jelölve (ahogy fent látható).

A Visual Studio Android környezetének ellenőrzése

Hogy ellenőrizze, hogy minden megfelelően települt és helyesen lett-e konfigurálva, menjen az ‘Eszközök -> Beállítások -> Xamarin -> Android beállítások’ menüpontba, és ellenőrizze, hogy a Java Development Kit Location és az Android SDK Location elérési útvonalak érvényesek-e (i. m.azaz van-e zöld pipa):

Ha valamelyik hiányzik, akkor manuálisan kell telepítenie a Java Development Kitet, illetve az Android SDK-t.

Hozzon létre egy Xamarin alkalmazást

Kezdje egy új projekt létrehozásával, és válassza ki az ‘Android App (Xamarin)’ master sablont (az Android menüben található). A következő oldalon a ‘Single View App’ opciót kell kiválasztania, mivel ez egy nagyszerű kezdő sablon a munkához.

A minimális Android verzióval kapcsolatban ez az Ön, mint fejlesztő személyes döntése. Itt kompromisszumot kell kötni az újabb verziók legújabb és legjobb API-funkciók elérhetősége és a régebbi verziókkal rendelkező ügyfelek támogatása között. A döntés meghozatalának megkönnyítése érdekében a Google meglehetősen rendszeresen közzéteszi a platformverzió-elosztási adatokat, amelyeket a Distribution dashboard részeként gyűjt. Személyes preferenciám az 5.0 vagy a 6.0 között van, attól függően, hogy ez egy nyilvános fogyasztásra szánt alkalmazás vagy egy megrendelt alkalmazás csak vállalati telefonokra (azaz valószínűleg rendelkeznek a legújabb frissítésekkel); ebben a példában az utóbbit választottam. Vegye figyelembe, hogy ez a verzió eltér a Target Android Version-től, és ezt mindig a legfrissebb SDK verzióra kell állítani, mivel az ennél kisebb verzió nem lesz elfogadva a Google Play áruházban.

Amint ezt létrehozta, már csak a szükséges NuGet csomagok importálása van hátra. Ehhez a bemutatóhoz szükséged lesz:

• Xamarin.OpenId.AppAuth.Android – A felhasználó hitelesítéséhez az OpenID Connect szabványt fogod használni (az OAuth 2.0 továbbfejlesztése). A legegyszerűbben a specifikációt betartó klienskódot az AppAuth kliens SDK for Android segítségével lehet megvalósítani, és hasznos módon a Xamarin portolt egy csomagot ebből a funkcionalitásból, amely elérhető az Ön számára.
• System.IdentityModel.Tokens.Jwt – A hitelesítési módszer itt JSON Web Tokeneket használ. Az ezekből a tokenekből szükséges adatok kinyeréséhez erre a csomagra lesz szükséged.

Kiegészítésképpen erre a két csomagra is szükséged lesz, mivel az AppAuth támaszkodik rájuk:

• Xamarin.Android.Support.v4
• Xamarin.Android.Support.CustomTabs

Ismerkedjünk meg a Xamarin projekttel

Ha még sosem dolgoztunk Androiddal, az egyik legfontosabb alapelv, amit meg kell ismernünk, az Activity fogalma. A Tevékenységek a felhasználói felület megjelenítésére használt komponensek; a legalapvetőbb formában úgy gondolhatsz a Tevékenységekre, mint egy alkalmazás lapjaira, amelyek között a felhasználó navigálhat. Egy Activity-t a kódban egy osztály reprezentál, azonban az ASP.NET-ben egy oldalhoz hasonlóan egy XML-alapú elrendezési fájlt (egy .axml fájlt) is társíthat (és szinte mindig társít is) a megjeleníthető dizájn érdekében. Minden új projekt létrehoz egy “MainActivity.cs” és egy “activity_main.axml” fájlt, amely az alkalmazás megnyitásakor az első futtatandó Activity (azaz oldal). Ez az osztály Activity attribútumán belül a MainLauncher = true tulajdonság felhasználásával bármely más Activityre módosítható.

A források úgy vannak kialakítva, hogy saját könyvtárukban kezelhetők legyenek, és egy kissé szigorú elnevezési konvenciót követnek. Erősen ajánlom, hogy a lehető legtöbb erőforrásodat ebben a könyvtárban tárold, mivel ez leegyszerűsíti ezeknek a változóknak az újrafelhasználását a folyamatos fejlesztés során. A Resources könyvtár ‘values’ könyvtárában találod a speciális célú fájlokat:

• Strings.xml – Itt található az összes felhasználóval szembenéző karakterlánc. Ezt különösen fontos használni, mivel lehetővé teszi a karakterláncok lokalizálását a globális közönség számára.
• Styles.xml – Itt találod a tervezési objektumok formázásához szükséges attribútumokat; gondolj rá úgy, mint egy CSS fájlra.
• Colors.xml – A hely, ahol a leggyakrabban használt színekre való hivatkozásokat tárolhatod a formázás részeként.
• Dimens.xml – Ahogy a neve is sugallja, itt határozza meg az alkalmazás elrendezésének meghatározott méreteit.

A többi nevezetes könyvtár nem követ semmilyen elnevezési konvenciót a fájljaikra vonatkozóan, de bizonyos fájltípusokat tartalmazniuk kell:

• Layout – Az .axml fájlok tárolásának helye. Ezek a fájlok definiálják a teljes tevékenység elrendezéseket, a programozottan generált és feltöltött elrendezési komponenseket, a párbeszédpanelek (figyelmeztető ablakok) elrendezéseit stb.
• Menu – Itt találhatók a menük és elemeik definíciói. Ezek olyan .xml fájlok, amelyeknek menu a gyökéreleme és item gyermekelemei vannak, amelyek közül group elemekkel lehet csoportosítani. A leggyakrabban előforduló menük a túlfolyó menü (a három függőleges pont gombból) vagy a navigációs menü (a home ‘hamburger’ gombból).
• Mipmap – Ahol olyan képeket kell definiálni, amelyeket a képernyő sűrűségétől függően kell méretezni, azaz amelyekre más alkalmazások hivatkoznak, és amelyeket nem használnak belsőleg. Az alkalmazás ikonja a leggyakoribb tartalom, amit a mipmap könyvtárakba helyezne.
• Drawable – Nem szabványos az alapértelmezett projektsablonban, de létrehozható saját maga. Itt tárolja az alkalmazáson belül használni kívánt képeket/rajzolható tartalmakat, pl. a kezdőképernyőt, az egyéni haladási sáv terveit, az alkalmazáson belül használt ikonokat stb.

Végül, ha bármilyen nyers tartalomfájlja van, amelyet az alkalmazás részeként szeretne használni (pl. egy szöveg- vagy betűtípusfájl), akkor az Assets könyvtárban kell elhelyezni. Assets-ként ezek a fájlok az alkalmazással együtt kerülnek telepítésre, hogy Ön az Asset Managerrel hozzáférhessen.

Az Assets-ről és az erőforrásokról, valamint azok használatáról többet megtudhat, az újonnan létrehozott projekt minden könyvtárában praktikus “About” szöveges fájlok találhatók.

Add User Authentication to Xamarin with OpenID Connect

A legtöbb alkalmazás manapság megköveteli a felhasználói azonosítás valamilyen formáját, hogy a fejlesztő testre szabott élményeket kínálhasson, és viszont lehetővé tegye a felhasználó számára az adatainak megőrzését az eszközök/installációk között. Ezen kívül ott van még a hozzáférés-szabályozás kérdése, amely hasznos lehet a felhasználók egy részhalmazának engedélyezéséhez extra funkciókhoz. Természetesen ez elég fáradságos feladat lehet, különösen akkor, ha alkalmazások készítésével foglalkozik, és minden egyes alkalmazáshoz új rendszerre van szüksége. Szerencsére az Okta segítségével néhány perc alatt beállíthatsz egy alkalmazást, és akkor minden nehéz munkát elvégeztél magad helyett! Az Okta szolgáltatás megfelel az OAuth 2.0 szabványnak és tanúsított OpenID Connect szolgáltató, így tökéletesen együttműködik az AppAuth kliens SDK-val minden hitelesítési és engedélyezési igénye kielégítésére.

Az Okta alkalmazás beállítása

Először is létre kell hoznia egy új alkalmazást az Okta fiókjában ehhez a projekthez. Ha még nincs, nagyon egyszerű létrehozni egy új, örökké ingyenes fejlesztői fiókot.

Ha ez megtörtént, és bejelentkeztél a fejlesztői műszerfalra, jegyezd fel az Org URL-t, mert később szükségünk lesz rá:

A műszerfalról menj az “Alkalmazások” fülre, majd onnan az “Alkalmazás hozzáadása”. Ön egy natív Android alkalmazást hoz létre, ezért a legjobb, ha a ‘Native’ platformsablont választja.

Erről az oldalról adjon nevet az alkalmazásnak, minden mást pedig hagyjon alapértelmezettnek. A mentés után jegyezze meg a bejelentkezési átirányítási URI-ket és az ügyfél-azonosítót, mivel ezekre a következőkben szüksége lesz.

Azért, hogy a jövőben könnyedén használhassa ezt a három értéket az Okta-tól, javaslom, hogy a hitelesítési logikának egy új könyvtáron belül egy saját statikus osztályba helyezze őket:

public static class Configuration{ public const string ClientId = "{yourClientId}"; public const string LoginRedirectUri = "{yourRedirectUri}"; public const string OrgUrl = "https://{yourOktaDomain}";}

Hitelesítési szolgáltató létrehozása

Lépjünk túl a boilerplate kódon. Be kell konfigurálnod az alkalmazást, hogy tájékoztasd az átirányítási URI-sémádról. A séma a bejelentkezési átirányítási URI (a szokásos fordított tartománynév formájában) az elérési útvonal nélkül. Például a fenti képernyőkép alapján az én sémám ‘com.oktapreview.dev-123456’ lenne.

A legegyszerűbb módja ennek, ha az alábbi szándékszűrő részletet beilleszted a megoldásod Properties mappájában lévő AndroidManifest.xml fájlodba. A Application tagen belül illessze be az alábbi XML-t, és a séma értékét változtassa meg a sajátjára:

<activity android:name="net.openid.appauth.RedirectUriReceiverActivity"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="{yourRedirectRriScheme}" /> </intent-filter></activity>

Az engedélyezés eredményének modelljét is meg kell határoznia egy egyszerű osztállyal. Bár nem fogom használni az összes értéket, amit alább írtam a kódon belül, megmutatom, hogyan kell feltölteni őket, hogy utána használhassa őket. Mivel ez az alkalmazásod modelljének része, hozz létre egy Models nevű mappát, és adj hozzá egy AuthorizationResult.cs osztályt benne. Ezután add hozzá a következő kódot:

public class AuthorizationResult{ public string AccessToken { get; set; } public string IdentityToken { get; set; } public bool IsAuthorized { get; set; } public string RefreshToken { get; set; } public string Scope { get; set; }}

Az Android nem rendelkezik globális állapottal, amellyel dolgozhatnál, ezért ha egyszerű értékeket szeretnél átadni a tevékenységek között, akkor a legjobb módja ennek a Intent objektum Extras funkciója. A Intent egy előre definiált osztály az Androidban, és egy másik alapvető fogalom, amelyet meg kell értenünk. Ez az elvégzendő művelet absztrakciója (azaz a “szándékaid”), és ahhoz, hogy egy másik tevékenységhez navigálj előre, létre kell hoznod ennek az osztálynak egy példányát azzal, hogy melyik tevékenységhez “szándékozol” menni. Az Extrák tulajdonságai a Intent objektumon tulajdonképpen csak egy szótár, amely az objektum értékeihez tartozó kulcsokat tartalmazza, és Put és tipizált Get metódusokkal érhető el.

Míg ezek a metódusok viszonylag egyértelművé és egyszerűvé teszik a használatot, én személy szerint szeretem, ha minden hozzáférés a saját osztályukon belül marad (pontosabban egy bővítmény osztályon belül), hogy jobban elkülönüljenek a problémák. Ez rendkívül hasznos, mivel nem kell osztályokon átívelően hozzáférni a kulcsokhoz, és garantálhatjuk a típusbiztonságot ezen értékek be- és kinyerésekor. A jogosultsági szolgáltatódban a következőket szeretnéd: tárolni a AuthState-t, ellenőrizni, hogy ott van-e, és visszaadni, ha igen. Hozzon létre egy új mappát Extensions néven a megoldás gyökerében. Ezután adjunk hozzá egy új osztályt IntentExtensions.cs néven. Legyen az osztály public és static, majd adjuk hozzá a következő kódot az osztályon belül:

public const string AuthStateKey = "authState";public static string GetAuthStateExtra(this Intent intent){ return intent.GetStringExtra(AuthStateKey);}public static bool HasAuthStateExtra(this Intent intent){ return intent.HasExtra(AuthStateKey);}public static void PutAuthStateExtra(this Intent intent, AuthState authState){ intent.PutExtra(AuthStateKey, authState.JsonSerializeString());}public static bool TryGetAuthStateFromExtra(this Intent intent, out AuthState authState){ authState = null; if (!intent.HasAuthStateExtra()) { return false; } try { authState = AuthState.JsonDeserialize(intent.GetAuthStateExtra()); } catch (JSONException) { return false; } return authState != null;}

Most itt az ideje definiálni az engedélyezési szolgáltatót, AuthorizationProvider.cs a Authentication mappában, amelyet korábban a Configuration.cs osztályhoz készítettünk. Először is távolítsuk el az összes using utasítást az újonnan létrehozott osztályon belül, majd deklaráljuk a konfigurációt static readonly változóként:

private static readonly Uri ConfigurationEndpoint = Uri.Parse($"{Configuration.OrgUrl}/oauth2/default/.well-known/openid-configuration");private static readonly string Scopes = new { "openid", "profile", "email", "offline_access" };

private AuthorizationRequest authorizationRequest;private PendingIntent completedIntent;private AuthState authorizationState;private readonly AuthorizationService authorizationService;private readonly Context context;private readonly TaskCompletionSource<bool> taskCompletionSource = new TaskCompletionSource<bool>();

public AuthorizationProvider(Context context){ authorizationService = new AuthorizationService(context); this.context = context;}public async Task<AuthorizationResult> SignInAsync(){ ...}public void NotifyCallback(Intent intent){ ...}

AuthorizationServiceConfiguration serviceConfiguration = await AuthorizationServiceConfiguration.FetchFromUrlAsync(ConfigurationEndpoint);BuildAuthorizationRequest(serviceConfiguration);BuildCompletedIntent(serviceConfiguration);return await RequestAuthorization();

private void BuildAuthorizationRequest(AuthorizationServiceConfiguration serviceConfiguration){ AuthorizationRequest.Builder builder = new AuthorizationRequest.Builder( serviceConfiguration, Configuration.ClientId, ResponseTypeValues.Code, Uri.Parse(Configuration.LoginRedirectUri)); builder.SetScope(string.Join(" ", Scopes)); authorizationRequest = builder.Build();}

private void BuildCompletedIntent(AuthorizationServiceConfiguration serviceConfiguration){ Intent intent = new Intent(context, typeof(MainActivity)); intent.PutAuthStateExtra(new AuthState()); completedIntent = PendingIntent.GetActivity(context, authorizationRequest.GetHashCode(), intent, 0);}

private async Task<AuthorizationResult> RequestAuthorization(){ authorizationService.PerformAuthorizationRequest(authorizationRequest, completedIntent); await taskCompletionSource.Task; return new AuthorizationResult() { AccessToken = authorizationState?.AccessToken, IdentityToken = authorizationState?.IdToken, IsAuthorized = authorizationState?.IsAuthorized ?? false, RefreshToken = authorizationState?.RefreshToken, Scope = authorizationState?.Scope };}

if (!intent.TryGetAuthStateFromExtra(out authorizationState)){ taskCompletionSource.SetResult(false); return;}AuthorizationResponse authorizationResponse = AuthorizationResponse.FromIntent(intent);AuthorizationException authorizationException = AuthorizationException.FromIntent(intent);authorizationState.Update(authorizationResponse, authorizationException);if (authorizationException != null){ taskCompletionSource.SetResult(false); return;}authorizationService.PerformTokenRequest(authorizationResponse.CreateTokenExchangeRequest(), ReceivedTokenResponse);

private void ReceivedTokenResponse(TokenResponse tokenResponse, AuthorizationException authorizationException){ authorizationState.Update(tokenResponse, authorizationException); taskCompletionSource.SetResult(true);}

<item android:id="@+id/action_signin" android:orderInCategory="100" android:title="@string/action_signin" app:showAsAction="never" />

<string name="action_signin">Sign In</string><string name="welcome_message_format">Hi, %1$s!</string>

<ProgressBar android:id="@+id/signin_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:paddingBottom="12dp" android:visibility="gone" />

LaunchMode = LaunchMode.SingleTask

private static AuthorizationProvider authorizationProvider;protected override void OnCreate(Bundle savedInstanceState){ ... authorizationProvider = new AuthorizationProvider(this);}

protected override void OnNewIntent(Intent intent){ base.OnNewIntent(intent); if (intent != null && intent.Data.Path.Equals("/callback", StringComparison.OrdinalIgnoreCase)) { authorizationProvider.NotifyCallback(intent); }}

if (id == Resource.Id.action_signin){ OnSignInAttempted(); return true;}

private async void OnSignInAttempted(){ ProgressBar signInProgress = FindViewById<ProgressBar>(Resource.Id.signin_progress); signInProgress.Visibility = ViewStates.Visible; AuthorizationResult authorizationResult = await authorizationProvider.SignInAsync(); if (!string.IsNullOrWhiteSpace(authorizationResult.AccessToken) && authorizationResult.IsAuthorized) { // Placeholder: Success case } else { // Display an error to the user AlertDialog authorizationErrorDialog = new AlertDialog.Builder(this) .SetTitle("Error!") .SetMessage("We were unable to authorize you.") .Create(); authorizationErrorDialog.Show(); signInProgress.Visibility = ViewStates.Gone; }}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:id="@+id/welcome_message" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /></LinearLayout>

SetContentView(Resource.Layout.activity_dashboard);

private const string NameKey = "Name";public static void PutNameExtra(this Intent intent, string name){ intent.PutExtra(NameKey, name);}public static string GetNameExtra(this Intent intent){ return intent.GetStringExtra(NameKey);}

string name = Intent.GetNameExtra();TextView welcomeMessage = FindViewById<TextView>(Resource.Id.welcome_message);welcomeMessage.Text = Resources.GetString(Resource.String.welcome_message_format, name);

JwtSecurityTokenHandler tokenHandler = new JwtSecurityTokenHandler();JwtSecurityToken jsonToken = tokenHandler.ReadJwtToken(authorizationResult.IdentityToken);IEnumerable<Claim> claims = jsonToken?.Payload?.Claims;string name = claims?.FirstOrDefault(x => x.Type == "name")?.Value;Intent dashboardIntent = new Intent(this, typeof(DashboardActivity));dashboardIntent.PutNameExtra(name);StartActivity(dashboardIntent);Finish();