Mozilla Persona Test

HTML

<script src="https://login.persona.org/include.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
              
              <ul class="nav pull-right">
                  <li class="active" id="persona-login">
                      <a href="#">
                          <img src="https://developer.mozilla.org/files/3965/persona_sign_in_red.png">
                      </a>
                  </li>
                  <li class="active"  id="persona-logout">
                      <a href="#">
                          <img src="http://f.cl.ly/items/2i0o3J3j3m1a012t0x0h/persona_sign_out_black.png">
                      </a>
                  </li>
              </ul>
            
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="hero-unit">
        <p>
            <img src="http://people.mozilla.org/~smartell/persona/assets/persona-logo-wordmark.png" width="400" align="left">
            <h1>Let's try Persona</h1></p>
          <p><br/></p>
          <p>
          "Mozilla Persona makes it easy to sign into sites across the Web with a single email of your choice and enables you to decide what information you want to share and what you'd prefer to keep private. It's part of our mission to keep you...

CSS

body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
.hero-unit img{padding-right:50px; padding-top:30px;}
textarea, input, iframe{
    width:100%;
}
#persona-logout{ display:none;}
.bs-docs-example {
    position: relative;
    margin: 15px 0;
    padding: 19px 19px 14px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.bs-docs-example::after {
    content: "Debug";
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: whiteSmoke;
    border: 1px solid #DDD;
    color: #9DA0A4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

JavaScript

$(function() {
    $('#dump-navigator-id').click(function() {
        console.log(navigator.id);
    });
    $('#persona-logout').click(function() {
        navigator.id.logout();
    });
    $('#persona-login').click(function() {
        navigator.id.request({
            siteName:"Let's try Persona"
            //, siteLogo:"/img/logo.png" // only with https
        });
    });

    // setup watch function
    var endpoint = 'https://verifier.login.persona.org/verify';
    var currentUser = null;
    navigator.id.watch({
        loggedInUser: currentUser,
        onlogin: function(assertion) {
            // A user has logged in! Here you need to:
            // 1. Send the assertion to your backend for verification and to create a session.
            $('#debug').text( 'Login\n\n'+JSON.stringify(navigator.id) );
            $('#assertion').text(assertion);
            $('#audience').val(document.location.protocol + "//" + document.location.host + ":80");
            $('form').submit();
            // 2. Update your UI.
            $('#persona-login').hide();
            $('#persona-logout').show();
        },
        onlogout: function() {
            // A user has logged out! Here you need to:
            // Tear down the user's session by redirecting / making a call to your backend.
            // Also, make that loggedInUser will get set to null on the next page load.
            // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
            currentUser = null;
            $('#debug').text( 'Logout\n\n'+JSON.stringify(navigator.id) );
            $('#persona-login').show();
            $('#persona-logout').hide();
        }
    });

});