Configuração Rápida

Carregar a biblioteca do BrowserID

Inclua a biblioteca do BrowserID no seu site a partir de https://browserid.org/include.js, certifique-se que ela carregue antes de chamar qualquer função navigator.id.

Por exemplo:

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

A biblioteca é projetada para ser neutra aos navegadores e funciona bem com o último Opera, Firefox, Chrome, Safari e Internet Explorer 8+ (amazenamento local - local storage - e postMessage são recursos detectados). No Internet Explorer 6 e 7, o script include.js não funcionará, mas ele foi feito de uma forma que a segurança do BrowserID para o Internet Explorer 6 e 7 é preservada (não é possível nenhum vazamento declaração ou endereço de email).

Peça ao usuário para se autenticar

Adicione um botão de login na sua página. Mesmo sendo completamente opcional, você pode usar um dos seguintes botões do BrowserID:

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

Por exemplo:

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

Quando o usuário clicar no botão de login, chame a função navigator.id.get(), passando uma função de retorno:

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

Em caso de sucesso, o retorno será a declaração (assertion): essa é uma string contendo um pedido verificado que o usuário possui um endereço de email particular.

Verifique a declaração

Você precisará enviar essa declaração para o servidor para verificá-la, por exemplo usando uma requisição AJAX.

function gotAssertion(assertion) {
  // recebeu uma declaração, agora enviar para o servidor para verificação
  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();
  }
}

Nesse exemplo temos um serviço rodando em /api/login que recebe e verifica as declarações. Se o serviço verificar a declaração com sucesso podemos atualizar a Interface do Usuário (UI) chamando a função loggedIn(), ou então podemos manusear a falha no login.

Nota: É importante que a declaração seja verificada no servidor e não no navegador.

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

A maneira mais fácil de fazer isso é usar um serviço de verificação grátis provido pelo BrowserID. Envie uma requisição POST para https://browserid.org/verify com dois parâmetros:

  • assertion: a declaração codificadathe encoded assertion
  • audience: o hostname e porta opcional do seu site. Isso dificulta que uma declaração criada por outro site ganhe acesso no seu. Você deve especificar a audiência explicitamente e não confiar em um parâmetro enviado pelo navegador do usuário, como o document.location. O serviço irá verificar se a audiência que você especificou combina com o nome do domínio incluído na declaração.
Note: Essa chamada era um GET. A partir de 13 de outubro de 2011 ela deverá ser um POST.

O serviço verificará que a declaração foi feita para o seu site e é válida. Ela responde com uma estrutura JSON contendo o conteúdo da declaração e o código do status.

Suponha que você tenha uma declaração que peça ao endereço https://mysite.com aceitar o email lloyd@example.com.

Você pode enviá-lo para https://browserid.org/verify:

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

Essa é a resposta:

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

Você só precisa de verificar se o status é "okay", e se for, o usuário pode fazer o login. Você pode criar uma sessão para ele e definir um cookie no navegador para identificar a sessão.

Um exemplo da implementação do /api/login em PHP:.

$url = 'https://browserid.org/verify';
$data = http_build_query(array('assertion' => $_POST['assertion'], 'audience' => urlencode('mysite.com')));

$params = array(
    'http' => array(
        'method' => 'POST',
        'content' => $data,
        'header'=> "Content-type: application/x-www-form-urlencoded\r\n"
            . "Content-Length: " . strlen($data) . "\r\n"
    )
);
    
$ctx = stream_context_create($params);
$fp = fopen($url, 'rb', false, $ctx);

if ($fp) {
  $result = stream_get_contents($fp);
}
else {
  $result = FALSE;
}

$json = json_decode($result);

if ($json->status == 'okay') {
  // the user logged in successfully.
}
else {
  // log in failed.
}

echo $result;

Implementação do logout

Você pode implementar o logout simplesmente removendo o cookie de sessão do usuário. Se você implementou o suporte para persistent login, então você também precisará chamar navigator.id.logout().

Dependendo de quanto tempo tem desde que o usuário fez o login no provedor de identidade dele, o usuário ainda pode ter um certificado válido: se esse for o caso, então quando o usuário voltar a fazer o login, não será perguntado a eles pela senha do BrowserID. Mas será perguntado um endereço de email para usar e confirmar que eles querem entrar.

Document Tags and Contributors

Contributors to this page: eduardodx
Última atualização por: eduardodx,