Merge pull request #255 from ballerina-platform/dev

Improve setup guide
ballerina-platform · Nov 25, 2023 · 0b5efc7 · 0b5efc7
2 parents 42c3b79 + cf516c1
commit 0b5efc7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 36 deletions.
diff --git a/docs/setup/resources/consent-screen.png b/docs/setup/resources/consent-screen.png
diff --git a/docs/setup/setup.md b/docs/setup/setup.md
@@ -3,67 +3,66 @@
 _Owners_: @niveathika \
 _Reviewers_: @daneshk \
 _Created_: 2022/11/09 \
-_Updated_: 2023/11/13 \
+_Updated_: 2023/11/13  
 
 ## Introduction
 
-To utilize the Gmail connector, you must have access to the Gmail REST API through a [Google Cloud Platform (GCP)](https://console.cloud.google.com/) account and a project under it. If you do not have a GCP account, you can sign up for one [here](https://cloud.google.com/).
+To use the Gmail connector, you must have access to the Gmail REST API through a [Google Cloud Platform (GCP)](https://console.cloud.google.com/) account and a project under it. If you do not have a GCP account, you can sign up for one [here](https://cloud.google.com/).
 
-## Step 1: Create a Google Cloud Platform Project
+### Step 1: Create a Google Cloud Platform Project
 
-1. Open the [GCP Console](https://console.cloud.google.com/).
-2. Click on the project drop-down and either select an existing project or create a new one for which you want to add an API key.
+1. Open the [Google Cloud Platform Console](https://console.cloud.google.com/).
 
-    <div align="center">
-        <img src="resources/gcp-console-project-view.png" width="500">
-    </div>
+2. Click on the project drop-down menu and select an existing project or create a new one for which you want to add an API key.
 
-3. Navigate to the **Library** and enable the Gmail API.
+    ![GCP Console Project View](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/gcp-console-project-view.png)
 
-    <div align="center">
-        <img src="resources/enable-gmail-api.png" width="500">
-    </div>
+### Step 2: Enable Gmail API
 
-## Step 2: Create OAuth Client ID
+1. Navigate to the **Library** tab and enable the Gmail API.
+
+    ![Enable Gmail API](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/enable-gmail-api.png)
+
+### Step 3: Configure OAuth consent
+
+1. Click on the **OAuth consent screen** tab in the Google Cloud Platform console.
+
+    ![Consent Screen](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/consent-screen.png)
+
+2. Provide a name for the consent application and save your changes.
+
+### Step 4: Create OAuth client
 
 1. Navigate to the **Credentials** tab in your Google Cloud Platform console.
 
-2. Click  **Create credentials** and from the dropdown menu, select **OAuth client ID**.
+2. Click on **Create credentials** and select **OAuth client ID** from the dropdown menu.
 
-    <div align="center">
-        <img src="resources/create-credentials.png" width="500">
-    </div>
+    ![Create Credentials](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/create-credentials.png)
 
-3. You will be directed to the **OAuth consent** screen, in which you need to fill in the necessary information below.
+3. You will be directed to the **Create OAuth client ID** screen, where you need to fill in the necessary information as follows:
 
-    | Field                     | Value |
-    | ------------------------- | ----- |
-    | Application type          | Web Application |
-    | Name                      | GmailConnector  |
-    | Authorized redirect URIs  | https://developers.google.com/oauthplayground |
+    | Field                    | Value                |
+    | ------------------------ | -------------------- |
+    | Application type         | Web Application      |
+    | Name                     | GmailConnector       |
+    | Authorized Redirect URIs | https://developers.google.com/oauthplayground |
 
-    After filling in these details, click **Create**.
+4. After filling in these details, click on **Create**.
 
-    **Note**: Save the provided Client ID and Client secret.
+5. Make sure to save the provided Client ID and Client secret.
 
-## Step 3: Get the access token and refresh token
+### Step 5: Get the Access and Refresh token
 
 **Note**: It is recommended to use the OAuth 2.0 playground to obtain the tokens.
 
 1. Configure the OAuth playground with the OAuth client ID and client secret.
 
-    <div align="center">
-        <img src="resources/oauth-playground.png" width="500">
-    </div>
+    ![OAuth Playground](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/oauth-playground.png)
 
-2. Authorize the Gmail APIs.
+2. Authorize the Gmail APIs (Select all except the metadata scope).
 
-    <div align="center">
-        <img src="resources/authorize-apis.png" width="500">
-    </div>
+    ![Authorize APIs](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/authorize-apis.png)
 
 3. Exchange the authorization code for tokens.
 
-    <div align="center">
-        <img src="resources/exchange-tokens.png" width="500">
-    </div>
+    ![Exchange Tokens](https://raw.githubusercontent.com/ballerina-platform/module-ballerinax-googleapis.gmail/master/docs/setup/resources/exchange-tokens.png)