Windows Phone 7 und OAuth 2.0

Im Zuge der rasanten App-Entwicklung haben sich auch die sicheren Login Methoden wie OpenID oder OAUTH schnell entwickelt. Schnell findet man für diverse Plattformen wie iOS oder Android erste Bibliotheken bzw Sample Clients, um OAuth in der aktuellen Version 2.0 nutzen zu können.

Hier nun ein Beispiel, wie Ihr für Windows Phone 7 (WP SDK 7.1) dies nutzen könnt.

OAuth Sieht vor, eine URL zum Login im Browser aufzurufen mit diversen Attributen: /authorize?client_id={0}&response_type=code&scope={1}&redirect_uri={2}

Die Werte erhält man aus der OAuth Konfiguration des jeweiligen Provider. Wichtig ist nur, dass man eine RedirectURI angibt, an die am Ende des Autorisierungsprozesses des Kunden, der Autorosierungscode gesendet wird. Viele Frameworks behelfen sich dabei sogenannter Custome Schemas. In Adroid z.B. ist es ein Name eines Intends. Diese Möglichkeit besitzt leider WP SDK 7.1 noch nicht. Daher muß man sich hier einer „Krücke“ bedienen. Konkret, wir geben eine eigene im Web erreichbare URL an, an die der Code gesendet wird. Wichtig ist, dass die URL einen http Code 200 zurück liefert, damit ein Ereignishandler von WP7 greift.

Wir starten mit einem neuen Projekt in VS Express for WP und  legen ein WebBrowser Element auf eure Seite an und hinterlegt ein Ereignishandler, hier z.B. MyWebBrowser_Navigated“. Dieser wird aufgerufen, wenn erfolgreich (http Code 200) eine Seite aufgerufen werden konnte.:
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:WebBrowser
Name="MyWebBrowser"
Navigated="MyWebBrowser_Navigated"
IsScriptEnabled="True"
DataContext="{Binding}"/>
<ProgressBar
x:Name="MyProgressBar"
IsIndeterminate="True"
Visibility="Collapsed"
VerticalAlignment="Center"
HorizontalAlignment="Stretch" />
</Grid>

Beim Aufrufen der Seite starten wir automatisch mit der Webseite zum OAuth Login:
 
public Login()
{
InitializeComponent();
MyWebBrowser.Navigate(new Uri(<<<deine Login URL>>>));
}

Wenn die Login URL aufgerufen wurde, erscheint im Browser die entsprechende Login Maske und nach Eingabe des Usernamen / Passwordes und ggf einer Grant Access Seite, wo der User den Zugriff erlaubt, wird die zuvor genannte Redirect URI aufgerufen mit dem AccessCode als Paramter. Je nach OAuth Konfiguration, kann auch direkt ein AccessToken gesendet werden.

Nun muß im Ereignesshandler der AccessCode ausgelesen werden. Da jedoch der Handler mehrlmals aufgerufen wird, z.B. Anzeige der Loginmaske ist auch ein erfolgreicher Aufruf, muß expliztiet auf den AccessCode geprüft werden:
       
private void MyWebBrowser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
string code = null;
//Überprüfen, ob die Redirect URI aufgerufen wurde
if (e.Uri.AbsoluteUri.ToLower().StartsWith(redirectURI))
{
//Die Suche nach dem AccessCode beginnt
string text = HttpUtility.HtmlDecode(e.Uri.Query).TrimStart('?');
var pairs = text.Split('&');
foreach (var pair in pairs)
{
var kvp = pair.Split('=');
if (kvp.Length == 2)
{
if (kvp[0] == "code")
{
code = kvp[1];
if (string.IsNullOrEmpty(code))
{
MessageBox.Show("Unable to authenticate","Error", MessageBoxButton.OK);
}
else if (stepin == false)
{
stepin = true;
MyWebBrowser.Visibility = Visibility.Collapsed;
//Nun haben wir Erfolgreich einen Access Code, mit dem wir einen AccessToken bekommen

}
}
}
}
}
}

Nun haben wir in der letzten elseif Anweisung erfolgreich einen AccessCode ausgelesen. Als nächsten Schritt ziehen wir uns den finalen Access Token. Dieser Schritt ist ein standard REST Request, auf den ich jetzt nicht im Detail mehr eingehe.

Warum diese komische stepin Abfrage. Es kann vorkommen, bei mehrmaligen Klick auf Login, dass die Seite auch logischerweise mehrmals aufgerufen wird. Dann passiert es, dass der AccessCode einmal erscheint und kurz darauf erneut und ggf total asyncron mit den Request arbeitet. Es ist kein muß, hat mir aber sehr geholfen und div. Fehlerquellen ausgeschlossen.

About Mr Room

I am Leading Solution Architect, Firefighter, looking for new gadgets, Raspberry Pi, Tinkerforge, ...

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: