Description:

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. 

Pre-conditions:

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

Authorized JavaScript origins: This should be the domain that you are using for your contest. You can add multiple at a mention you will need to add your launchpad6 domain such as https://contestjs.us.launchpad6.com

Authorized redirect URIs: This is the web location that Google will redirect an end-user to after they have logged into google. This will be based on the domains you have setup for Authorized JavaScript origins with /connected?hauth_done=Google appended. Example https://contestjs.us.launchpad6.com/connected?hauth.done=Google 

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.

Did this answer your question?