Locking down a Squarespace website using a universal password is easy enough, and actually quite convenient in a variety of scenarios. But what if you wanted to make certain portions of your website accessible only by a specific audience? In this case, I'm going to use my Patreon campaign as an example, with my patrons being the targeted audience. This can be done by creating a "Log In with Patreon" button using Patreon's official API.
Because Squarespace is a closed platform, as opposed to open-source platforms like WordPress, this is going to require a bit more work. However, the process isn't difficult. You just need to be sure to pay attention and follow the instructions carefully.
Register your client with Patreon
The first thing you need to do is set up your client and API keys with Patreon. This involves telling Patreon some basic information about the website you plan to work on, including its name, domain, etc. Don't get too hung up on coming up with an app name. It can be anything you want, just as long as it relates to the client.
You are also required to input a redirect URL, which is the page that patrons will be redirected to after successfully logging in via Patreon. This is an important step, so be sure to select a page that is relevant. If you don't have one already, that is not a problem. You can always come back to this step and update it with the actual redirect URL. If you need to, set a reminder.
Assuming you've successfully created a client, Patreon will display information for the following:
- Client ID
- Client Secret
- Creator's Access Token
- Creator's Refresh Token
Unless you are working with a team, it's critical that the above information is kept private. Patreon automatically saves everything in your account for later access, so you don't have to worry about saving it locally.
Create your button
Now that your client and API keys have been generated, it's time for the fun part. Let's get your "Log In with Patreon" button set up and working. To do so, follow the instructions here. Keep in mind, however, that you are creating a button and not doing a simple copy/paste. As mentioned earlier, going the Squarespace route is going to require a bit of extra work, but the process isn't too bad.
Using the code below, replace <your client id> with your own. This is the string of characters that Patreon generated for your client. Located on this page, it's called the Client ID. Copy and paste it into your code. Delete the < and > symbols. Once that is done, you'll want to paste in your redirect URL. This can also be accessed on that same page. Again, delete the < and > symbols, as they are not required.
GET www.patreon.com/oauth2/authorize ?response_type=code &client_id=<your client id> &redirect_uri=<one of your redirect_uris that you provided in step 0> &scope=<optional list of requested scopes> &state=<optional string>
This is where things can get a little tricky. Because Patreon generated the above code with line breaks, you will have to go in yourself and delete any white space in-between characters. Also, it's important that you remove the "GET" in the beginning. It's your goal to make this appear as a normal URL. It also doesn't hurt to add http:// in the beginning of the URL as a whole, provided it's not there by default.
Your end result should look something like this:
http://www.patreon.com/oauth2/authorize?response_type=code&client_id=<your client id>&redirect_uri=<one of your redirect_uris that you provided in step 0>
For security reasons, I cannot provide my exact code as an example, but hopefully you get the point. If you need help, please do not hesitate to contact me.
Make it Squarespace official
Congratulations! You've created your "Log In with Patreon" button. But of course, you're not done yet. The final step involves creating the actual button on Squarespace. I promise, this is the easiest part of it all.
Add a Squarespace content block as you normally would. Scroll down the list of options and select "Button." Input the text that you would like to see displayed on your button, and then click the "Clickthrough URL" box. This is where you will want to paste the long URL. Remember, your URL cannot contain any empty spaces. Once you've pasted your URL, select the "Open in New Window" option. Choose your button size and save your changes.
If you did everything correctly, your button should direct you to a Patreon authentication page. Click "Allow" to grant access and Patreon will automatically bring you to the page that you chose to designate as your redirect URL. Check out my button below to get an idea of how it should work.
Looking to do more?
Now that you've successfully created a "Log In with Patreon" button, perhaps you are interested in trying something else. Patreon has a full range of neat things that you can do with their API. Check out Patreon Platform Overview to learn more.