I will be using the same web hosted Web API service for the sample. The service is very simple:

[Authorize]

public class IdentityController : ApiController

{

    public ViewClaims Get()

    {

        return ViewClaims.GetAll();

    }

}

…and the ViewClaims class simply returns the claims of the current user from a service point of view:

public class ViewClaims : List<ViewClaim>

{

    public static ViewClaims GetAll()

    {

        var principal = ClaimsPrincipal.Current;

        var claims = new List<ViewClaim>(

            from c in principal.Claims

            select new ViewClaim

            {

                Type = c.Type,

                Value = c.Value

            });

        var vc = new ViewClaims();

        vc.AddRange(claims);

        return vc;

    }

}

 

In addition there are two built-in “clients” for the service – an MVC controller that renders the client’s identity server-side:

[Authorize]

public ActionResult IdentityMvc()

{

    return View(ViewClaims.GetAll());

}

…and the corresponding view:

@model Thinktecture.Samples.ViewClaims

@{

    ViewBag.Title = "Client identity";

}

@section featured {

    <section class="featured">

        <div class="content-wrapper">

            <hgroup class="title">

                <h1>Client identity.</h1>

            </hgroup>

        </div>

    </section>

}

<br />

<table>

    @foreach (var claim in Model)

    {

        <tr>

            <td>

                <strong>@claim.Type</strong>

            </td>

            <td>

                <span>@claim.Value</span>

            </td>

        </tr>

    }

</table>

 

As well as as an AJAX style client that uses the Web API service to fetch the data and render the claims on the client:

@{

    ViewBag.Title = "Client identity";

}

@section featured {

    <section class="featured">

        <div class="content-wrapper">

            <hgroup class="title">

                <h1>Client identity.</h1>

            </hgroup>

        </div>

    </section>

}

<br /> 

<table data-bind="foreach: items">

    <tr>

        <td>

            <strong data-bind="text: type"></strong>

        </td>

        <td>

            <span data-bind="text: value"></span>

        </td>

    </tr>

</table>

@section scripts

{

    <script src="~/Scripts/knockout-2.2.0.js"></script>

    <script type="text/javascript">

        $(function () {

            var viewModel = new IdentityViewModel();

            ko.applyBindings(viewModel);

            $.get("../api/identity", function (items) {

                $.each(items, function (idx, item) {

                    viewModel.add(item.Type, item.Value);

                });

            }, "json");

        });

        function IdentityViewModel() {

            var self = this;

            function Claim(root, type, value) {

                var self = this;

                self.type = ko.observable(type);

                self.value = ko.observable(value);

            };

            self.items = ko.observableArray();

            self.add = function (type, value) {

                self.items.push(new Claim(self, type, value));

            };

        };

    </script>

}

The output of both pages is identical (as expected):

The name claim comes from standard Forms Authentication and the localClaim from claims transformation:

public class ClaimsTransformer : ClaimsAuthenticationManager

{

    public override ClaimsPrincipal Authenticate(
      string resourceName, ClaimsPrincipal incomingPrincipal)

    {

        if (!incomingPrincipal.Identity.IsAuthenticated)

        {

            return base.Authenticate(resourceName, incomingPrincipal);

        }

 

        incomingPrincipal.Identities.First().AddClaim(

            new Claim(“localClaim”, “someValue”));

 

        return incomingPrincipal;

    }

}

In the following posts we will write some clients against this service and host. stay tuned.
The source code so far can be found here.