Adicionando o sistema de login Persona para seu site leva apenas cinco passos:
- Incluir a Persona biblioteca JavaScript em suas páginas.
- Adicionar "login" e "logout" botões.
- Preste atenção para ações login e logout.
- Verificar as credenciais do usuário.
- 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 = '[email protected]';
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": "[email protected]",
"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.