mozilla

Revision 265709 of Configuración rápida

  • Enlace amigable (slug) de la revisión: BrowserID/Configuración_rápida
  • Título de la revisión: Configuración rápida
  • Id de la revisión: 265709
  • Creada:
  • Creador: Striptm1
  • ¿Es la revisión actual? No
  • Comentario page created, 646 words added

Contenido de la revisión

Cargando la biblioteca BrowserID

Include the BrowserID library from https://browserid.org/include.js in your site, making sure it gets loaded before calling any navigator.id functions.

For example:

<script src="https://browserid.org/include.js" type="text/javascript"></script>

The library is designed to be browser-neutral and works well on all modern browsers.

Ask the user to authenticate

Add a sign-in button to your web page. While it's completely optional, you might want to use one of the following BrowserID buttons:

A red sign in button A blue sign in button A orange sign in button A green sign in button A grey sign in button

For example:

<a href="#" id="browserid" title="Sign-in with BrowserID">
  <img src="/images/sign_in_blue.png" alt="Sign in">
</a>

When the user clicks the sign-in button, call the navigator.id.get() function, passing in a callback function:

$(function() {
  $('#browserid').click(function() {
    navigator.id.get(gotAssertion);
    return false;
  });
});

On success, the callback will be passed the assertion: this is a string containing a signed claim that the user owns a particular email address.

Verify the assertion

You'll need to send that assertion to your server for verifying, for example by using an AJAX request. In this example we have a service running at /api/login which receives and verifies assertions. If this service successfully verifies the assertion we update the UI by calling loggedIn(), otherwise we handle the login failure:

function gotAssertion(assertion) {
  // got an assertion, now send it up to the server for verification
  if (assertion !== null) {
    $.ajax({
      type: 'POST',
      url: '/api/login',
      data: { assertion: assertion },
      success: function(res, status, xhr) {
        if (res === null) {}//loggedOut();
          else loggedIn(res);
        },
      error: function(res, status, xhr) {
        alert("login failure" + res);
      }
    });
  } else {
    //loggedOut();
  }
}
Note: It's important that the assertion is verified on the server and not in the browser.

On the server, you must verify the assertion, and extract the user's email address from it.

The easiest way to do this is to use the free verification service provided by BrowserID. Send a POST request to https://browserid.org/verify with two parameters:

  • assertion: the encoded assertion
  • audience: the hostname and optional port of your site. This makes it harder for an assertion generated for someone else's site to be used to gain access to yours. You should specify the audience explicitly and not trust a parameter sent by the user's browser such as document.location. The verification service will check that the audience you specify matches the domain name included in the assertion.
Note: This call used to be a GET. As of October 13th, 2011, it must be a POST.

The verifier will check that the assertion was meant for your site and is valid. It responds with a JSON structure containing the assertion's contents and a status code

Suppose you have an assertion which asks https://mysite.com to accept the email address lloyd@example.com.

You can send it to https://browserid.org/verify:

$ curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"

Here's the response:

{
    "status": "okay",
    "email": "lloyd@example.com",
    "audience": "https://mysite.com",
    "expires": 1308859352261,
    "issuer": "browserid.org"
}

You just need to check that the status is "okay", and if it is, the user can be logged in. You can create a session for them and set a cookie in their browser to identify the session.

Implement logout

You can implement logout by simply removing the user's session cookie. If you have implemented support for persistent login, then you also need to call {{ domxref("navigator.id.logout()") }}.

Depending on how long it's been since the user signed into their identity provider, the user might still have a valid user certificate: if this is the case, then when the user logs back in, they won't be asked for their BrowserID password. But they will still be asked to select an email address to use and to confirm that they want to sign in.

Fuente de la revisión

<h2>Cargando la biblioteca BrowserID</h2>
<p>Include the BrowserID library from <a class="link-https" href="https://browserid.org/include.js">https://browserid.org/include.js</a> in your site, making sure it gets loaded before calling any <a href="/en/BrowserID/navigator.id" title="navigator.id"><code>navigator.id</code></a> functions.</p>
<p>For example:</p>
<pre class="deki-transform">&lt;script src="https://browserid.org/include.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>
<p>The library is designed to be browser-neutral and works well on all modern browsers.</p>
<h2>Ask the user to authenticate</h2>
<p>Add a sign-in button to your web page. While it's completely optional, you might want to use one of the following BrowserID buttons:</p>
<p><img alt="A red sign in button" src="https://browserid.org/i/sign_in_red.png"> <img alt="A blue sign in button" src="https://browserid.org/i/sign_in_blue.png"> <img alt="A orange sign in button" src="https://browserid.org/i/sign_in_orange.png"> <img alt="A green sign in button" src="https://browserid.org/i/sign_in_green.png"> <img alt="A grey sign in button" src="https://browserid.org/i/sign_in_grey.png" style=""></p>
<p>For example:</p>
<pre class="deki-transform">&lt;a href="#" id="browserid" title="Sign-in with BrowserID"&gt;
  &lt;img src="/images/sign_in_blue.png" alt="Sign in"&gt;
&lt;/a&gt;</pre>
<p>When the user clicks the sign-in button, call the <a href="/en/DOM/navigator.id.get" title="navigator.id.get"><code>navigator.id.get()</code></a> function, passing in a callback function:</p>
<pre class="deki-transform">$(function() {
  $('#browserid').click(function() {
    navigator.id.get(gotAssertion);
    return false;
  });
});
</pre>
<p>On success, the callback will be passed the <strong>assertion</strong>: this is a string containing a signed claim that the user owns a particular email address.</p>
<h2>Verify the assertion</h2>
<p>You'll need to send that assertion to your server for verifying, for example by using an AJAX request. In this example we have a service running at <code>/api/login</code> which receives and verifies assertions. If this service successfully verifies the assertion we update the UI by calling <code>loggedIn()</code>, otherwise we handle the login failure:</p>
<pre class="deki-transform">function gotAssertion(assertion) {
  // got an assertion, now send it up to the server for verification
  if (assertion !== null) {
    $.ajax({
      type: 'POST',
      url: '/api/login',
      data: { assertion: assertion },
      success: function(res, status, xhr) {
        if (res === null) {}//loggedOut();
          else loggedIn(res);
        },
      error: function(res, status, xhr) {
        alert("login failure" + res);
      }
    });
  } else {
    //loggedOut();
  }
}</pre>
<div class="note"><strong>Note:</strong> It's important that the assertion is verified on the server and not in the browser.</div>
<p>On the server, you must verify the assertion, and extract the user's email address from it.</p>
<p>The easiest way to do this is to use the free verification service provided by BrowserID. Send a POST request to <span class="nowiki"><code>https://browserid.org/verify</code></span> with two parameters:</p>
<ul> <li><code>assertion</code>: the encoded assertion</li> <li><code>audience</code>: the hostname and optional port of your site. This makes it harder for an assertion generated for someone else's site to be used to gain access to yours. You should specify the audience explicitly and not trust a parameter sent by the user's browser such as <code>document.location</code>. The verification service will check that the audience you specify matches the domain name included in the assertion.</li>
</ul>
<div class="note"><strong>Note:</strong> This call used to be a <code>GET</code>. As of October 13th, 2011, it must be a <code>POST</code>.</div>
<p>The verifier will check that the assertion was meant for your site and is valid. It responds with a JSON structure containing the assertion's contents and a status code</p>
<p>Suppose you have an assertion which asks <span class="nowiki"><code>https://mysite.com</code></span> to accept the email address <span class="nowiki"><code>lloyd@example.com</code></span>.</p>
<p>You can send it to <span class="nowiki"><code>https://browserid.org/verify</code></span>:</p>
<pre><code>$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://mysite.com" "https://browserid.org/verify"
</code></pre>
<p>Here's the response:</p>
<pre>{
    "status": "okay",
    "email": "lloyd@example.com",
    "audience": "https://mysite.com",
    "expires": 1308859352261,
    "issuer": "browserid.org"
}
</pre>
<p>You just need to check that the status is "okay", and if it is, the user can be logged in. You can create a session for them and set a cookie in their browser to identify the session.</p>
<h2>Implement logout</h2>
<p>You can implement logout by simply removing the user's session cookie. If you have implemented support for <a href="/en/BrowserID/Advanced_Features" title="Advanced Features">persistent login</a>, then you also need to call {{ domxref("navigator.id.logout()") }}.</p>
<p>Depending on how long it's been since the user signed into their identity provider, the user might still have a valid user certificate: if this is the case, then when the user logs back in, they won't be asked for their BrowserID password. But they will still be asked to select an email address to use and to confirm that they want to sign in.</p>
Revertir a esta revisión