Die ppedv.de Website ist schon wieder in die Jahre gekommen. Speziell die mobil Nutzbarkeit lässt zu wünschen übrig. Nun kann man die Website komplett neu programmieren oder man wechselt in einen Migrationsmodus. Quasi live aus Agile- nie fertig immer in Arbeit. Letzterer Weg wurde gewählt und dieser Blog Post beschreibt das Login mit dem Membership Provider für die existierende User Base in Kombination mit einem schicken Bootstrap Popup Fenster.
ASP.NET Web API Service
REST und JSON muss schon sein. In der Tat habe ich im Projekt Verzeichnis auch ASMX und WCF Services gefunden über dessen Zweck ich mir auf anhieb nicht im klaren bin. Also einen Web API Controller erzeugt, im APP_Code Verzeichnis da die Website kein Webprojekt ist. Websites kompilieren jede ASPX Seite einzeln, es gibt also keine große Projekt.dll.
Ich habe mich entschieden das der Service auf einen einfachen Get Request nur eine Statusmeldung schickt und keine Funktion ausführt. Der eigentliche Login wird per HTTP Post durchgeführt. Weiterer Vorteil ist, das der Data Bereich und damit die Login Daten nicht in der URL übertragen werden. Stichwort Logging und Caching.
Also Antwort auf die POST Methode liefert die Web Api einen HTTP Statuscode 204. Für den Fehlerfall habe ich mir 404 not found überlegt um zu zeigen, das der User nicht gefunden wurde. Da beim GET eine 200er Meldung kommt eine vertretbare Lösung. Nach erfolgreicher Prüfung wird ein Cookie gesetzt mit dem der User sich bei jedem neuen Request authentifiziert.
1: Public Class MembershipController
2: Inherits ApiController
3:
4: ' GET api/<controller>
5: Public Function GetValues() As IEnumerable(Of String)
6: Return New String() {"loginservice", "up"}
7: End Function
8: ' POST api/<controller>
9: Public Sub PostValue(<FromBody()> ByVal usr As usr)
10: Dim success As Boolean = Membership.ValidateUser(usr.usr, usr.pwd)
11: If success Then
12: FormsAuthentication.SetAuthCookie(usr.usr, True)
13: Else
14: Throw New HttpResponseException(HttpStatusCode.NotFound)
15:
16: End If
17: End Sub
Bootstrap Modal Dialog
Als nächstes wenden wir uns der UI zu. Boostrap bietet eine modal Popup Komponente, die von oben per Fade Animation eingeblendet wird, wenn der Benutzer den Menüpunkt login auswählt.
Das Passwort Feld habe ich absichtlich als Text definiert, da der Use Case die Eingabe einer Kartennummer erfordert. Die Karte hat der Benutzer ohnehin vor sich liegen und der Komfort ist ohne Sternchen höher. Darüber hinaus kann sich so der Browser den Feldwert merken.
1: <div class="modal fade" id="logindialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
2: <div class="modal-dialog" role="document">
3: <div class="modal-content">
4: <div class="modal-header">
5: <button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
6: <h3 class="modal-title" id="myModalLabel">knowledgemember login</h3>
7: </div>
8: <div class="modal-body">
9: <p>
10: <input id="username" required class="span3" type="email" placeholder="Email">
11: </p>
12: <p>
13: <input id="password" required placeholder="Kartennummer" type="text" class="span3">
14: <input type="checkbox" id="RememberMe" checked="checked" />remember
15: </p>
16: <p>
17: <input id="LoginButton" class="btn btn-primary"
onclick="ajaxlogin($('#username').val(), $('#password').val())"
18: value="Anmelden" />
19: <a href="/Login/PasswordRecovery.aspx">Forgot Password?</a>
20: <div class="text-danger">
21: <div id="ErrorText"></div>
22: </div>
23: </p>
24: </div>
25: <div class="modal-footer">
26: Neu auf ppedv.de?
27: <a href="/Login/Registrierung.aspx" class="btn btn-primary">Register</a>
28: </div>
29: </div>
30: </div>
31: </div>
Um das Popup aus dem Menü zu aktivieren, benötigt man ein HTML Element wie Button oder Hyperlink mit dem Data_toogle Attribut und der ID des Popup DIV Elements ala<a data-toggle="modal" href="#logindialog">.
Javascript Jquery AJAX Callback
Ganz kurz stand die Überlegung im Raum AngularJS zu verwenden. Aber das Projektziel wiederspricht dem. Da jQuery für Bootstrap ohnehin essentiell ist, wird auch dieses JavaScript Framework verwendet um den Callback mit den Logindaten auszuführen und die Rückgabe der Statuscodes auszuwerten.
Der Refresh der Website bewirkt das in der Menüzeile dann der Name des angemeldeten Benutzers erscheint. Nicht die schönste Lösung aber einfach.
1: function ajaxlogin(usr, pwd) {
2: var x = new Object;
3: x.usr = usr.replace(/\s/g, '');
4: x.pwd = pwd.replace(/\s/g, '');
5: var j = JSON.stringify(x);
6: $.ajax(
7: {
8: url: "/api/membership",
9: type: "POST",
10: contentType: "application/json",
11: data: j,
12: dataType: 'json',
13: statusCode: {
14: 204: function (response) {
15: location.reload();
16: },
17: 404: function (response) {
18:
19: $('#ErrorText').text('Login daten falsch');
20: }},
21: error: function (xhr, status, error) {
22: $('#ErrorText').text('unbekannter Fehler');
23: } });
24: };
Kurzer Sicherheitshinweis. Login Daten müssen eigentlich immer per https übergeben werden. In diesem Fall sind die dahinter liegenden Daten keine persönlichen, sondern nur die Schulungs Unterlagen zum besuchten Kurs, so das für den Umstellungszeitraum auch http als Protokoll möglich ist.