Biblioteca Dash | Como criar uma página de login com Dash Library

Este artigo foi publicado como parte do Data Science Blogathon.

Introdução

uth, e sabem que este método é um método de início de sessãoo "Sessão" É um conceito-chave no campo da psicologia e da terapia. Refere-se a uma reunião agendada entre um terapeuta e um cliente, onde os pensamentos são explorados, Emoções e comportamentos. Essas sessões podem variar em duração e frequência, e seu principal objetivo é facilitar o crescimento pessoal e a resolução de problemas. A eficácia das sessões depende da relação entre o terapeuta e o terapeuta.. emergente. Mas, E se eu quiser uma página de login como a que temos em HTML, JavaScript, PHP, etc.? Aqui está a resposta para sua pergunta.

Então, Eu criei um aplicativo de painel para autenticação do usuário usando dash-auth. Eu queria fazer operações de teste para o mesmo. Mas como era uma janela pop-up, eu não consegui pegar o id, os nomes das classes ou qualquer informação relacionada que possa ser usada para testar o módulo de login.

O que mais, Tentei aplicar alguns métodos que foram fornecidos em um artigo, mas ainda nada. Mesmo depois de pesquisar na internet por horas, não houve uma resposta significativa à minha pergunta. Foi quando eu soube que precisava encontrar uma maneira de contornar esse problema.. Você sabia sobre dcc.Link () e pensei em usá-lo para criar a página de login.

Este blog contém a solução sobre como criar uma página de login real que é como uma página HTML e onde você pode pular de uma página para outra usando links.

Importação de bibliotecas:

Primeiras coisas primeiro, importando as bibliotecas necessárias. Todos devem estar familiarizados com estes.

traço de importação
importar dash_core_components como dcc
import dash_html_components as html
from dash.dependencies import Output,Entrada,Estado

Inicialize o aplicativo Dash:

A próxima etapa é inicializar o aplicativo. dash.Dash () invoca a instância do aplicativo.

app = dash.Dash(__nome__, external_stylesheets = external_stylesheets,suppress_callback_exceptions = True)

Você deve ter certeza de que suppress_callback_exceptions é estabelecido em certo para que você possa navegar em páginas diferentes. Se você não definir como verdadeiro, erros relacionados a chamadas certamente surgirão.

Projeto:

Vamos começar com o design.

app.layout = html.Div([
  dcc.Location(id='url', atualizar = False),
  html.Div(id='page-content')
                     ])

Dcc.Location decide a página atual a ser exibida. Representa a barra de endereço no navegador. O div abaixo mostra o conteúdo do url especificado. O nome do caminho selecionado será passado como um parâmetro para este componente de localização e, em consequência, o conteúdo da página será exibido. Você verá isso em uma explicação mais detalhada. A restrição de atualização serve apenas para atualizar a página quando o local é atualizado ou não.

Página de login (página de índiceo "Índice" É uma ferramenta fundamental em livros e documentos, que permite localizar rapidamente as informações desejadas. Geralmente, é apresentado no início de um trabalho e organiza os conteúdos de forma hierárquica, incluindo capítulos e seções. Sua correta preparação facilita a navegação e melhora a compreensão do material, tornando-se um recurso essencial para estudantes e profissionais de várias áreas....):

Vamos agora criar a página de índice que irá conter as caixas de entrada para o nome de usuário e senha e o botão de verificação para autenticar o usuário. Esta será a primeira página a aparecer.

index_page = html.Div([
html.Div(
dcc.Input(id ="do utilizador", tipo ="texto", placeholder ="Insira nome de usuário",className ="inputbox1",
estilo ={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'60px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2'
}),
),
html.Div(
dcc.Input(id ="passar", tipo ="texto", placeholder ="Digite a senha",className ="inputbox2",
estilo ={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'10px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2',
}),
),
html.Div(
html.Button('Verificar', id='verify', n_clicks = 0, estilo ={'border-width':'3px','font-size':'14px'}),
estilo ={'margin-left':'45%','padding-top':'30px'}),
html.Div(id='output1')
])

@ app.callback(
    dash.dependencies.Output('output1', 'crianças'),
   [dash.dependencies.Input('verify', 'n_clicks')],
    estado=[Estado('user', 'value'),
                Estado('passw', 'value')])
def update_output(n_clicks, uname, passar):
    li={'shraddha':'admin123'}
    se uname =='' ou uname == None ou passw =='' ou passw == None:
        retorno html. Div(children='',estilo ={'padding-left':'550px','padding-top':'10px'})
    se uname não em li:
        retorno html. Div(children='Nome de utilizador incorreto',estilo ={'padding-left':'550px','padding-top':'40px','font-size':'16px'})
    se li[uname]== passw:
        retorno html. Div(dcc.Link('Acesso Concedido'!', href ="https://www.analyticsvidhya.com/next_page",estilo ={'color':'#183d22','font-family': 'serif', 'font-weight': 'bold', "decoração de texto": "Nenhum",'font-size':'20px'}),estilo ={'padding-left':'605px','padding-top':'40px'})
outro:
    retorno html. Div(children='Palavra-passe incorreta',estilo ={'padding-left':'550px','padding-top':'40px','font-size':'16px'})

O código acima cria 2 caixas de entrada, o primeiro é para o nome de usuário e o segundo é para a senha. Ao contrário de um botão normal que permite uma única caixa de entrada, deve definir o ‘Estado’ dentro de uma lista como escrita acima para obter a entrada de várias caixas de entrada e, em seguida, atualizar a saída clicando no botão (verifique neste caso) .

En update_output, primeiro definimos um dicionário ‘li’ contendo todos os nomes de usuário válidos e senhas correspondentes. A primeira condição 'sim’ é apenas para que nada seja mostrado no início.

Então, verificamos se o nome de usuário é inválido / válido, se o nome de usuário estiver presente em 'li', então é considerado válido, então verificamos se a senha é válida para o nome de usuário fornecido, e se ambos estão corretos, estrondo! Você recebe um link que diz 'Acesso concedido’ e clicando no link você pode pular para a página necessária.

Em dcc.Link, o primeiro parâmetroéo texto que seráexibido como link e hreféo 'nome do caminho’ que definimos para uma página específica. Veremos como esses links são definidos e como os nomes das rotas são atribuídos em breve.. O resto da parte é apenas formatação para torná-la bonita.

A página real:

Este é o aplicativo de painel principal. O código a seguir é apenas um código de script básico para fins explicativos.

Código:

next_page = html.Div([
html.Div(dcc.Link('Terminar sessão', href ="https://www.analyticsvidhya.com/",estilo ={'color':'#bed4c4','font-family': 'serif', 'font-weight': 'bold', "decoração de texto": "Nenhum",'font-size':'20px'}),estilo ={'padding-left':'80%','padding-top':'10px'}),
        html. H1(filhos ="Esta é a próxima página, a página principal",className ="ap",estilo ={
 'color':'#89b394','text-align':'center','justify':'center','padding-top':'170px','font-weight':'bold',
 'font-family':'courier',
 'padding-left':'1px'  })
]) 

Você pode adicionar outros componentes de acordo com suas necessidades. Como você pode ver, Eu forneci um botão 'Sair'’ no canto superior direito desta página, que o levará de volta à página de login e saia. O link é formatado de forma que não se pareça com um link azul típico com um sublinhado, o que faz com que pareça decente.

Tentei incluir o formato máximo necessário para não ter que procurar por essas pequenas modificações.

Defina os links:

A última e mais importante parte, quem vai cuidar de toda a navegação, é definir as rotas. E é assim que se faz.

Código:

@ app.callback(dash.dependencies.Output('page-content', 'crianças'),
[dash.dependencies.Input('url', 'pathname')])
def display_page(nome do caminho):
    se o nome do path == "https://www.analyticsvidhya.com/next_page":
        return next_page
else:
       index_page de retorno

Você deve definir os nomes de caminho para todos os urls usados ​​no aplicativo. Eu acho que é autoexplicativo, retorna a seção respectiva para o seu nome de caminho. Next_page é o componente html div que é definido na seção anterior.

E claro, para correr a aplicação.

se __name__=='__main__':
    app.run_server() 

Quando você executa o aplicativo de painel, o tabuleiro será o próximo:

Após autenticação bem-sucedida, você obterá o link que diz ‘Acesso concedido’ como você pode ver na imagem abaixo.

E clicando neste link, você pode acessar o aplicativo a partir do seu painel.

O que mais, también puede agregar más funcionalidades como guardar el nombre de usuario y la contraseña para cada nuevo usuario agregado y almacenar estos detalles en la base de dadosUm banco de dados é um conjunto organizado de informações que permite armazenar, Gerencie e recupere dados com eficiência. Usado em várias aplicações, De sistemas corporativos a plataformas online, Os bancos de dados podem ser relacionais ou não relacionais. O design adequado é fundamental para otimizar o desempenho e garantir a integridade das informações, facilitando assim a tomada de decisão informada em diferentes contextos..... Usando técnicas de criptografia para armazenar a senha em um banco de dados e descriptografar para validação. E assim por diante. Também vou criar um blog no futuro para isso. Fique ligado.

Espero que este blog explique o que tentei transmitir e agora você também pode testar no módulo de login do aplicativo de painel. Obrigado! Te vejo na próxima!

Autor:

Shraddha Shekhar

Sou estudante de Engenharia da Computação e tenho curiosidade sobre aprendizado de máquina e ciência de dados. Se você gosta disso, olhe meu outro blog.

A mídia mostrada neste artigo não é propriedade da DataPeaker e é usada a critério do autor.

Relacionado