Hämta ett InfoCard med Javascript
Jag har tidigare visat hur vi med Windows CardSpace kan posta ett InfoCard till servern i form av XML. Men säg att vi istället vill sköta allt på klienten då vi kanske vill kunna logga in användaren med ett asynkront anrop eller direkt på sidan kunna visa information. Då är det enklast att sköta det direkt med Javascript.
För att trigga Windows CardSpace så räcker det med att vi hämtar value-propertyn i objekt-elementet med javascript. Det kommer sedan att innehålla XML:en från det InfoCard som har skickats in. Det vi kommer att göra nu är helt enkelt att visa det i en textarea, men det skulle som sagt kunna skickas in till någon annan sida asynkront. För mer information om det läs mitt inlägg om Ajax med jQuery.
Det första vi gör är att skapa sidan som skall innehålla informationen:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head runat="server">
4: <title>jQuery Demo - Windows CardSpace</title>
5: <script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
6: <script src="scripts/cardspace.js" type="text/javascript"></script>
7: </head>
8: <body>
9: <form action="CardSpace.aspx">
10: <object type="application/x-informationcard" id="infocard">
11: <param name="tokenType" value="urn:oasis:names:tc:SAML:1.0:assertion" />
12: <param name="requiredClaims"
13: value="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname"
14: />
15: </object>
16: <div>
17: <textarea id="token" cols="100" rows="20"></textarea>
18: </div>
19: <div>
20: <button id="infoButton">Hämta värde</button>
21: </div>
22: </form>
23: </body>
24: </html>
De värden vi hämtar med CardSpace är förnamn och efternamn. De skall när användaren klickar på knappen med id:t “infoButton” skickas till textarean med id:t “token”.
Som jag nämnde räcker det med att hämta value-propertyn för att öppna card selectorn.
1: $(document).ready(function() { Initialize(); });
2:
3: function Initialize() {
4: $('#infoButton').click(function(e) { GetInfoCard(e); });
5: }
6:
7: function GetInfoCard(e) {
8: var xmltkn = document.getElementById("infocard");
9: var wcslabel = document.getElementById("token");
10: wcslabel.value = xmltkn.value;
11: }
Det som händer när användaren klickar på knappen är att card selectorn visas:
Efter att vi nu har klickat på send, så skickas XML:en till sidan och visar upp den:
Det är alltså möjligt att med bara ett par rader kod skicka in ett InfoCard till klienten med javascript. Med ett par rader extra skulle vi kunna skicka in det asynkront och sedan logga in användaren.