docs: add google integration (#4382)
* docs: Add Google OAuth Integrations Docs
- Added documentation teaching how to configure an application using Google's OAuth API to use the components present in Langflow. Example: (Google Drive Loader, Google Drive Search and Gmail Loader).
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* docs: Updated the json available for download with the example flow
- Updated the json available for download with the example flow for using OAuth permissions in Langflow.
- Modified the existing Google Oauth Token component in Flow, with corrections and updates from component.
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* cleanup-style
* url
* docs: Add Google OAuth Integrations Docs
- Added documentation teaching how to configure an application using Google's OAuth API to use the components present in Langflow. Example: (Google Drive Loader, Google Drive Search and Gmail Loader).
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* docs: Updated the json available for download with the example flow
- Updated the json available for download with the example flow for using OAuth permissions in Langflow.
- Modified the existing Google Oauth Token component in Flow, with corrections and updates from component.
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* cleanup-style
* url
* fix: Updated Google Oauth Token component in flow example
- The component code has been updated to resolve lint issues and improve performance as per commit example:
https://github.com/langflow-ai/langflow/pull/4383/commits/4df070f6e23a323114930e3e1dce500df7368353
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* docs: apply reviewer’s suggestions for documentation clarity
- Corrected grammar and improved readability as per GitHub review feedback
Co-authored-by: Vinícios Batista da Silva <vinicios.batsi@gmail.com>
* update-gif-new-workflow
* style-and-test
* Apply suggestions from code review
Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
---------
Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
This commit is contained in:
Vinícios Batista da Silva
GitHub
parent
3fd4a61310
commit
32554b4b93
5 changed files with 41 additions and 137 deletions
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Setup Google OAuth for Langflow Integration"
|
||||
title: Integrate Google OAuth with Langflow
|
||||
slug: /integrations-setup-google-oauth-langflow
|
||||
sidebar_position: 3
|
||||
description: "A comprehensive guide on creating a Google OAuth app, obtaining tokens, and integrating them with Langflow's Google components."
|
||||
|
|
@ -7,159 +7,63 @@ description: "A comprehensive guide on creating a Google OAuth app, obtaining to
|
|||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
# Setting Up Google OAuth for Langflow
|
||||
Langflow integrates with [Google OAuth](https://developers.google.com/identity/protocols/oauth2) for authenticating the [Gmail loader](/components-data#gmail-loader), [Google Drive loader](components-data#google-drive-loader), and [Google Drive Search](/components-data#google-drive-search) components.
|
||||
|
||||
Quickly set up Google OAuth to integrate Google Gmail and Drive with Langflow. To do this, create an OAuth app in Google Cloud, obtain the necessary credentials and access tokens, and add them to Langflow’s Google components.
|
||||
Learn how to create an OAuth app in Google Cloud, obtain the necessary credentials and access tokens, and add them to Langflow’s Google components.
|
||||
|
||||
# Overview
|
||||
## Create an OAuth Application in Google Cloud {#5b8981b15d86192d17b0e5725c1f95e7}
|
||||
|
||||
Langflow supports OAuth for seamless integration with Google services. Just follow the setup steps to configure OAuth credentials, retrieve tokens, and connect your Google services to Langflow.
|
||||
1. Navigate to the [Google Cloud Console](https://console.cloud.google.com/).
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Creating an OAuth Application in Google Cloud {#5b8981b15d86192d17b0e5725c1f95e7}
|
||||
|
||||
1. **Access Google Cloud Console**
|
||||
|
||||
- Go to the [Google Cloud Console](https://console.cloud.google.com/).
|
||||
|
||||
2. **Create or Select a Project**
|
||||
|
||||
- Click **Select a project** at the top of the page and choose an existing project or create a new one.
|
||||
2. Click **Select a project**, and then click **New Project** to create a new project.
|
||||
|
||||
|
||||
|
||||
3. **Enable APIs for the Project**
|
||||
3. To enable APIs for the project, select **APIs & Services**, and then click **Library**. Enable the APIs you need for your project. For example, if your flow uses the Google Drive component, enable the Google Drive API.
|
||||
4. To navigate to the OAuth consent screen, click **APIs & Services**, and then click **OAuth consent screen**.
|
||||
5. Populate your OAuth consent screen with the application name, user support email, required [scopes](https://developers.google.com/identity/protocols/oauth2/scopes), and authorized domains.
|
||||
6. To create an **OAuth Client ID**, navigate to **Clients**, and then click **Create Client**.
|
||||
7. Choose **Desktop app** as the application type, and then name your client ID.
|
||||
8. Click **Create**. A Client ID and Client Secret are created. Download the credentials as a JSON file to your local machine and save it securely.
|
||||
|
||||
- Go to **APIs & Services > Library** and enable the APIs you need (e.g., Google Drive API, Google Gmail API).
|
||||
|
||||
|
||||
4. **Navigate to OAuth consent screen**
|
||||
- Go to **APIs & Services >** and click on **OAuth consent screen**.
|
||||
5. **Set Up OAuth Consent Screen**
|
||||
---
|
||||
|
||||
- On the OAuth consent screen, set up essential app details like the application name, user support email, required [scopes](https://developers.google.com/identity/protocols/oauth2/scopes) (permissions your app needs), and authorized domains.
|
||||
- Ensure you **publish** the app if it’s not restricted to internal use.
|
||||
## Retrieve Access and Refresh Tokens
|
||||
|
||||
|
||||
With your OAuth application configured and your credentials JSON file created, follow these steps to authenticate the Langflow application.
|
||||
|
||||
1. Create a new project in Langflow.
|
||||
2. Add a **Google OAuth Token** component to your flow.
|
||||
3. In the **Credentials File** field of the Google OAuth Token component, enter the path to your **Credentials File**, the JSON file containing the Client ID credentials you downloaded from Google in the previous steps.
|
||||
4. To authenticate your application, in the **Google OAuth Token** component, click **Play**.
|
||||
A new tab opens in the browser to authenticate your application using your Google Cloud account. You must authenticate the application with the same Google account that created the OAuth credentials.
|
||||
|
||||
:::info
|
||||
If a new tab does not open automatically, check the Langflow **Logs** for the Google authentication URL. Open this URL in your browser to complete the authentication.
|
||||
:::
|
||||
|
||||
- Configuring the OAuth consent screen is crucial for obtaining user permissions.
|
||||
5. After successful authentication, your Langflow application can now request and refresh tokens. These tokens enable Langflow to interact with Google services on your behalf and execute the requests you’ve specified.
|
||||
|
||||
::::
|
||||
## Create a flow with Google Drive loader
|
||||
|
||||
6. **Create OAuth Client ID**
|
||||
For a pre-built JSON file of a flow that uses the Google Drive loader component, download the <a href="./files/Google_Drive_Docs_Translations_Example.json" download>Google Drive Document Translation Example Flow JSON</a> to your local machine.
|
||||
|
||||
- Go back to **Credentials**, select **Create Credentials > OAuth Client ID**.
|
||||
- Choose **Desktop app** as the application type.
|
||||
In this example, the **Google Drive loader** component loads a text file hosted on Google Drive, translates the text to Spanish, and returns it to a chat output.
|
||||
|
||||
7. **Save OAuth Client ID and Client Secret**
|
||||
1. Download the <a href="./files/Google_Drive_Docs_Translations_Example.json" download>Google Drive Document Translation Example Flow JSON</a> to your local machine.
|
||||
2. To import the downloaded JSON to Langflow, click **Options**, and then select **Import**.
|
||||
3. In the **Credentials File** field of the Google OAuth Token component, enter the path to your **Credentials File**, the JSON file containing the Client ID credentials you downloaded from Google in the previous steps.
|
||||
4. In the Google Drive loader component, in the `JSON String of the Service Account Token` field, enter the JSON string containing the token returned in the output of the Google OAuth Token component.
|
||||
|
||||
- After creating, you'll receive a Client ID and Client Secret. You can either view them directly or download them as a JSON file. Please download and save this information securely, as it's essential for using Langflow.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Retrieving Access and Refresh Tokens
|
||||
|
||||
With your OAuth application configured and with your Client ID created, follow these steps to obtain the tokens:
|
||||
|
||||
1. **Authenticate the Application**
|
||||
|
||||
- Create a new project in Langflow.
|
||||
- Add a Google OAuth Token component.
|
||||
- Input in the field **Credentials File** on the Google OAuth Token component, the JSON file containing the Client ID credentials you downloaded from Google in the [previous steps](#5b8981b15d86192d17b0e5725c1f95e7).
|
||||
- Run the Google OAuth Token component to authenticate your application.
|
||||
The example flow includes a **Parse data** component to convert the `data` output of the Google OAuth Token component to the `text` input of the JSON Cleaner component.
|
||||
|
||||
5. To allow the Langflow component to access the file in Google Drive, copy the Google Drive File ID from the document's URL.
|
||||
:::info
|
||||
|
||||
- Note that when the component is executed, a new tab maybe open in the browser so that you can authenticate using your Google Cloud account where you created the project containing the OAuth Application, the credentials and activated the API that you need to use.
|
||||
- If a new tab does not open automatically, check the Langflow **Logs** for the Google authentication URL. Open this URL in your browser to complete the authentication. Only after authenticating will the JSON token be generated.
|
||||
|
||||
:::
|
||||
|
||||
2. **Refresh Tokens**
|
||||
|
||||
- After successful authentication, your Langflow application can request and refresh tokens for your app. These tokens will enable Langflow to interact with Google services on your behalf and execute the requests you’ve specified.
|
||||
- By default, token validity is managed by Google’s servers. In Langflow, tokens refresh automatically after initial authentication. However, if your application is inactive for an extended period, the tokens may expire, requiring you to re-authenticate to resume use in Langflow.
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Configuring Google Components in Langflow
|
||||
|
||||
In this example, we will use the Google Drive Loader component to load a text file hosted on Google Drive, translate the text in it to Spanish, and return it to a chat output.
|
||||
|
||||
1. **Open Langflow and Add Google Drive Loader Component**
|
||||
|
||||
- In Langflow, go to your flow editor and add a **Google Drive Loader** component.
|
||||
|
||||
2. **Enter OAuth Credentials**
|
||||
|
||||
- In the `JSON String of the Service Account Token` or `Token String` field of the Google Drive Loader component, enter your JSON string containing the token returned in the output of the Google OAuth Token component. Remember to convert the data output from the Google OAuth Token component to text using the `Parse Data` component.
|
||||
|
||||
3. **Getting File ID from Google Drive**
|
||||
|
||||
Steps to Obtain the Google Drive File ID from a URL:
|
||||
|
||||
1. **Copy the Google Drive URL:**
|
||||
|
||||
- Open the document in Google Drive and copy the link from the address bar.
|
||||
|
||||
2. **Identify the Document ID:**
|
||||
|
||||
- The file ID is located between `/d/` and `/edit` in the URL. Example:
|
||||
|
||||
```
|
||||
https://drive.google.com/file/d/1a2b3c4D5E6F7gHI8J9klmnopQ/edit
|
||||
```
|
||||
|
||||
Here, the ID is `1a2b3c4D5E6F7gHI8J9klmnopQ`.
|
||||
|
||||
3. **Enter the ID in the Component:**
|
||||
|
||||
- In Langflow, paste the copied ID to field Document ID in Google Drive Loader component to allow the component to access the file.
|
||||
|
||||
4. **Test the Connection**
|
||||
|
||||
- After adding credentials and Document ID, test the component’s functionality within your flow to ensure a successful connection.
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Using Google Components in Your Flow
|
||||
|
||||
With OAuth successfully configured, you can now use Google components in Langflow to automate tasks:
|
||||
|
||||
- **Gmail Loader**
|
||||
Loads emails from Gmail using the provided credentials.
|
||||
- **Google Drive Loader**
|
||||
Loads documents from Google Drive using provided credentials.
|
||||
- **Google Drive Search**
|
||||
Searches Google Drive files using provided credentials and query parameters.
|
||||
|
||||
Each component will utilize your OAuth tokens to perform these actions seamlessly.
|
||||
|
||||
## Flow Example
|
||||
|
||||
You can use the Flow below as a starting example for your tests.
|
||||
|
||||
- Flow Google Drive Docs Translations Example -
|
||||
(<a href="./files/Google_Drive_Docs_Translations_Example.json" download>Download link</a>)
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Common Issues
|
||||
|
||||
- **Token Expiration**: Ensure to refresh your tokens periodically if you encounter authentication errors.
|
||||
- **Permission Errors**: Double-check your OAuth consent settings and scopes in your Google Cloud account as well as in your Langflow component settings to ensure you’ve granted the necessary permissions.
|
||||
- **A new window for authentication did not open?**: Don't worry, you can check the Langflow Logs and look for the following text below.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
Please visit this URL to authorize this application: https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=156549873216-fa86b6a74ff8ee9a69d2b98e0bc478e8.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A54899%2F&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.readonly&state=75gxTJWwpUZjSWeyWDL81BmJAzGt1Q&access_type=offline
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
By following these steps, your Langflow environment will be fully integrated with Google services, providing a powerful tool for automating workflows that involve Google Gmail, Drive, and more.
|
||||
The file ID is located between `/d/` and `/edit` in a Google Drive document's URL.
|
||||
For example, in the URL `https://drive.google.com/file/d/1a2b3c4D5E6F7gHI8J9klmnopQ/edit`, the File ID is `1a2b3c4D5E6F7gHI8J9klmnopQ`.
|
||||
:::
|
||||
6. In the Google Drive loader component, in the **Document ID** field, paste the document URL.
|
||||
7. Click the **Chat output** component, and then click **Play**.
|
||||
The chat output should display a translated document.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
BIN
docs/static/img/google/create-oauth-client-id.gif
vendored
Normal file
BIN
docs/static/img/google/create-oauth-client-id.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 946 KiB |
BIN
docs/static/img/google/create-oauth-client-id.png
vendored
BIN
docs/static/img/google/create-oauth-client-id.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
Loading…
Add table
Add a link
Reference in a new issue