Comparar revisiones

Configuración rápida

Revisión 265717:

Revisión 265717 de StripTM el

Revisión 23598:

Revisión 23598 de StripTM el

Título:
Configuración rápida
Configuración rápida
Enlace amigable (slug):
BrowserID/Configuración_rápida
BrowserID/Configuración_rápida
Contenido:

Revisión 265717
Revisión 23598
t7    <h2 id="Cargar_la_biblioteca_BrowserID">t
8      Cargar la biblioteca BrowserID
9    </h2>
10    <p>
11      Hay que incluir en tu sitio web la biblioteca BrowserID que
> se encuentra en <a class="link-https" href="https://browserid.or 
>g/include.js">https://browserid.org/include.js</a> asegurándonos  
>de que se carga antes de llamar a cualquier función <a href="/en/ 
>BrowserID/navigator.id" title="navigator.id"><code>navigator.id</ 
>code></a> . 
12    </p>
13    <p>
14      Por ejemplo:
15    </p>
16    <pre class="deki-transform">
17&lt;script src="https://browserid.org/include.js" type="text/java
>script"&gt;&lt;/script&gt; 
18</pre>
19    <p>
20      La biblioteca está diseñada para ser neutral al navegador y
> funciona bien en todos los navegadores modernos. 
21    </p>
22    <h2 id="Pedir_al_usuario_que_se_autentifique">
23      Pedir al usuario que se autentifique
24    </h2>
25    <p>
26      Agrega un botón sign-in a tu pagina. Aunque es completament
>e opcional, es posible que desees utilizar uno de los siguientes  
>botones de BrowserID: 
27    </p>
28    <p>
29      <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 bu 
>tton" src="https://browserid.org/i/sign_in_orange.png"> <img alt= 
>"A green sign in button" src="https://browserid.org/i/sign_in_gre 
>en.png"> <img alt="A grey sign in button" src="https://browserid. 
>org/i/sign_in_grey.png" style=""> 
30    </p>
31    <p>
32      Por ejemplo:
33    </p>
34    <pre class="deki-transform">
35&lt;a href="#" id="browserid" title="Sign-in with BrowserID"&gt;
36  &lt;img src="/images/sign_in_blue.png" alt="Sign in"&gt;
37&lt;/a&gt;
38</pre>
39    <p>
40      Cuando el usuario hace clic en el botón sign-in (conectar),
> llama la función <a href="/en/DOM/navigator.id.get" title="navig 
>ator.id.get"><code>navigator.id.get()</code></a>, pasando una fun 
>ción a la que devuelve la llamada: 
41    </p>
42    <pre class="deki-transform">
43$(function() {
44  $('#browserid').click(function() {
45    navigator.id.get(gotAssertion);
46    return false;
47  });
48});
49</pre>
50    <p>
51      En caso de éxito, la devolución de la llamada se realizará 
>pasada la aserción: esto es una cadena que contiene una reclamaci 
>ón firmada de que el usuario posee una dirección de correo electr 
>ónico en particular. 
52    </p>
53    <h2 id="Comprobar_la_aserci.C3.B3n">
54      Comprobar la aserción
55    </h2>
56    <p>
57      Tendrás que enviar esta aserción para que tu servidor la co
>mpruebe, por ejemplo, mediante el uso de una petición AJAX. En es 
>te ejemplo tenemos un servicio que se ejecuta en <code>/api/login 
></code> que recibe y comprueba las aserciones. Si este servicio c 
>omprueba con éxito la aserción, actualizamos la interfaz de usuar 
>io llamando a <code>loggedIn()</code>, de lo contrario, controlam 
>os los errores de inicio de sesión: 
58    </p>
59    <pre class="deki-transform">
60function gotAssertion(assertion) {
61  // got an assertion, now send it up to the server for verificat
>ion 
62  if (assertion !== null) {
63    $.ajax({
64      type: 'POST',
65      url: '/api/login',
66      data: { assertion: assertion },
67      success: function(res, status, xhr) {
68        if (res === null) {}//loggedOut();
69          else loggedIn(res);
70        },
71      error: function(res, status, xhr) {
72        alert("login failure" + res);
73      }
74    });
75  } else {
76    //loggedOut();
77  }
78}
79</pre>
80    <div class="note">
81      <strong>Nota:</strong> es importante que la aserción se com
>pruebe en el servidor y no en el navegador. 
82    </div>
83    <p>
84      En el servidor, debes comprobar la aserción y extraer de el
>la la dirección de correo del usuario. La forma más sencilla de h 
>acerlo es utilizar el servicio de verificación gratuito proporcio 
>nado por BrowserID. Envia una solicitud POST a&nbsp;&nbsp; <span  
>class="nowiki"><code>https://browserid.org/verify</code></span> c 
>on dos parámetros: 
85    </p>
86    <ul>
87      <li>
88        <code>assertion</code>: la aserción codificada
89      </li>
90      <li>
91        <code>audience</code>: el nombre del host y&nbsp; puerto 
>opcional opcional de su sitio. Esto hace más difícil que una afir 
>mación generada para un sitio ajeno se utilice para acceder a la  
>tuya. Se debe especificar de forma explícita <code>audience</code 
>> (audiencia) y no confiar en un parámetro enviado por el navegad 
>or del usuario, como document.location. El servicio de verificaci 
>ón comprobará que la audiencia que especificas coincide con el no 
>mbre de dominio incluido en la aserción. 
92      </li>
93    </ul>
94    <p>
95      <strong>Nota:</strong> esta llamada era un <code>GET</code>
>, pero a partir del 13 de octure de 2011 debe ser un <code>POST</ 
>code>. 
96    </p>
97    <p>
98      El verificador comprobará que la aserción es para tu sitio 
>y que es válida. Responde con una estructura JSON que contiene lo 
>s contenidos y el código de estado de la aserción. 
99    </p>
100    <p>
101      Supón que tienes una aserción que pide a&nbsp; <span class=
>"nowiki"><code>https://mysite.com</code></span> que acepte la dir 
>ección de correo <span class="nowiki"><code>lloyd@example.com</co 
>de></span>. 
102    </p>
103    <p>
104      Puedes enviarla a <span class="nowiki"><code>https://browse
>rid.org/verify</code></span>: 
105    </p>
106    <pre>
107<code>$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https:/
>/mysite.com" "https://browserid.org/verify" 
108</code>
109</pre>
110    <p>
111      Aquí está la respuesta:
112    </p>
113    <pre>
114{
115    "status": "okay",
116    "email": "lloyd@example.com",
117    "audience": "https://mysite.com",
118    "expires": 1308859352261,
119    "issuer": "browserid.org"
120}
121</pre>
122    <p>
123      Simplemente tienes que comprobar que el estado es correcto 
>y, si lo es, el usuario puede conectarse al sitio. Puedes crear u 
>na sesión para él y colocar una cookie en su navegador para ident 
>ificar la sesión. 
124    </p>
125    <h2 id="Implementa_el_cierre_de_sesi.C3.B3n">
126      Implementa el cierre de sesión
127    </h2>
128    <p>
129      Puedes implementar el cierre de sesión simplemente eliminan
>do la cookie de la sesión de usuario.&nbsp; Si has implementado l 
>a compatibilidad para <a href="/en/BrowserID/Advanced_Features" t 
>itle="Advanced Features">inicio de sesión persistente</a>, entonc 
>es solo tendrás que llamar a {{ domxref("navigator.id.logout()")  
>}}. 
130    </p>
131    <p>
132      En función del tiempo que haya trascurrido desde que el usu
>ario inició sesión/ingresó con su proveedor de identidad, el usua 
>rio dispondrá aún de un certificado de usuario válido: si es así, 
> entonces cuando el usuario inicie sesión/ingrese de nuevo, no se 
> le solicitará de nuevo la contraseña para BrowserID. Sin embargo 
> se le pedirá que seleccione la dirección de correo que va a usar 
> y que confirme que desea iniciar sesión/ingresar. 
133    </p>
134    <p>
135      {{ languages( { "en": "en/BrowserID/Quick_Setup", "es": "es
>/BrowserID/Configuración_rápida" } ) }} 
136    </p>

Volver al historial