Copyright WebTechGlobal © 2016
Home2017February

February 2017

This installation and configuration tutorial was created for the “Channel Solution for Twitch” plugin, we refer to it as TwitchPress or the TwitchPress Plugin. The tutorial is lengthy but is in three parts. Most developers will be able to skip ahead to the third section which explains which forms to use and when. 

Here are the three sections within this tutorial post…

  1. Installation – standard WordPress plugin installation, if you’ve done it before, you can skip this part.
  2. Twitch Application Creation – if you’ve created a Twitch application before, you’ll not need to follow this section.
  3. Select permissions scope – this part should be read by everyone due to multiple Twitch accounts being possible.

Install the plugin created by the TwitchPress Project

If you are a developer with WordPress experience, please install the plugin using your preferred method. Then read the Configuration part of this tutorial. This tutorial will encourage installation from WordPress.org for the sake of security.

Step 1: Add New Plugin

Go to your Plugins menu and select Add New.

Go to your Plugins menu and select Add New.

Step 2: Search “TwitchPress” and click Install

It is possible to download Channel Solution for Twitch and then upload it to WordPress. That approach isn’t really required unless you have a custom copy of the plugin. I recommend installation by doing a search in the official repository offered by WordPress.org. To do this just type into the box shown in the image below. You can enter TwitchPress to locate my plugin even though that is not it’s official name. When you see the plugin shown in the image below, click Install Now. This action will download files from the official (safe) source of free plugins and add them to your plugin folder directory. Plugins are folders of files and they do nothing until activated which does not happen at this stage.

Step 3: Installing, please wait! 

Please wait for the plugin to download and install into your WordPress – do not close or refresh the page until you have completed the steps below.

Step 4: Activate the plugin

At this point, the plugin has not modified your WP site and is not considered part of your sites installation. You need to click Activate and then the plugin will make changes to your WP site in ways that most big/advanced plugins do i.e. create new database tables, enter media to your gallery, insert new option records into your WP options table and other minor/standard changes.

Step 5: Confirm plugin activated successfully

Successful activation should be obvious and look like the image below. If it’s not obvious because you’ve not arrived at the list of plugins and seen a notice like the one shown in the image below. You should contact us, send us any errors, describe what happened while waiting for the activation to complete and confirm that you followed the steps above rather than uploading the plugin. 

Create a Twitch Application 

If you plan to provide services to visitors using this plugin, please understand that your plans are serious. You will be considered a developer by Twitch Entertainment Incorporated if you use this plugin to offer other Twitch users some access or control over their channels. With developer-status comes responsibilities and your responsibilities are made clear in official terms. By installing this plugin and configuring it for any use at all. You are agreeing to the terms. The configuration process I have designed takes this serious by making administrators (you) accept my own demand that you read the Twitch terms before using my plugin. That is as far as my responsibilities go as per the “GNU GENERAL PUBLIC LICENSE” bundled with the plugin, see license.txt within the plugins files. 

Step 6: Go to the plugin by finding TwitchPress 

The plugins official name is Channel Solution for Twitch but that just doesn’t fit well in some places. So I use the project codename, TwitchPress. Find and click on TwitchPress in the administration menu. It will take you to the main screen, called Plugin Settings.

Step 7: Locate the Twitch Developer Agreement box

Locate the box titled, Twitch Developer Agreement. The original Twitch Developer Agreement box has been updated to request Twitch API (Kraken) application credentials. So we’ll need to get those before submitting the boxes form and I’ll tell you how. Please note, you do not need to be a developer by title to accept the agreement but by accepting it you accept all of the same Twitch requirements and legal responsibilities as a developer.  

Step 8: Enter Main Channel

If you have installed the plugin for your own use only, enter your own Twitch channel. If you plan to provide a service for the general public or a team of gamers who will be using the site to interact with the Twitch API. Then enter your organisations representing channel, if you have one i.e. the TEST Gaming (also known as TEST Squadron) stream team would enter TESTGaming as that is the name of their channel. It has nothing to do with the gaming teams site domain, testgaming.tv or testsquadron.com so do not confuse these. Members of the TEST stream team would authorise their own Twitch accounts individually if they wish to use services offered by the testgaming.tv website.  

I’ve entered my own channel, I am ZypheREvolved in the world of gaming (please follow to show your support). The plugin will now use the ZypheREvolved channel to generate some default content where examples are required. But it goes further than that. The credentials I enter later will be expected to match the default channel. They don’t have to in theory but I’m making it so. This way any change in the application credentials, requires a change to the default account. If a hacker were to change one, they must change all and it would be a very visible change because any public content defaulting to, the ZypheREvolved channel, would also change. I also want the administrator to manually indicate the channel they intend to act as the default. This approach could be changed if anyone felt that the default main channel should differ from the main channel that makes calls to Kraken. 

Step 9: Go to Twitch Connection Settings

Please click here to open Settings -> Connections (open new tab) and view your connected accounts, services, and apps. Scroll to the bottom of the page where you will find, Developer Applications. Click on the Register your Application to begin preparing your site to communicate with Kraken.     

 I have two existing applications for test sites installed on my computer. The location is known as localhost. Where localhost is displayed, your domain will be displayed. I already have an application setup for this plugin but I can create more that relate to this plugin because technically the application is not strictly for the plugin. It is the site that the plugin is installed on and even then more than one can be created. We can create multiple applications for different purposes on the same domain.

Step 10: Register your Application form

This is the form you should arrive it and completing this form will give you credentials to use Kraken. It’s actually very simple especially if you follow my instructions, even if it is just the screen captures your looking at. The hardest part, for none developers, is understanding the Terms of Service, Privacy Policy, and Developer Services Agreement. 

Step 11: Enter your application name

My application names focus on the names of my plugins because I have each one in it’s own test site. You’re best entering a name that includes your domain unless you’re confident that the channel you’re logged into will not be used on any other domain. If you plan to create multiple applications for a single site, you should take that into consideration when choosing a name as it is important to identify each app. Enter your name now.

I've entered Stream Team Services as my Twitch application name.

I’ve entered Stream Team Services as my Twitch application name.

 

Step 12: Enter Redirect URI

Enter your site’s address in the Redirect URI field. We can get more advanced and point to a deeper directory but we do not have to. WordPress will detect the redirection and process it accordingly without any special values in the redirect URI. However, the projects Trello board has a card to extend this by adding a unique value to the extended URI and the detection of that value would trigger the processing that completes the entire procedure.

Step 13: Select Application Category and click Register

In it’s current state, the TwitchPress plugin is for Website Integration. The projects roadmap plans to deliver a Chat Bot, Giveaway/Loyalty Tool, and Analytics support. So if in future anyone is using the plugin for either of those, they may select them. Until those updates are released or if you plan to use all of the above then select Website Integration. Then decide if you wish to accept the mailing list and indicate that you have read terms, policies, and agreements. Click Register and here is what you should see…

So what we have here is a new application to manage. To be very clear, I do not have access to the testgaming.tv website and so this would not work at all. I’ve entered these details as an example only. Even if (and I hope they do) TEST Gaming decide to use my plugin. They would need to create an application in their own Twitch account. 

Step 14: Copy and paste Client ID

If you look back at the Channel Solution for Twitch, you’ll notice that the form I have created to capture credentials has the same input names as displayed on the Manage Application screen. You need to begin filling out the form in your WP admin. You can manually type or copy and paste the Redirect URL. You must copy the Client ID exactly and paste that into the form in your WP admin also. Do not paste it anywhere else, there is no need to store these values for safe keeping and you should not allow a password manager in your browser to capture the data for storage.

Step 15: Click the New Secret button

Now you will obtain your Client secret. It is so secretive that the Manage Application view does not display it by default, in case your screen is being viewed by others. Click on the New Secret button only when you are confident that your screen is not being viewed and there is no remote connection monitoring your screen. Clicking on the New Secret button generates a unique value that you get one chance to copy and then paste into WordPress. Only paste it into the form I’ve provided and click Update. 

Step 16: Submit the Developer Agreement form

You can close your Twitch.tv tab now. Then submit the developer agreement form in WP. If all goes well, you’ll see a notice much like this one. The Channel Solution for Twitch has stored your credentials but you’re not done. You still need to agree to exactly what permission you are willing to grant as the owner of the Twitch account, that you should be logged into. You will be required to go through the oAuth2 process (technical jargon) which opens that window you’ve probably seen before, listing the permissions an app/site is requesting and you click to agree or close to disagree. You’ll need to do this as an administrator and as a visitor. There is a separate form for each and I’m about to explain what to do below.

Select your Twitch account permissions

The Channel Solution for Twitch offers the ability to setup a service for visitors or it can be installed for personal use only. Either way, you have to complete the same forms I’m about to describe below but how you use them is different depending on your needs. 

Step 17: Locate the Personal and Site Authorisation Boxes

Version 1.0.3 was updated with the Authorise Sites Channel, box. This is where I took steps to create a clearer and safer distinction between developer and user. I had to consider the fact that the person configuring the service, may also be a user of the service. The person configuring the service may be the leader of a team of gamers or they plan to provide a service to the general gaming community, but also wish to use the site themselves. That means the plugin has to cater for a single person wishing to authorise their own personal channel and configure their teams channel. 

I need you to locate these accordion bars which open two very similar boxes, offering identical forms. So please check that you have the Authorise Sites Channel and Authorise Personal Channel boxes. It is important that you understand what each form is meant for and if your still in doubt please contact me.

Step 18: Open and complete the Twitch account authorisation

  1. Authorise Sites Channel: If you are preparing the site for a team or business that has their own Twitch channel, you must be prepared and able to log into that account now. If your WordPress site is for your use only, you will log into your personal Twitch account to complete this step. Open the Authorise Sites Channel box and check the boxes for the permissions your willing to give. Keeping in mind that the plugins features will be hidden/displayed based on your selection. What you select, is sent to Twitch.tv and stored in your account. When you are happy with your permissions scope, click the Connect to Twitch button. What you are doing, is setting the account that will handle scheduled activity and generate public content or analytics. There will eventually be a lot of features offer by the plugin that only use the main account and it is important that a business/team does not accidentally log into a private Twitch account. Administrators and moderators will also have access to features that require the use of the team’s main account. 
  2. Authorise Personal Channel: Open this form and do the same as for the one above. Ensure that during the authorisation process, you are actually logged into your personal Twitch account. This form will set up a temporary session, that expires by itself unless you state otherwise when giving the opportunity. There are multiple levels of security, with users being giving a choice i.e. you can give the plugin/site permanent access to your channel for performing automatic actions and running a bot 24/7. The sites channel form creates a permanent session and does so in a different way. That is a technical different between the two. 

You’re Done

The next thing you might want to try doing is using the shortcode intended for displaying one of many streams, by finding one that is streaming live. It works by adding multiple channels to the shortcode and pasting it into a WordPress post or page. Here is my example, created while testing…

[twitchpress_embed_a_stream_api channels="TESTGaming,ZypheREvolved,starcitizen,cigcommunity,"]