CP's Register Template [EXTERNAL REGISTER]


#1

Hi,

Firstly, all credit goes to Dote for the backend code, I believe the template is by Disney, but still put together by Dote.

You can find a live version of this registration system working here: https://create.rcpps.me/

DOWNLOAD: AS2 CPExternalRegister.zip (826.4 KB)

DOWNLOAD: AS3 CPExternalRegister.zip (848.8 KB)

I’m creating this topic to show you an alternative to the internal flash registration system that is in Houdini’s Documentation. Perhaps you would prefer an external registration system because e.g. you may of removed the create account feature from the startscreen, or you prefer this template/design to the flash one. Whatever the reason is, feel free to use this.

About this register:

  • Uses PDO
  • Has it’s own captcha system (instead of using Google’s recaptcha)
  • Beautiful design by Disney for creating an account
  • Checks usernames existence, checks email existence.
  • Was originally made for Timeline (I believe), but I have modified it to be compatible with the AS2/ASYNC version of Houdini, by adding a function to hash bcrypt passwords and to match the database structure of Houdini’s.
  • Suitable for AS3 (by downloading the AS3 version) with the correct bcrypt hashing
  • Not hard to modify for your own preference

There is also no reason that this wouldn’t be compatible for the AS3 protocol or any other source code than Houdini, just make sure the SQL statement to insert an account, found in /ajax/index.php fulfils your source’s database structure.

For example the AS3 version of Houdini has extra fields in their database structure for compatible features to be used in AS3. So if you plan on using this with the AS3 version of Houdini, you would have to add these extra fields in the insert statement shown on line 113 of this screenshot:

You would also have to add the variable for what should be inputted e.g. on line 114 of this screenshot:

And define what each variable’s value should be like shown on line 125 and 126 of this
screenshot:

However, using the register attached from this topic with any other source like Timeline or Kitsune without configuring it to match their database structure or password methods will not work.

For example the table name for where user data is stored is different for Kitsune and Houdini. For Houdini, the table name is called penguin where as for Kitsune it’s called penguins. You would have to modify these lines (and more within /ajax/index.php):

The backend code in this release was modified by myself to specifically work with Houdini’s current database structure, for the AS2 version (also async) and to hash bcrypt passwords instead of MD5 (the original release for this on Aureus hashed passwords in MD5 for Timeline’s use). As well as that I’ve also uploaded an AS3 version, which hashes passwords correctly for the AS3 protocol.

Feel free to also skip some parts of this tutorial if you’re already familiar with how to set it up.

I have made this for the average joe who’s already setup a CPPS with the Houdini Documentation. Every step is in a lot of detail, apologies if it’s a little patronizing or lengthy :tired_face:

  1. Make sure your webserver is setup.

If you already have a running CPPS, it’s probably already setup on nginx or apache. Make sure your create an account subdomain (create.domain.com) leads to the folder which contains all of your registration files.

You could use your register in this form: https://domain.com/create/ but you would have to modify parts of /js/pages.js differently to how I did it in this tutorial.

Here is an example for how you might setup your webserver with nginx:

You would create a file in /etc/nginx/sites-available called create, and copy the nginx configuration from the file default (which is in the same directory). You would then modify it.

Your nginx server_name block is create.domain.com and loads files from the directory (next to root), /var/www/html/create which is the directory that contains all of your registration files.

You would obviously correct create.domain.com to whatever domain/sub-domain you are using for this. domain.com is just my example.

  1. Configure your webserver to execute PHP files.

You might already have PHP installed from the Houdini Documentation, but there’s no harm in doing the command again to double check.

You may also be running this with xampp, which is a bundle that already has PHP setup and configured, so you may be able to skip this step.

This command is for a Ubuntu 18.04 machine, you may want to find an alternative way to install php-fpm if you’re not using Ubuntu:

sudo apt-get install php-fpm php-mysql

It will install a version of php-fpm and php-mysql based on what machine you are using. For ubuntu 18.04 it normally installs php7.2 and for Ubuntu 16.04 it normally installs php7.0.

It is important to know what version of php-fpm you installed for later, you can check by doing the command:

ls /var/run/php/

Which will an output like this:

oaa

Once you have successfully installed php-fpm, you need to configure it with your current webserver setup. Here is an example of how you may do it for nginx:

Add index.php if it’s not already there to this list, shown on line 44 of this screenshot:

php

Then you need to uncomment line 56, 57, 60 and 63 in this screenshot:

php1

To uncomment something in a configuration like this, all you have to do is remove the # from the line you want to uncomment.

So it would turn out to look like this, so PHP can be configured:

lol

Next we have to correct the version of php-fpm, Ubuntu 18.04 installs php7.2 by default from the installation command, however it doesn’t modify line 60 to use php7.2 in the nginx configuration. Based on this, you’d want to correct it to php7.2-fpm.sock instead of php7.0-fpm.sock.

It could also be a case where your machine is Ubuntu 16.04, and it has installed php7.0-fpm. Like I said above, you can use this command to check:

** ls /var/run/php/**

Whatever version yours is, correct it.

Mine is php7.2-fpm.sock so mine would look like this:

lol1

You may want to make other modifications based on how your server works. That’s up to you but Step 2 is the bare minimum of what is required.

Once this is done, you want to save or update your new nginx configuration. Every server has a different way of doing it but here is an example of what i’d do for mine:

Do the command

ln -s /etc/nginx/sites-available/create /etc/nginx/sites-enabled

What this will do is upload your nginx configuration named create (if you named it something else you may want to edit the command.

Then I would do

sudo nginx -t

To double check that the nginx configuration works.

Finally I would do

sudo service nginx reload

To make sure that nginx is updated/reloaded.

Now your webserver should be making files load off /var/www/html/create to show on create.domain.com, and processing the PHP files that the register uses for that setup.

Still stuck?

You can also use this external source to help you with your webserver setup if you’re struggling: https://devanswers.co/installing-nginx-mysql-php-lemp-stack-ubuntu-18-04/

  1. Upload your registration files

You may have already done this but if you haven’t, then upload your files to the correct directory that your nginx loads files off for your sub-domain. Everyone has a different way of doing it based on what machine/setup they have.

For example, i’d upload it to /var/www/html/create, using an FTP tool like FileZilla or CyberDuck to upload these files to my VPS.

  1. Configure your registration files: javascript

Like we did with configuring NGINX and PHP, we need to edit some parts of the register so that everything is functional. Although I have released this register with the correct Houdini structure, there are some parts that need your input because e.g. each individual has a unique domain name.

If you’ve already tried viewing the register on your web-server, it wouldn’t work due to the captcha not being loaded correctly from /js/pages.js or MySQL details are not setup within /ajax/index.php. You would receive an alert/a message like this:

lol2

Firstly, lets fix the captcha.

You want to open /js/pages.js with a source code editor, one that allows you to use a Find and Replace function to make things easier for you.

For example, Visual Studio Code is a good one, Open the file /js/pages.js with your source code editor and find the Find and Replace feature. Specifically for macOS it’s found here called Replace:

It may be different for other OS or versions, no matter what one you’re using you do not want to choose Replace in Files.

You want to choose Replace.

Once you click Replace it should show this in the top right corner.

findreplace

For the Find field, you will want to enter:

MySubDomainForCaptcha

You will notice it’s found 6 instances of this already and it’s attempting to load your captcha and backend code from ‘MySubDomainForCaptcha’.

Obviously your domain is NOT ‘MySubDomainForCaptcha’ so what you would want to do is type in the Replace field:

create.domain.com

You would want to correct domain.com to whatever domain you are using for the webserver, and rename 'create’ if you use a different subdomain. So pretending that my domain name was domain.com and my subdomain was create.domain.com I would do the following shown:

subdomain

And then I would click the find and replace button here:

replrepl

It may be different for each version of Visual Studio Code or whatever OS you’re using. It should be relatively easy to find and experiment with.

To confirm that it worked though, you will notice the Find field will say No Results for finding ‘MySubDomainForCaptcha’ because you would’ve replaced it with your actual sub domain. Like shown:

noresults

If you want to be extra sure, just edit the Find field and enter the sub-domain you wanted to change e.g. for me it would be create.domain.com

I would notice that there are 6 occurrences of them, which is what I want for my Captcha and backend code to load.

domainnn

For those who have an SSL certificate that is active for the domain/subdomain, you should also correct http to https using the Find and Replace feature. You will NOT have to do this if you don’t have an SSL certificate setup for that sub-domain.

Within this file page.js, it also specifies where to redirect after the user has registered.

So another thing you will want to modify using the same Find and Replace feature is the link of where redirects to after the submit button is pushed and the details are inserted successfully.

To do this you would type in the Find field:

PlayPage

And you will find one match for it. You need to then type in the Replace field:

play.domain.com

For you specifically, you would replace domain.com with your actual domain name, and ‘play’ if you have a different CNAME or sub-domain for your play page.

But for me, it would look like this:

playpage

And then I would click the find and replace button here:

replrepl

And my pages.js would be successfully configured.

If you use CloudFare for your website, you may have to purge the cache on it before trying to see if it now works. You can do this like shown:

Whether it’s under CloudFare or not, you still have to clear your own cache from your browser.

Once done, you can head over to your create page (e.g. in my case it would be create.domain.com and you will notice that the captcha system successfully loads and is functional.

However the register is NOT complete, functions like the username-checker are unable to work without your MySQL details being configured in /ajax/index.php to check whether the user exists or not already. We will look at this more closely in Step 5.

If for some reason your register is still not loading, or your captcha is not loading, then you should seek some debugging tools.

Maybe Developer Tools within your browser OR checkout the error log that your webserver produces e.g. on Ubuntu 18.04 with NGINX it would be in /var/log/nginx named error.log.

  1. Configure your registration files: PHP

Remember, if your source is NOT Houdini OR you have added extra fields (e.g. nameglow) to your database structure. You will need to modify the SQL statement that inserts a user within this file: /ajax/index.php

First of all, open up ajax/index.php with a source code editor, and again we will be using the Find and Replace feature.

We need to make sure that the backend code is interacting with your MySQL server.

This tutorial assumes that you have already setup Houdini using the official documentation, therefore you have a running MySQL server with a username and password setup to login to MySQL and the database table Houdini already exists.

If you are unsure on how to use the Find and Replace feature, go to Step 4

Otherwise use the Find and Replace feature and enter in the Find field

MyDBName

You should find 5 matches for this. You then want to enter in the Replace field

Houdini

If you’ve used the Houdini Documentation, your database name should be Houdini by default, however if you’ve renamed it then you want to enter the database name you renamed it to instead of Houdini.

dbb

then you would click the find and replace button here:

replrepl

And you should see lines like this, where your database name is corrected.
pdodb

The same principle applies here, for the MySQL Username.

You want to enter in the Find field

MySQLUserName

and in the Replace field you enter your actual MySQL username.

This could be root or you could of made a new MySQL user. For example, my MySQL username would be root so I would enter in the Replace field

root

And it would look like this:

user

then you would click the find and replace button here:

replrepl

And it should successfully add your MySQL username to those lines needed for a database connection.

If you have somehow forgotten your MySQL username, take a look at Config.py in your Houdini source, or go to SSH, login with a root user, do the SSH command:

sudo mysql -u root -p

And then type this command:

SELECT User FROM mysql.user;

You will find a list of MySQL users, try and identify which one is yours that you created.

The same principle applies again, for the MySQLPassword, you want to enter in the Find field:

MySQLPassword

You would enter in the Replace field your MySQL password. For example my MySQL Password could be mycoolpassword124 .

So therefore I would enter in the Replace field

mysqlpassword124

Like shown:

pass

Once again you can find out your MySQL password from your Houdini config.py file if you’ve somehow forgotten it.

Or you can reset it using SSH commands if you have root access to your server. SOURCE: https://www.a2hosting.com/kb/developer-corner/mysql/reset-mysql-root-password

You would then you would click the find and replace button here:

replrepl

And it should successfully add your MySQL password to those lines needed for a database connection.

Once that is done, save the file and test it by going to create.domain.com.

You can do a quick test to see if the backend code is interacting with your MySQL server, simply by entering a username that is already taken and seeing if it prevents you from making it. Like shown:

Now you can attempt to create an account, and in my case… it is successful.

The registration script is now able to:

  • Verify whether i’m a bot or not using the captcha.
  • Check whether a username is taken or not.
  • Create an account successfully, insert a new penguin into Houdini’s database.

As shown here:

And from checking my database, specifically the penguin table, it has successfully inserted the user and entered the correct fields, without any issues.

You will also notice that in the table igloo, it has also inserted the igloo details for the user which is later on used for Houdini’s emulator to assign them an igloo. This was done using the same PenguinID for Basil1 as 101 without any issues:

Remember some features may require your browsers cache, or CloudFare’s cache to be cleared. Make sure you do that before attempting to make a user.

TROUBLESHOOTING:

Check your current database structure using a database application like DataGrip or phpMyAdmin.

A common situation to happen is when you HAVEN’T ran Houdini yet and you use this register before the source has communicated with the database. This is an issue because the first time you run this source, Houdini’s Rank plugin prepares and executes an SQL statement shown below:

ALTER TABLE penguin add Rank TINYINT(1) DEFAULT 1;

This creates the field Rank in your table penguin. This register attached has an insert statement is configured to fill in the field Rank.

So in order to solve this, you would have to ALTER the table penguin and ADD this field in to your database structure. This can be simply done through terminal, or wherever you can execute a MySQL query.

An example of how i’d do it is using the database application Sequel Pro, i’d go to the Query tab and execute the SQL statement from there, like shown:

But remember, this is only if you haven’t ran Houdini yet and the field Rank does not exist yet. If it does already exist, there’s no need to do the query as it won’t let you create the field Rank and therefore it’s another issue that is causing this.

Also if you want users to not have their usernames approved in-game upon registration, you should change the variable for :Approval
Modify this line:

$insertStatement->bindValue(":Approval", ‘1’);

to

$insertStatement->bindValue(":Approval", ‘0’);

For other implementations like activating accounts via email, you may want to take a look at @Ben’s flash register for Houdini, see how an email is sent within that script and modify this register to have that?

Then set the Active field to input 0 upon registration.

  • Remember to double check and test that PHP is configured for your webserver.
  • Remember to check your webserver error logs, e.g. NGINX’s in /var/log/nginx.

  • Remember to clear your browers and your CloudFare cache (if you have cloudfare setup).

  • Remember to check developer tools for any missing files.

  • Ping me ro#0008 in Solero’s official discord server for some guidance.

If I have made any mistakes, let me know :slight_smile:

~ ro


Setting up an AS3 Club Penguin Private Server on Ubuntu 18.04