How to authenticate users in FirefoxOS using BrowserID / Persona?

Question

I am trying to write an FirefoxOS app for my portal which uses Mozilla Persona for authentication. How I should proceed if I want to achieve:

• Allow users of my app to signup to my portal using Persona
• Allow users of my app to login to my portal within the FirefoxOS app and perform some actions with the API
• Depends if users is logged or not - giving access to different actions.

I have found this post with info that its integrated already: http://identity.mozilla.com/post/47114516102/persona-on-firefox-os-phones but I can't find any real examples.

What type of application I need to create? webapp or privileged?

I am trying to implement it using regular tutorial: https://developer.mozilla.org/en/Persona/Quick_Setup

But with this code:

  signinLink.onclick = function() { navigator.id.request(); };

I am getting only following error:

[17:25:18.089] Error: Permission denied to access object

Answer 1

One thing is to make sure you're calling watch() to setup callbacks before you call request().

For example, something like this in your page:

<script src="https://login.persona.org/include.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    navigator.id.watch({
      // Provide a hint to Persona: who do you think is logged in?
      loggedInUser: null,

      // Called when persona provides you an identity assertion
      // after a successful request().  You *must* post the assertion
      // to your server for verification.  Never verify assertions
      // in client code.  See Step 3 in this document:
      // https://developer.mozilla.org/en/Persona/Quick_Setup
      onlogin: function(assertion) {
        // do something with assertion ...
        // Note that Persona will also call this function automatically
        // if a previously-signed-in user visits your page again.
      },

      onlogout: function() {
        // handle logout ...
      },

      onready: function() {
        // Your signal that Persona's state- and callback-management
        // business is complete.  Enable signin buttons etc.
      }
    });

    // Set up click handlers for your buttons
    document.getElementById("signin").addEventListener(
      'click', function() {
        navigator.id.request({
          // optional callback to request so you can respond to
          // a user canceling the sign-in flow
          oncancel: function() {  /* do something */ }
        });
      }
    });
  });
</script>

Here's an example that shows this in action:

https://people.mozilla.org/~jparsons/persona_example.html

However, on FirefoxOS, you should be aware that installed apps (not packaged or certified, but generic installed apps) are given a unique origin of the form app://{uuid}, with a different uuid for each device. This is unfortunately useless for sign-in purposes because there's no way for your server to know whether an app requesting sign-in is friend or foe. The way around this problem is to run your persona code in an invisible iframe hosted on your server. Thus the iframe will have the correct origin and your server will know it's your app. The iframe and the app can communicate via postMessage.

In the case of a packaged app (sometimes called a privileged app), your origin will be the origin declared in your webapp manifest. E.g., app://yourapp.yoursite.org. This gives you better assurance that the app is really yours, but the truly paranoid may still wish to deploy the iframe trick.

Hope this helps! j