Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Quick Setup

Adicionando o sistema de login Persona para seu site leva apenas cinco passos:

  1. Incluir a Persona biblioteca JavaScript em suas páginas.
  2. Adicionar "login" e "logout" botões.
  3. Preste atenção para ações login e logout.
  4. Verificar as credenciais do usuário.
  5. Reveja as melhores práticas.

Você deve ser capaz de se levantar e correr em uma única tarde, mas as primeiras coisas primeiro: Se você estiver indo para usar Persona em seu site, por favor, tome um momento e se inscrever na lista de discussão Persona avisos. É o tráfego extremamente baixo, sendo usado apenas para anunciar mudanças ou problemas de segurança que podem afetar negativamente o seu site.
Passo 1: Incluir a biblioteca Persona

Persona é projetado para ser navegador neutro e funciona bem em todos os desktops principal e navegadores móveis. Isto é possível graças à plataforma cruzada biblioteca JavaScript Persona. Uma vez que esta biblioteca é carregada na sua página, as funções que você precisa Persona (assistir (), request () , e logout () ) estará disponível no objeto global navigator.id.

Para incluir o Persona biblioteca JavaScript, você pode colocar essa tag script na cabeça da sua página:

<script src="https://login.persona.org/include.js"> </ script>

Você deve incluir isso em cada página que usa navigator.id funções. Porque Persona ainda está em desenvolvimento, não se deve auto-hospedar o arquivo include.js.
Passo 2: Adicione login e logout botões

Porque Persona é concebido como uma API DOM, você deve chamar funções quando um usuário clica em um botão de entrar e sair em seu site. Para abrir o diálogo Persona e solicitar ao usuário fazer o login, você deve invocar navigator.id.request (). Para sair, chamar navigator.id.logout ().

Por exemplo:

var signinLink = document.getElementById ('signin');
if (signinLink) {
  signinLink.onclick = function () {navigator.id.request ();};
};

var signoutLink = document.getElementById ('signout');
if (signoutLink) {
  signoutLink.onclick = function () {navigator.id.logout ();};
};

O que deve aqueles botões parecem? Vá para a página de Recursos de Branding para imagens premade e baseados em CSS botões!
Passo 3: Preste atenção para ações login e logout

Para Persona para funcionar, você precisa dizer a ele o que fazer quando um usuário faz dentro ou fora. Isso é feito chamando a função navigator.id.watch () e fornecer três parâmetros:

    
O loggedInEmail do usuário atual do seu site, ou nulo se nenhum. Você deve gerar este dinamicamente quando você renderizar uma página.

    
A função para chamar quando uma ação OnLogin é acionado. Esta função é passado um único parâmetro, uma "declaração de identidade", a qual deve ser verificada.

    
A função para chamar quando uma ação OnLogout é acionado. Esta função não é passado nenhum parâmetro.

Nota: Você deve sempre incluir tanto OnLogin e OnLogout quando você chamar navigator.id.watch ().

Por exemplo, se você atualmente acho que Bob é registrada em seu site, você pode fazer isso:

var currentUser = 'bob@example.com';

navigator.id.watch ({
  loggedInEmail: currentUser,
  OnLogin: function (afirmação) {
    // Um usuário conectado!
    // 1. Enviar a afirmação de sua infra-estrutura para verificação e para criar uma sessão.
    // 2. Atualize seu UI.
    $.ajax({
      Tipo: 'POST',
      url: '/ auth / login', // ​​Esta é uma URL em seu site.
      data: {'status': true},
      success: function (res, status, xhr) {window.location.reload ();},
      error: function(res, status, xhr) {alert ("falha de login" + res);}
    });
  }
  OnLogout: function () {
    // Um usuário logado para fora! Aqui você precisa:
    // Derrubem a sessão do usuário, redirecionando o usuário ou fazer uma chamada para o backend.
    $.ajax({
      type: 'POST',
      url: 'auth / / logout', / / ​​Esta é uma URL em seu site.
      success: function(res, status, xhr) {window.location.reload ();},
      erro: function(res, status, xhr) {alert ("logout fracasso" + res);}
    });
  }
});

Neste exemplo, tanto OnLogin e OnLogout são implementadas, fazendo uma solicitação POST assíncrona para backend do seu site. O back-end em seguida, registra o usuário dentro ou fora, geralmente através da criação ou exclusão de informações em um cookie de sessão. Então, se tudo controlos fora, recarrega a página para ter em conta o estado novo login.

Você pode, é claro, usar AJAX para implementar esta sem recarregar ou redirecionar, mas isso está além do escopo deste tutorial.

Você deve chamar esta função em cada página com um botão de entrar e sair. Para apoiar melhorias Persona como login automático e sair mundial para seus usuários, você deve chamar esta função em cada página do seu site.
Passo 4: Verifique as credenciais do usuário

Em vez de senhas, Persona usa "asserções de identidade", que são tipo como de uso único de um único site senhas combinado com o endereço de e-mail do usuário. Quando um usuário deseja fazer o login, o retorno de chamada OnLogin será invocado com uma afirmação do que o usuário. Antes que você possa acessá-los, você deve verificar se a afirmação é válida.

É extremamente importante que você verifique a afirmação em seu servidor, e não em JavaScript executado no navegador do usuário, uma vez que seria fácil de falsificar. O exemplo acima entregue a afirmação de backend do site usando jQuery $. Ajax () auxiliar para postá-lo para api / / login.

Uma vez que o servidor tem uma afirmação, como você verificar isso? A maneira mais fácil é usar um serviço de ajuda fornecida pela Mozilla. Simplesmente postar a afirmação de https://verifier.login.persona.org/verify com dois parâmetros:

    
afirmação: A afirmação de identidade fornecida pelo usuário.
    
platéia: O nome do host ea porta do seu site. Você deve codificar este valor em seu backend, não derivá-lo de todos os dados fornecidos pelo usuário.

Por exemplo, se você é example.com, você pode utilizar a linha de comando para testar uma afirmação com:

$ Curl-d "afirmação = <ASSERTION> público = & https://example.com:443" "https://verifier.login.persona.org/verify"

Se for válido, você vai ter uma resposta JSON assim:

{
  "status": "okay",
  "email": "bob@eyedee.me",
  "audience": "https://example.com:443",
  "expires": 1308859352261,
  "issuer": "eyedee.me"
}

Você pode saber mais sobre o serviço de verificação lendo a API do serviço de verificação. Um exemplo de implementação api / / login, usando o Python, o framework web Flask, e os pedidos HTTP biblioteca pode ter este aspecto:

@ App.route ('/ api / login ", métodos = [' Post '])
def login ():
    
# O pedido tem que ter uma afirmação para nós verificar
    
se "afirmação" não request.form:
        
abort (400)

    
# Enviar a afirmação ao serviço da Mozilla verificador.
    
dados = {'afirmação': request.form ['afirmação'], 'audiência': 'https://example.com:443'}
    
resp = requests.post ('https://verifier.login.persona.org/verify', data = dados)

    
# Será que o verificador responder?
    
se resp.ok:
        
# Analise a resposta
        
verification_data = json.loads (resp.content)

        
# Verifique se a afirmação era válida
        
se verification_data ['status'] == 'ok':
            
# Registra o usuário em definindo um cookie de sessão seguro
            
Session.update ({'email': verification_data ['email']})
            
voltar resp.content

    
# Ops, algo falhou. Abortar.
    
abort (500)

O gerenciamento de sessão é provavelmente muito semelhante ao seu sistema de login existente. A primeira grande mudança é em verificar a identidade do usuário, verificando uma afirmação em vez de verificar uma senha. A outra grande mudança é garantir que o endereço de e-mail do usuário está disponível para uso como parâmetro loggedInEmail para navigator.id.watch ().

Sair é simples: você só precisa remover cookies de sessão do usuário.
Passo 5: Examinar as melhores práticas

Uma vez que tudo funciona e você conseguiu logado para dentro e fora do seu site, você deve tomar um momento para rever as melhores práticas para a utilização de Persona de forma segura.

Se você está fazendo um site pronto para produção, você pode querer escrever testes de integração que simulam registro de um usuário dentro e fora do seu site usando BrowserID. Para facilitar esta ação em selênio, considere usar a biblioteca bidpom. Os sites mockmyid.com e personatestuser.org também pode ser útil.

Por último, não se esqueça de se inscrever para a lista de discussão Persona avisos assim que você está notificado de quaisquer questões de segurança ou mudanças para trás incompatíveis para o API Persona. A lista é de tráfego extremamente baixo: é só usado para anunciar mudanças que podem afetar negativamente o seu site.

Etiquetas do documento e colaboradores

 Colaboradores desta página: teoli, rodrigowaters, marques, feccruz7
 Última atualização por: teoli,