Aplicație Win 8 în 10 zile – #6 – Sistemul de login
Salutare, ziua a 6-a și urmează să adăugăm un sistem de login prin facebook și twitter! Mâine o să facem un scoreboard și vrem ca utilizatorii noștri să fie logați.
Pentru sistemul de login asta o să folosim Windows Azure Mobile Services.
În portalul Azure o să mergem în partea stânga jos dăm click pe New–> Compute –> Mobile Service și create. Desigur că o să avem nevoie de o bază de date și Azure ne pune la dispoziție trei variante: să folosim o bază de date deja existenă, să creăm una nouă sau să folosim o bază de date de 20mb care vine gratuit.
Eu am folosit o bază de date pe care o folosesc în general la proiecte de dimensiuni mici pentru că am până la urmă o limită în Azure și nu vreau să o depășesc 🙂 E foarte importantă și regiunea pe care o folosim pentru a minimaliza costurile, o regiune cât mai apropiată de utilizatorii pe care-i vei avea este cel mai bine. Baza mea de date este în North Europe și pentru moment ceea ce trebuie să reținem noi este MobileServiceUrl: https://smartapps.azure-mobile.net
Am zis că o să ne legăm la aplicația noastră cu ajutorul Facebook și Twitter, pentru asta avem nevoie de câte un cont pe fiecare platformă și să facem o aplicație.
Începem cu Facebook, intrăm în panoul Developers și dăm click pe Apps (nu mai țin minte sigur, dar mi se pare că trebuie să dai accept la niște chestii înainte să continui).
În noua interfață caută butonul de + Create New App
Completezi numele aplicației, namespace-ul pe care vrei să îl aibă precum și categoria.
Notăm undeva App ID și App Secret și avem grijă ca nimeni să nu afle de ele. Este modul prin care eu o să mă conectez la aplicația mea pentru sistemul de login. De asemenea în partea de jos a paginii avem posibilitatea să specificăm modul cum se va conecta aplicația noastră la Facebook. Selectăm Website with Facebook login și scriem acolo site-ul pe care l-am luat din Azure Mobile Services mai devreme.
În principiu la fel stau lucrurile și la Twitter, intru în contul de Developer, creez o aplicație nouă.
Îi dau un nume, o descriere, un website placeholder dacă nu am și, again, site-ul pe care l-am primit din Mobile Services.
Primesc un Consumer Key și un Consumer Secret de data aceasta și am foarte mare grijă să nu afle cineva de ele pentru că astfel pot avea acces la aplicația mea.
Mobile Services – part 2
Mă întorc la portalul Azure, și la Mobile Services selectez IDENTITY din meniul de sus și doar completez datele pe care le-am notat mai devreme de la aplicația mea de Facebook și Twitter.
Un ultim lucru mai avem de făcut înainte să ne întoarcem la cod, dăm click, în Mobile Services, pe norul cu fulger din partea stângă sus spunem platforma pe care vrem să implementăm sistemul de login și vrem să ne conectăm la o aplicație deja existentă. Dăm copy paste la cod și intrăm în Visual Studio 2013.
C# time
În Visual Studio o să accesăm App.xaml.cs, locul unde ne ținem toate resursele globale ale aplicației, și fix la începutul clasei punem bucata de cod pe care am luat-o din Azure.
Merg la meniul de sus, click Project –> Manage NuGet Packages. Selectez opțiunea Online din stânga, de sus selectez Include Prereleases și în search-ul din dreapta scriu Mobile Services, găsesc Windows Azure Mobile Services îi dau Install. Intru înapoi în app.xaml.cs și adaug using-ul: using Microsoft.WindowsAzure.MobileServices;
Intrăm în pagina în care vrem să adăugăm loginul (ItemsPage în cazul nostru) adăugăm încă un using: using Windows.UI.Popups; creăm o variabilă private MobileServiceUser user;
Avem două metode care se for ocupa de login-un pentru Facebook și pentru Twitter:
Pentru facebook avem:
Și pentru Twitter avem:
Tot ce urmează acum este să facem două butoane în XAML și fiecare să apeleze câte unul din cele două login-uri.
Xaml-ul l-am adăugat în grid-ul în care există și PageTitle, astfel că la momentul actual aplicația noastră ar trebui să arate cam așa: Eventul care se ocupa de tap este următorul:
Și cam atât pentru sistemul nostru de login. Urmează ca mâine să facem un leaderboard într-o bază de date și să postăm pe twitter/facebook când am un nou scor!
By: Adrian Coman