view example/persona.html @ 47:f2474ffcee96

avoid namespace collisions; buckle your safety-belt
author Jeff Hammel <jhammel@mozilla.com>
date Mon, 30 Dec 2013 10:12:25 -0800
parents 54a53bbe5be9
children d66d6c10cfe4
line wrap: on
line source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>bistyauth Mozilla persona test page</title>

<!-- Suppressing Compatability Mode for IE
https://developer.mozilla.org/en-US/Persona/Quick_Setup?redirectlocale=en-US&redirectslug=Persona%2FQuick_Setup#Suppressing_Compatibility_Mode -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://login.persona.org/include.js"></script>
<script>
var nclicks = 0;

$(document).ready(function() {

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.
    // 2. Update your UI.
    $.ajax({type: 'POST',
            url: '/auth/login', // This is a URL on your website.
            data: {assertion: assertion},
            success: function(res, status, xhr) { window.location.reload(); },
            error: function(xhr, status, err) {
                       navigator.id.logout();
                       alert("Login failure: " + err);
       }
    });
  },
  onlogout: function() {
    // A user has logged out! Here you need to:
    // Tear down the user's session by redirecting the user or making a call to your backend.
    // Also, make sure loggedInUser will get set to null on the next page load.
    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
    //    $.ajax({
    //  type: 'POST',
    //  url: '/auth/logout', // This is a URL on your website.
    //  success: function(res, status, xhr) { window.location.reload(); },
    //  error: function(xhr, status, err) { alert("Logout failure: " + err); }
    // });
  }
});


var signinLink = document.getElementById('signin');
if (signinLink) {
signinLink.onclick = function() {
navigator.id.request();
nclicks += 1;
$('#clickcounter').append('<li>This is click ' + nclicks + '</li>');
};
}

var signoutLink = document.getElementById('signout');
if (signoutLink) {
signoutLink.onclick = function() { navigator.id.logout(); };
}
});
</script>
</head>

<body>
<h1>
<a href="https://login.persona.org/">Mozilla persona</a>
<a href="http://k0s.org/hg/bitsyauth/">bitsyauth</a>
test page
</h1>

<div>
  <a id="signin">sign in</a>
</div>

<ul id="clickcounter">
</ul>

<h2>Resources</h2>
<ul>
  <li>
  <a href="https://developer.mozilla.org/en-US/Persona/branding">
  branding
  </a>:
  buttons and what not
  </li>
</ul>

</body>
</html>