Создание простой базы данных / способ хранения информации html для информации об учетной записи пользователя и создание страниц профиля пользователя - PullRequest
Новая
       49

Создание простой базы данных / способ хранения информации html для информации об учетной записи пользователя и создание страниц профиля пользователя

0 голосов
/ 21 июня 2020

Код Newb ie здесь ...

Итак, у меня есть страница с полем для имени пользователя и пароля с кнопкой «создать учетную запись». 

<!DOCTYPE html>
<html>
    <head>
        <title>
            SocialShare - Sign Up
        </title>
    </head>
    <body>
        <div id="logo">
            
        </div>
        <div id="logo2">
            Social<br>Share
        </div>
        <div id="usernametxt">
            Username:
        </div><input id="username">
        <div id="passwordtxt">
            Password:
        </div><input id="password"><br><br>
        <div id="security">
            For the sake of security,<br>we suggest creating a unique<BR>password specific for this site
        </div><br><br>
        <input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
        <a href="">Already Have One? Log In</a>
    </body>
</html>

Я знаю это довольно просто и глупо, но это просто идея, которая возникла у меня в голове.

Я хочу создать какой-то простой способ, который позволит мне иметь место для хранения имен пользователей и паролей, доступных со всех разных сайтов. Будет страница регистрации, страница входа, страница профиля, страница людей и, возможно, многое другое. 

//LOCAL STORAGE FOR THIS PAGE
function create(){
    var un = document.getElementById("username").value;
    var pw = document.getElementById("password").value;
    localStorage.setItem('username', un);
    localStorage.setItem('password', pw);
}

Это простой JavaScript для страницы регистрации.

И я знаю, что это может потребовать многого, но если мне удастся настроить какую-то базу данных / хранилище, как я могу создать бит кода, чтобы правильно подписывать людей с их конкретными паролями и именами c, и как сделать так, чтобы у каждого пользователя была собственная страница, предварительно загруженная и сгенерированная со всем необходимым кодом, чтобы сделать ее страницей профиля.

Я пробовал смотреть много видео на YouTube, но все они очень неясно, идет туда, где задействовано слишком много сторонних приложений. Было бы замечательно, если бы я смог получить супер простой способ сделать это и, по крайней мере, лучше объяснил, что нужно сделать.

Ответы [ 3 ]

0 голосов
/ 21 июня 2020

Итак, я сделал что-то подобное для школьного проекта, я sh Я хотел показать вам свой код, но, к сожалению, я его потерял. Я создал базу данных с MySQL и создал таблицу пользователей, которая содержит поле для пароля и имени пользователя, и я разместил базу данных с помощью MyPHPAdmin, отличной программы для хостов и использования для создания базы данных. Затем я использую HTML, чтобы сделать все кнопки и формы интерфейса, чтобы пользователь мог вводить свои учетные данные. Затем я написал бэкэнд-код PHP для взаимодействия с моей базой данных, чтобы он мог добавлять пользователей или проверять, есть ли у пользователя правильный пароль при входе в систему. Вам необходимо реализовать все функции scueirty, чтобы люди не взломали логин, но это основная c идея того, как работала моя.

0 голосов
/ 21 июня 2020

Во-первых, это отличный способ погрузиться в внутреннюю веб-разработку

Возвращаясь к вопросу, вы не хотите хранить конфиденциальную информацию в локальном хранилище.

  • Это уязвимо, особенно если у этого устройства несколько пользователей.
  • Он получит потеряны, если они очищают данные браузера
  • Данные присутствуют только на этом одном устройстве, что означает, что если они попытаются войти в систему на другом устройстве, это не сработает.

Так что думайте об этом как о двух отдельных частях Front-end / client-side здесь у вас есть форма входа и регистрация, в основном веб-сайт, который видят пользователи.

Затем есть Back-end / server-side это код, запущенный на сервере и используемый для связи с клиентской стороной и вашей базой данных (в данной ситуации). Он отделен от кода, который вы написали для интерфейса пользователя. т.е. (серверная часть похожа на парня / девушку, которая передаёт данные формы "имя пользователя" и "пароль", а затем вы можете закодировать, что серверная часть будет делать с данными, прежде чем он / она возьмет их и передаст его в базу данных, чтобы его можно было сохранить. И наоборот, когда вам нужны данные из базы данных, серверная часть получит эти данные из базы данных и предоставит их веб-сайту для отображения пользователям "

Код серверной части не является частью проще говоря, ваш веб-сайт - это другой файл, запущенный на сервере. Передняя часть взаимодействует с серверной частью с помощью HTTP-запросов, а серверная часть отвечает HTTP-ответом. Легкий способ сделать это - использовать fetch api вот фрагмент кода о том, как ваш веб-сайт может предоставить вашей серверной части данные для входа. 

    await fetch ("http:localhost:3000/login",{
    method: "POST",
    mode: "cors",
    headers: {
        "Content-type": "application/json"
    },
    body: JSON.stringify(loginObject)
})

Вы должны написать отдельный код для серверной части и разных языков (python, ruby node-js, et c ..), но node-js использует javascript, что может упростить задачу, если вы уже знаете JS

"вот пароль пользователя и имя пользователя, сохраните его "

Это не факт, но вы, возможно, не захотите использовать node-js в качестве серверной части, поскольку он использует Javascript, а также для базы данных лично, я использовал MongoDB в качестве своей первой базы данных и использовал mon goose (фреймворк, который упрощает использование mongoDB.

TL; DR. Я предлагаю изучить

  • MongoDB (для вашей базы данных)
  • Express (Back-end framework для node-js для более быстрой имплантации. Но учите простой старый node-js, а не что разные)
  • NodeJS
0 голосов
/ 21 июня 2020

Сэр. Паста,

Я бы порекомендовал аутентификацию firebase. (https://firebase.google.com/docs/auth). Аутентификация Firebase удобна для начинающих пользователей, которые хотят обрабатывать данные для входа и регистрации. У них есть много функций, таких как настраиваемые утверждения и аутентификация пользователя для регистрации. Если вы знакомы с node.js (или любым другим серверным языком, совместимым с этой системой) и javascript, это должно быть для вас.

Надеюсь, вы нашли это полезным.

Спасибо.

...