Windows Phone'da LiveID Authentication

0 dakikada yazıldı

26555 defa okundu

Düzenle

Harici "Identity Provider"ların entegrasyonu çoğu developer için
sıkıntılı olabiliyor. Bana gelen sorular arasında da popüper bir yeri
ver bu konunun. O nedenle bu yazıda hızlıca bir Windows Phone
uygulamasına LiveID Authentication entegrasyonu yapacağız. İlk yapmanız
gereken hemen LiveID
SDK
'i adresinden indirip
bilgisayarınıza kurmak. SDK bizim LiveID entegrasyonunu çocuk oyuncağına
çevirecek :) Ben bu makaleyi yazarken SDK'in sürümü 5.5 şeklindeydi. Bu
sürüm Windows Phone 7.5, 7.8 ve 8.0'ı destekliyor.

LiveSDK'den referansları projeye ekliyoruz.
LiveSDK'den referansları projeye ekliyoruz.

SDK'yi yükledikten sonra yeni bir Windows Phone projesi yarattıktan
sonra "Solution Explorer"'da "Add Reference" diyerek yukarıdaki ekran
görüntüsünde de görebileceğiniz üzere "Microsoft.Live" ve
"Micorosoft.Live.Controls" assemblylerini referans olarak uygulamaya
ekliyoruz. Örneğimizde "Live.Controls" içerisindeki kontrollerden birini
kullanacağınız ve söz konusu kontrolü XAML tarafındaki kullanabilmek
için bu assembly'yi uygun bir XAML NameSpace'ine maplememiz gerekiyor.

[XAML]

<phone:PhoneApplicationPage
    x:Class="LiveIDLogin.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    xmlns:livesdk="clr-namespace:Microsoft.Live.Controls;assembly=Microsoft.Live.Controls"
    shell:SystemTray.IsVisible="True">

Yukarıdaki XAML kodu örnek bir Windows Phone Page'inin en üst markup
kısmı. Renkli olan kısım örneği çalıştırmak için eklememiz gereken
kısım. Daha önce de bahsettiğimiz gibi yeni bir XAML NameSpace'i
yaratarak arkada referans olarak eklediğimiz Assembly'yi bu NameSpace'e
bağlıyoruz. Böylece bu Assembly içerisindeki nesneleri XAML tarafında da
tanımlayabileceğiz.

[XAML]

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <livesdk:SignInButton Name="btnSignin" 
                          ClientId="CLIENT_ID" 
                          Scopes="wl.signin wl.basic" 
                          Branding="MicrosoftAccount" 
                          TextType="SignIn" 
                          SessionChanged="btnSignin_SessionChanged" 
                          HorizontalAlignment="Left"
                          VerticalAlignment="Top" />
</Grid>

Bir sonraki adım artık "Live.Controls" altından SignInButton
kontrolünü ekrana almak. Bu düğme kendi içerisinde LiveID Login ekranını
açma ve tüm süreci kontrol etme özelliğine sahip. Normal şartlarda, yani
eskiden olsa bizim gidip bir tarayıcı kontrolünü ekrana koymamız,
gerekli navigasyonları sağlamamız ve tokenı ele geçirmemiz gerekirdi.
"SignInButton"'ın yardımı ile artık bunların hiçbiri ile uğraşmamız
gerekmiyor. SignInButton'un özellikleri arasında dikkatinizi çekti ise
"Scopes" diye bir değer var. Buradaki değerler aslında sizin Login olan
LiveID kullanıcısının hangi bilgilerine ulaşabileceğinizi tanımlıyor.
İsterseniz tüm scope'ların bir listesine
buradan
ulaşabilirsiniz. Bu noktada önemli olan şey olabildiğince düşük bir
scope tercih etmeniz. İhtiyacınız olmayan bilgileri istememenizde fayda
var. Sonuç itibari ile kullanıcılar bu bilgileri istediğinizi LiveID
Login ekranında görecekler ve istediğiniz bilgileri genişliği
kullanıcıların Login olmaktan vaz geçmesine de neden olabilir.

CLIENT_ID derken?

Erken davranıp yukarıdaki kodu çalıştıran oldu ise tabi ki hata aldılar.
Bahsetmediğimiz çok kritik bir nokta var. XAML kodu içerisinde
SignInButton'ın özelliklerinden biri de "ClientId" özelliği. Buraya
aslında LiveID Authentication servislerine ulaşabilmek için özel bir
ulaşım anahtarı girmemiz gerekiyor. Bu anahtarı tabi ki ben sizlerle
paylaşmayacağım :) Herkesin kendisinin gidip alması gerekecek. O nedenle
gelin daha fazla ilerlemeden önce bu anahtarı nasıl alabileceğimize göz
atalım.

İlk yapmanız gereken Live Connect
Management
sayfasına
gidip uygulamanızın yöneticisi olacak olan LiveID ile login olmak. Söz
konusu LiveID uygulamnın Live servislerini kullanabilmesi için gerekli
bağlantıyı yönetecek olan LiveID olacak. Bu şirketinizin bir LiveID'si
veya basit bir şekilde sizin developer LiveID'niz olabilir. Login
olduktan sonra "Create Application" diyerek devam edebilirsiniz.

LiveID Erişimi için uygulamamızı tanımlıyoruz.
*LiveID Erişimi için uygulamamızı tanımlıyoruz.*p>

Bir sonraki ekran aynen yukarıdaki gibi uygulama bilgilerinizi
gireceğiniz ekran olacak. Buradaki bilgilerde gireceğiniz uygulama adı
"LiveLogin" ekranında gözükecektir. Sözleşmeyi kabul edip bir sonraki
ekrana geçtiğinizde uygulamanız tanımlanmış olacak. Eğer isterseniz
uygulamanız için bir logo yükleyebilir, kullanıcı sözleşmesinin
linklerini de verebilirsiniz. Bunların hepsi LiveLogin ekranında
gösterilir.

Mobile uyumluluğunu aktif hale getirelim.
Mobile uyumluluğunu aktif hale getirelim.

Uygulamayı tanımladıktan sonra yapmamız gereken son bir ayar da "API
Settings" kısmında mobil erişimi açmak olacak. Bu işlem de
tamamlandıktan sonra "App Settings" kısmına geçerek "ClientID"nizi
edinebilirsiniz. Buradan aldığınız ClientID'yi bizim SignInButton'un
ClientID özelliğine yazmanız gerekecek.

[C#]

    private Microsoft.Live.LiveConnectClient client;
    private async void btnSignin_SessionChanged(object sender, 
                        Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
    {
        if (e.Status == Microsoft.Live.LiveConnectSessionStatus.Connected)
        {
            client = new Microsoft.Live.LiveConnectClient(e.Session);
            Microsoft.Live.LiveOperationResult operationResult = await client.GetAsync("me");
            try
            {
                dynamic sonuc = operationResult.Result;
                if (sonuc.first_name != null &&
                    sonuc.last_name != null)
                {
                    MessageBox.Show(
                        string.Format("Merhaba {0} {1}!", sonuc.first_name, sonuc.last_name));
                }
                else
                {
                    MessageBox.Show("Merhaba isimsiz kullanıcı!");
                }
            }
            catch (Microsoft.Live.LiveConnectException exception)
            {
                //API'larda problem oldu bir şeyler yapmak gerek.
            }
        }
        else
        {
            MessageBox.Show("Login gerçekleşmedi");
        }
    }

Son olarak SignInButton'ın SessionChanged eventine de login sonrası
çalışacak kodlarımızı yazıyoruz. Login sonrası esasen biz bir LiveID
Session geliyor. Bu session'ı kullanarak ek bilgiler alabiliyoruz. Bizim
örneğimizde "Me" üzerinden giderek kişinin profil bilgilerini istiyoruz.

LiveID'den gelen basit profil bilgileri.
LiveID'den gelen basit profil bilgileri.

Bu noktada kişi bilgilerini almanın yanı sıra bu LiveID credential'ını
kendi profil yapınızla birleştirmek de isteyebilirsiniz. Bunu yapabilmek
için kullanacağınız unique identifier adından da anlaşılacağı üzere "ID"
field'i olacak.

Makaledeki örneğin kodlarına
github
üzerinden ulaşabilirsiniz.

Görüşmek üzere.