Google#

Follow the below steps to connect to the Google API.

Connect to the Google API#

  1. Go to the Google API Console.
  2. Select an existing project or create a new one.
  3. If you have already setup your OAuth Consent Screen, you can skip this step.
    1. Go to the API & ServicesOAuth Consent Screen.
    2. Select External for the User Type setting and click the Create button.
    3. Fill in the mandatory fields as applicable and click the Save and continue button.
    4. Leave the Scopes blank, and click the Save and continue button.
  4. Next, go to the APIs & ServicesCredentials section.
  5. Click Create CredentialsOAuth client ID.
    1. On the following page, select the Application Type as Web application.
    2. Provide a suitable Name so you can identify it in your Google account. This is not required by {plugin}.
    3. Under the Authorized JavaScript origins, click Add URI and enter your project's Site URL.
    4. Under the Authorized redirect URIs, click Add URI and enter the value from the Redirect URI field in Social Login.
    5. Then click the Create button.
  6. Once created, a popup will appear with your OAuth credentials. Copy the Client ID and Client Secret values and paste into the fields below.
  7. Navigate to OAuth Consent Screen in the left-hand sidebar.
  8. Click the Publish App button and Confirm.

Local Testing Proxy#

Google requires your Craft install to be on a public domain with SSL enabled. However, you can test out login functionality by using the Proxy Redirect URI setting. What this does is modify the URL for the redirect to Verbb servers, to redirect back to your install.

For example, you might have a Redirect URI like the following:

http://my-site.test/social-login/auth/callback

Using this URL for Google won't work, as it'll detect .test is a non-public domain name. Using the Proxy Redirect URI will change the redirect URL to be:

https://formie.verbb.io?return=http://my-site.test/social-login/auth/callback

Here, it routes the request through to our Verbb servers, which forwards on the request to the URL in the return parameter (which would be your local project).

Previous ← GitHub Next Instagram →