--- schema_version: "1" id: 000bbf4e0549a747ac31b5598fb70a5c5cee420ff23e7db664968b7b945dbfb8 title: Create an OAuth Connector collection: tableau version: next locale: en-us portal_url: https://docs.salesforce.com/tableau/next/en-us/api/webdataconnector/docs/wdc_create_oauth_connector.md canonical_url: https://help.tableau.com/v0.0/api/webdataconnector/en-us/docs/wdc_create_oauth_connector.html source_site: help.tableau.com content_type: documentation content_hash: e96bb3bfdb481b263797afe847fc5fc594f69673854f2ef63e946175d6df9c0d description: Documentation for the Tableau Web Data Connector --- **Deprecated** - This repository will be removed with the Tableau 26.3 release. The Web Data Connector 3.0 framework is deprecated and will not receive further updates. Migrate to the [REST API Connector on Tableau Exchange](https://exchange.tableau.com/products/1111)—built by Tableau, supports JSON and CSV over HTTP GET, Basic/Bearer/OAuth authentication, and runs on Tableau 2023.3 and later. Note: this connector is extract-only and requires a JDBC driver installation. # Create an OAuth Connector 🕐 _5 min read_ The OAuth boilerplate is a connector that ingests JSON data with [ingestDataRows](https://help.tableau.com/current/api/webdataconnector/en-us/reference/classes/handlers.FetchUtils.html#ingestDataRows) Fetch API and built-in TACO data parser. ## Use cases - React - OAuth - JSON - Paginated ingestion **Note**: The OAuth connector has a dependency on the OAuth support from Tableau. This connector can’t be running with the EPS standalone server. \`taco start\`\` won’t work with OAuth connector. ## Instructions To create your OAuth connector, we recommend that you first create a boilerplate OAuth connector and edit the generated files. It’s easier to get all the files and directory structure your connector needs by just using an existing example. To create your OAuth connector, do the following steps. ### Step 1: Create a boilerplate OAuth connector 1. Enter the following command to create the connector: ``` taco create my-oauth-connector --boilerplate oauth ``` This creates a directory with the earthquake data boilerplate code, which is included with the toolkit. 2. Change directories to the `my-oauth-connector` directory. ``` cd my-oauth-connector ``` 3. Build the connector by entering the following command: ``` taco build ``` This command clears any previous or existing build caches, then installs the dependencies, then builds the frontend code and the backend code (handlers), then copies the connector.json file (the configuration file). ### Step 2: Configure your connector’s properties In your new OAuth connector directory, find and open the `connector.json` file. ``` { "name": "my-oauth-connector", "displayName": "OAuth Sample Connector", "version": "1.0.0", "tableau-version": { "min": "2023.3" }, "vendor": { "name": "vendor-name", "support-link": "https://vendor-name.com", "email": "support@vendor-name.com" }, "auth": { "type": "oauth2", "oauth": { "clientIdDesktop": "[Your client id]", "clientSecretDesktop": "[Your client secret]", "redirectUrisDesktop": [ "http://localhost:55555/Callback" ], "authUri": "[Your auth URI]", "tokenUri": "[Your token URI]", "userInfoUri": "[Your API user info URI]", "scopes": [ "Scope 1", "Scope 2" ], "capabilities": { "OAUTH_CAP_FIXED_PORT_IN_CALLBACK_URL": true, "OAUTH_CAP_CLIENT_SECRET_IN_URL_QUERY_PARAM": true, "OAUTH_CAP_PKCE_REQUIRES_CODE_CHALLENGE_METHOD": true, "OAUTH_CAP_REQUIRE_PKCE": true }, "accessTokenResponseMaps": { "ACCESSTOKEN": "access_token", "REFRESHTOKEN": "refresh_token", "access-token-issue-time": "issued_at", "access-token-expires-in": "expires_in", "username": "username" } } }, "permission": { "api": { "https://*.example.com/": [ "GET", "POST" ] } }, "window": { "height": 900, "width": 770 } } ``` - Requires auth detail Make the following changes: 1. Change the general properties. | Name | Value | | --- | --- | | name | Your connector’s directory name | | displayName | Your connector’s name. This is the name that appears in the Tableau connectors area. | | version | Your connector’s version | | min | The earliest Tableau version your connector supports | 2. Change the company properties. | Name | Value | | --- | --- | | vendor.name | Your company name | | vendor.support-link | Your company’s URL | | vendor.email | Your company’s email | 3. Change the permissions. | Name | Value | | --- | --- | | permission.api | The URI for the API that the connector is allowed to access, along with the methods (POST, GET, PUT, PATCH, DELETE) that the connector is allowed to use. | 4. Set the authentication values. | Name | Value | | --- | --- | | auth.type | Set to `oauth2` | | auth.oauth | For configuration information, see [Configuring for OAuth](https://help.tableau.com/v0.0/api/webdataconnector/en-us/docs/wdc_dev_considerations.html#configuring-for-oauth) | For more information about authentication, see the Authentication section in the [Considerations for Building Your Connector](/v0.0/api/webdataconnector/en-us/docs/wdc_dev_considerations.html) topic. 5. Change the HTML pane size. | Name | Value | | --- | --- | | window.height | The height of the connector HTML pane | | window.width | The width of the connector HTML pane | ### Step 3: Edit the user interface When you open a web data connector in Tableau, the connector displays an HTML page that links to your code and to your connector’s handlers. Optionally, this page can also display a user interface (UI) for your users to select the data that they want to download. The `/app/components/ConnectorView.tsx` file is the main component for the connector UI. You can modify or replace this file based on your connector UI requirements. ### Step 4: Edit the connector object The `/app/components/useConnector.ts` file contains a custom React [hook](https://react.dev/learn/reusing-logic-with-custom-hooks) that abstracts common connector object operations. \* The hook creates a connector object. A component can: - Track the connector object state (for example, `isInitializing`) - Directly invoke the functions returned from the hook to interact with connector object (for example, `handleSubmit`) The following is the code in `userConnector.ts` file for the connector creation. ``` const [connector] = useState( () => new Connector( (connector: Connector) => { Logger.info('Connector initialized.') const oauthCredentials = connector.oAuthCredentials setConnectorState({ ...connectorState, oauthCredentials, isInitializing: false }) }, (_: Connector, error: Error) => { Logger.error(`Connector Initialized Error: ${error.message}`) setConnectorState({ ...connectorState, errorMessage: error.message, isInitializing: false }) } ) ) ``` ### Step 5: Update the fetcher file If your data is complex and needs preprocessing, use the TACO Toolkit library to prepare your data. The following is the default code that the `/handlers/DataFetcher.ts` file uses to get the data: ``` import { Fetcher, FetchUtils, FetchOptions, DataRow, getOAuthHeader } from '@tableau/taco-toolkit/handlers' interface User { id: string name: string address: { street: string; state: string; country: string } } export default class DataFetcher extends Fetcher { async *fetch({ secrets }: FetchOptions) { // PLACEHOLDER: the url is NOT real endpoint. // Replace them with actual endpoint for corresponding file type. // Note: the permission setting in connector.json also needs to be updated accordingly. const url = 'https://www.example.com/api/user' const headers = getOAuthHeader(secrets) const users = await FetchUtils.fetchJson(url, { headers }) // Convert JSON response into DataRow[] type const rows: DataRow[] = users.map((user: User) => { const { id, name, address: { street, state, country }, } = user return { id, name, street, state, country } }) yield await FetchUtils.ingestDataRows(rows) } } ``` ### Step 6: Build your connector Enter these commands to build, pack, and run your new connector: ``` taco build ``` ``` taco pack ``` ``` taco run Desktop ```