This guide takes you through the steps a Site Manager needs to perform to get the google API key to enable ContestPad to use google services such as YouTube integration, location services and authentication services.
Starting point: Google Browser (API) Key
A Browser Key for Google API is needed to allow entrants on your contest the ability to browser and select YouTube videos.
The follow step-by-step guides walks you through creating a project and enabling the desired API via the Google Developer Console.
- Launchpad6 contest site (you can start a trial at http://manager.us.launchpad6.com/trial)
- Google account, which will be used to authenticate users against
Step 1 – Create a project on Google Developer Console
Navigate to https://console.developers.google.com and sign-in as the google account that you will use to integrate google services with your contest site.
To create a project on Google Developer Console, login to the developer console and create a new project (you can use an existing project if you so wish) by clicking “Select a project” drop down.
Then click on new project
Once you click on “Create project…” link, you will need to provide your project a name and other required fields.
Click “Create” button to create a project.
Step 2 – Selecting your project
Ensure the correct project is selected this can be down by selecting the drop-down menu from the project selector.
Note: that if you have Google Suite you may need to switch to your organization to be able to see and select the project you had created.
Step 3 – Setup OAuth 2.0 client
Setup WebApp client to allow entrants the ability to authenticate using google ID.
First setup the OAuth Consent screen, this is the screen that is shown to the entrants when they try to login.
Note: The minimum requirement is to provide project name, however we recommend you provide optional fields as well.
How you are ready to create an OAuth client ID to represent your Launchpad6 contest site.
Select Web application as your Application type
You will need provide:
Name: A name to identify your content web client
Then click Create.
You will be provided with the client ID and the client secret on the next screen, copy these two values as you will need to add them to your launchpad6 site.
Step 3 – Enable Desired API
Once the project is created you will have to enable the YouTube APIs on Developer Console in order to use it. To enable the API, click on “Enable APIs and Services” link on the Dashboard of the newly created project.
Now, from the landing page either search or navigation and enable the APIs based on the requirements for your contest.
Google+ API – Required for all integrations between your contest site and Google.
Google Picker API – Required if you want to allow users to be able to select YouTube video on the contest entry page.
Step 3a – Create Browser Key Credentials to allow entrants to select YouTube videos
If you are going to allow entrants to be able to select YouTube videos to submit as their contest entry you will need to create a Browser Key Credential in addition to the enabling Google Picker API in the previous step.
To get a new Browser (API) Key, click on “Credentials” section on the left panel of the console and select “Create Credentials” drop-down link on the credentials page. Then select “API Key” from the drop-down list.
Click on Restrict Key, to change the name of the API key and to restrict the http referrer.
When you select HTTP referrers (web sites) as the application restriction, you will need to provide Accept requests from these HTTP referrers (web sites).Add the HTTPS URL of your contest site, making sure you include /* at the end. For example, https://contestjs.us.launchpad6.com/* .
Note: if you are using a custom domain you will need to add the HTTPS URL of the custom domain here as well i.e. https://contest.mycontest.com/*
Step 5 – Add Google credentials to your contest site
Access your admin dashboard and navigate to global site setting.
Navigate to the Social Authentication section and Google Client ID, Google Secret and optionally Google Browser Key.
Step 5a – If required, enabling YouTube video selector
Once you have added (API) key, Google (client) ID and Google (client) Secret to your contest Site Settings.
Navigate to the Contest Settings tab and enable “Allow entrants select videos from: YouTube”.
-- End of Configuration --
Client Experience for YouTube Video Selection
If the appropriate APIs have been enabled for YouTube, an entrant will be able to browser and select videos from the Content Entry page.
A pop-up will appear, users will need to allow pop-ups.
First time users will need authorize access
User will then be able to select YouTube video from their channels.
The user will fill in the rest of the form to submit their entry.