index.html 3.35 KB
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>WAMP Challenge Response Authentication</title>

      <!-- include AutobahnJS .. that's all you need -->
      <script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>

      <!-- optionally, you can use AutobahnJS with jQuery Deferreds ..
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      -->

      <script>

         var session = null;

         window.onload = function() {

            // use jQuery Deferreds instead of the AutobahnJS included when.js Deferreds
            //ab._Deferred = jQuery.Deferred;

            connect();
         };

         // connect to Autobahn.ws
         function connect() {

            var wsuri = "ws://localhost:9000";

            ab.connect(wsuri,

               function (sess) {
                  session = sess;
                  ab.log("connected to " + wsuri);

                  //onConnect0();
                  onConnect1();
                  //onConnect2();
               },

               function (code, reason, detail) {

                  session = null;
                  switch (code) {
                     case ab.CONNECTION_UNSUPPORTED:
                        window.location = "http://autobahn.ws/unsupportedbrowser";
                        break;
                     case ab.CONNECTION_CLOSED:
                        window.location.reload();
                        break;
                     default:
                        ab.log(code, reason, detail);
                        break;
                  }
               },

               {'maxRetries': 60, 'retryDelay': 2000}
            );
         }

         // authenticate as "anonymous"
         //
         function onConnect0() {
            session.authreq().then(function () {
               session.auth().then(onAuth, ab.log);
            }, ab.log);
         }

         // authenticate as "foobar"
         //
         function onConnect1() {
            session.authreq("foobar").then(function (challenge) {

               // direct sign or AJAX to 3rd party
               var signature = session.authsign(challenge, "secret");

               session.auth(signature).then(onAuth, ab.log);
            }, ab.log);
         }

         // authenticate as "foobar", providing extra data
         //
         function onConnect2() {

            var extra = {user: 'otto', role: 'author', age: 24};
            session.authreq("foobar", extra).then(function (challenge) {

               // direct sign or AJAX to 3rd party
               var signature = session.authsign(challenge, "secret");

               session.auth(signature).then(onAuth, ab.log);
            }, ab.log);
         }

         var myTopic = "http://example.com/topics/mytopic1";

         function onAuth(permissions) {
            ab.log("authenticated!", JSON.stringify(permissions));
            session.subscribe(myTopic, onMyEvent);
         };

         function onMyEvent(topic, event) {
            ab.log("MyEvent", topic, event);
         };

         function publishToMyTopic() {
            //ab.log("clicked");
            session.publish(myTopic, "Hello, world!");
         };
      </script>
   </head>
   <body>
      <h1>WAMP Challenge Response Authentication</h1>
      <button onclick="publishToMyTopic();">Publish!</button>
   </body>
</html>