diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-choose-project.png b/src/essentials-for-yootheme-pro/auths/assets/google/google-choose-project.png new file mode 100644 index 0000000..4011618 Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-choose-project.png differ diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-cloud-console.png b/src/essentials-for-yootheme-pro/auths/assets/google/google-cloud-console.png new file mode 100644 index 0000000..e6f3a3b Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-cloud-console.png differ diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-custom-oauth.webp b/src/essentials-for-yootheme-pro/auths/assets/google/google-custom-oauth.webp new file mode 100644 index 0000000..cf0bcb9 Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-custom-oauth.webp differ diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-enable-apis.png b/src/essentials-for-yootheme-pro/auths/assets/google/google-enable-apis.png new file mode 100644 index 0000000..d7ec1d7 Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-enable-apis.png differ diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-client-id.png b/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-client-id.png new file mode 100644 index 0000000..1ae680f Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-client-id.png differ diff --git a/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-consent-screen.png b/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-consent-screen.png new file mode 100644 index 0000000..4358674 Binary files /dev/null and b/src/essentials-for-yootheme-pro/auths/assets/google/google-oauth-consent-screen.png differ diff --git a/src/essentials-for-yootheme-pro/auths/custom-google-dev-app.md b/src/essentials-for-yootheme-pro/auths/custom-google-dev-app.md new file mode 100644 index 0000000..2a60275 --- /dev/null +++ b/src/essentials-for-yootheme-pro/auths/custom-google-dev-app.md @@ -0,0 +1,95 @@ +# Custom Google Dev App + +Learn how to create a custom Google Dev App and get your own oAuth credentials. Once ready, you can use the resulting _Access Token_ into the respective [Google Auth](./drivers#google-auth-driver) driver to authenticate. + +This process is covered in great extens by the [Google official guide](https://developers.google.com/identity/protocols/oauth2/web-server) while next step will try to summarize it. + +## 1. Create Google Cloud Project + +Login with your Google account to the [Google Cloud Console](https://cloud.google.com/cloud-console/) and create and/or choose a project where to manage the custom oAuth credentials. + +![Google Cloud Console](./assets/google/google-cloud-console.png) + +## 2. Enable Google APIs + +Go to the [Google Cloud Console API Libraries](https://console.cloud.google.com/apis/library) and enable the APIs you need. For example, for Google Sheets enable the _Google Sheets API_, for YouTube the _YouTube Data API_, etc. + +![Choose project](./assets/google/google-choose-project.png) + +![Enable APIs](./assets/google/google-enable-apis.png) + +::: tip +You can either create one project for each API, or a single-project for every API. It's up to you and your security policies. +::: + +## 3. Create oAuth Consent Screen + +Go to the console [oAuth Consent Screen Page](https://console.developers.google.com/apis/credentials/consent) and choose _Internal_ as the User Type. Follow through the form to fullfill all the necessary data. + +![Google oAuth Consent Screen](./assets/google/google-oauth-consent-screen.png) + +In the scopes section you would usually match the scopes for the APIs you have enabled previously. Refer to the following table as the scopes required by Essential addons. + +| Scope | Addon | +|--------|-------| +| https://www.googleapis.com/auth/youtube.readonly | Youtube Source | +| https://www.googleapis.com/auth/business.manage | Google Business Profile Source. | +| https://www.googleapis.com/auth/drive.readonly | Google Sheets Source and Google Sheets Form Action | +| https://www.googleapis.com/auth/spreadsheets | Google Sheets Source and Google Sheets Form Action | +| https://www.googleapis.com/auth/calendar.readonly | Google Calendar Source | +| https://www.googleapis.com/auth/calendar.events.readonly | Google Calendar Source | +| https://www.googleapis.com/auth/photoslibrary.readonly | Google Photos Source | + +## 4. Create oAuth Client ID + +Go to the console [Credentials Page](https://console.developers.google.com/apis/credentials) and create an _oAuth Client ID_. Select _Web Application_ and set a name. For the URL, input your site one or any URL you want to set as authorized. + +Once created, copy the `Redirect URI`, `Client ID` and `Client Secret` parameters. + +![Google oAuth Client ID](./assets/google/google-oauth-client-id.png) + +## 5. Generate Refresh Token + +Through your browser, visit the following URL, replacing the placeholders with parameters from the previous steps. + +```html +https://accounts.google.com/o/oauth2/v2/auth?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=code&access_type=offline&state=state&scope={LIST_OF_SCOPES} +``` + +::: tip +If there are multiple scopes, separate them with a comma. +::: + +You will get redirected back to the _REDIRECT_URI_ with a `code` parameter in the URL, for example `https://example.com/?code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7`. Copy that `code` value. + +Through an HTTP client like [Postman](https://www.postman.com/), or your terminal using CURL, make a post request like the following one, once again, replacing the placeholders. + +```curl +POST /token HTTP/1.1 +Host: oauth2.googleapis.com +Content-Type: application/x-www-form-urlencoded + +code={CODE} +client_id={CLIENT_ID}& +client_secret={CLIENT_SECRET}& +redirect_uri={REDIRECT_URI}& +grant_type=authorization_code +``` + +You should get back a JSON response that contains the `refresh_token` you need, for example: + +```json +{ + "access_token": "1/fFAGRNJru1FTz70BzhT3Zg", + "expires_in": 3920, + "token_type": "Bearer", + "scope": "https://www.googleapis.com/auth/drive.metadata.readonly", + "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI" +} +``` + +## 6. Authenticate + +When creating a Source or Action that requires Google Authentication choose Custom App and fill in the details using the `Client ID`, `Client Secret` and `Refresh Token` obtained in the previous steps. + +![Google Custom OAuth](./assets/google/google-custom-oauth.webp) diff --git a/src/essentials-for-yootheme-pro/sidebar.json b/src/essentials-for-yootheme-pro/sidebar.json index 94268a0..3da0d14 100644 --- a/src/essentials-for-yootheme-pro/sidebar.json +++ b/src/essentials-for-yootheme-pro/sidebar.json @@ -204,6 +204,10 @@ "text": "Custom Facebook Dev App", "link": "/auths/custom-facebook-dev-app" }, + { + "text": "Custom Google Dev App", + "link": "/auths/custom-google-dev-app" + }, { "text": "Form Events", "link": "/addons/forms/form-events"