jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

docs: test and update google oauth integration (#6949)

Browse source 
* update-template

* update-integration-doc

* document-id

* Apply suggestions from code review

Co-authored-by: brian-f <brian.fisher@datastax.com>

---------

Co-authored-by: brian-f <brian.fisher@datastax.com>
This commit is contained in:
Mendon Kissling 2025-03-13 17:24:48 -04:00 • committed by GitHub
commit a8f6ee4af9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 1836 additions and 1596 deletions
Download patch file Download diff file Expand all files Collapse all files

42
docs/docs/Integrations/Google/integrations-setup-google-oauth-langflow.md
View file

@ -21,15 +21,22 @@ Learn how to create an OAuth app in Google Cloud, obtain the necessary credentia
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.
5. Populate your OAuth consent screen with the application name, audience, and user support email.
For audience, select **External**.
This creates a testing application environment that you can add users to.
6. To add users to your OAuth audience, click **Audience**.
Under **Test users**, click **Add users**.
Enter any email addresses you intend to use to authenticate Langflow with OAuth.
These email addresses have access to the application while it's in a **Testing** publishing state.
For more information, see the [Google documentation](https://support.google.com/cloud/answer/13461325?hl=en).
7. To create an **OAuth Client ID**, navigate to **Clients**, and then click **Create Client**.
8. Choose **Desktop app** as the application type, and then name your client ID.
9. 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.
![OAuth Client ID and Secret](/img/google/create-oauth-client-id.gif)
---
## Retrieve Access and Refresh Tokens
With your OAuth application configured and your credentials JSON file created, follow these steps to authenticate the Langflow application.
@ -37,14 +44,18 @@ With your OAuth application configured and your credentials JSON file created, f
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**.
4. In the **Scopes** field of the Google Oauth Token component, enter the scope required to access your resources.
For example, to allow your Langflow application to access a user's Google Drive, the scope is `https://www.googleapis.com/auth/drive`.
For more information, see the [Google documentation](https://developers.google.com/identity/protocols/oauth2/scopes).
5. 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.
:::
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.
6. After successful authentication, your Langflow application can request and refresh tokens.
These tokens enable Langflow to interact with Google services on your behalf and execute your specified requests.
## Create a flow with Google Drive loader
@ -55,15 +66,14 @@ In this example, the **Google Drive loader** component loads a text file hosted
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.
4. In the **Scopes** field of the Google Oauth Token component, enter the scope required to access your resources.
For example, to allow your Langflow application to access a user's Google Drive, the scope is `https://www.googleapis.com/auth/drive`.
For more information, see the [Google documentation](https://developers.google.com/identity/protocols/oauth2/scopes).
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.
5. To allow the Langflow component to access the document in Google Drive, copy the Google Drive `documentID` from the document's URL.
:::info
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`.
The `documentID` 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 `documentID` 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.
7. To view the translated document, open the **Playground**.

1810
docs/static/files/Google_Drive_Docs_Translation_Example.json vendored Normal file
View file

File diff suppressed because one or more lines are too long

1580
docs/static/files/Google_Drive_Docs_Translations_Example.json vendored
View file

File diff suppressed because one or more lines are too long