Disallow inappropriate usernames on my website-CodePudding

I have been working on a new website for about 5 months and I have been testing a lot of features.

The problem is that almost every new user chooses an inappropriate name for their username.

My question is: How can I implement a "beta test" feature to my website, instead of using a wordlist of bad names, to solve this problem.

CodePudding user response：

A beta test system would be something like a login system, where you approve the people wanting to join. That cannot be easily answered in a StackOverflow answer - for one thing, we must know what server-side language (Python-Flask, Nodejs-Javascript, React, Angular, Svelte, PHP - you must choose one of these) you wish to use to accomplish this. However, there are many video tutorials on YouTube that cover this. Here's one for Python-Flask. However, it is not a simple thing to implement.

Even in your Beta Test system, you will need SOMETHING to test the usernames against - you might not want usernames that include asterisks, or spaces, or high-ascii codes, or etc., so why not just continue that process?

Here's how simple it could be.

At the least, you will need an array (in Python terminology, a "list") of naughty words that you test each new username against.

You don't need to compose this list yourself, other people have already compiled lists like that, which are available by searching. However, it can be difficult to find one that is just perfect for your needs, so you might need to edit what you find - but at least it gives you a starting point.

Then, when someone creates a username, you'll want to test their username against your naughty-word list. Something like:

Show code snippet

const btnGo = document.getElementById('go');
const un = document.getElementById('username');
const msgOk = document.getElementById('msgOk');
const msgNope = document.getElementById('msgNope');
const nlist = ['darn', 'crap', 'jerk'];

btnGo.addEventListener('click', () => {
  un.classList.remove('error');
  msgNope.style.display = 'none';
  msgOk.style.display = 'grid';
  nlist.forEach((bw) => {
    if (un.value.includes(bw)){
      un.classList.add('error');
      msgNope.style.display = 'grid'
      msgOk.style.display = 'none'
    }
  });
});

.error{
  background: pink;
}
#msgNope{
  display: none;
  width: 300px;
  height: 50px;
  margin-top:10px;
  place-content: center;
  background:wheat;
}
#msgOk{
  display: none;
  width: 300px;
  height: 50px;
  margin-top:10px;
  place-content: center;
  background:lightblue;
}

Username: <input id="username" placeholder="Do not use jerk in username"/>
<button id="go">Submit</button>
<div id="msgNope">Cannot use that username - please be clean</div>
<div id="msgOk">That username is fine, welcome!</div>

If your primary objection to using a naughty list is having those words displayed in your javascript code, then you can offload that job to the server - the words can be stored/check over there - and no one can see that code. With this soluton, you would use AJAX on the page to send the username to the server and receive back a pass/fail response. Again, there are many, many, many video tutorials available that will get you up to speed on using AJAX with server-side code.