Stay organized with collections
Save and categorize content based on your preferences.
For example, let's assume developer X has a web application for their clients.
Clients log in to the app using their own credentials and can view sales data
for different stores. Each client has access to a different list of stores. The
developer would like to embed a Looker Studio dashboard in their application so
that when a client logs in, the client sees only the sales data for the stores
they have access to. Clients should not have to log into their Google account
for this process to work.
The proposed solution will need the developer to create a Community Connector,
pass a token through the embed URL, and then filter data based on the token.
Requirements
Dashboard viewers will log in to the third-party application.
The application should pass a unique token to the Looker Studio dashboard
through embed URL. The token can either be used to lookup filter information
or have the filter information encrypted within.
The Community Connector should be able to convert the token into the filter
values.
Limitations
If you are a G Suite customer and your administrator has disabled sharing
Drive files to “Anyone with a Link”, you will not be able to share the
report with users outside your organization.
Solution
Complete all the following steps to implement the solution.
Generate user token in web app
Generate a unique token for each logged-in user in your web application.You will
be passing this token to the embedded dashboard in a later step.
You should use the token to filter relevant data. Options include:
Create an API endpoint which return filtered data or the user information
for a specific token.
Encrypt the user information in the token so that it can be decrypted later
in the connector.
getConfig() should return at least one config item. This will be used to
capture a token from embed URL's parameters.
functiongetConfig(request){varcc=DataStudioApp.createCommunityConnector();varconfig=cc.getConfig();config.newTextInput().setId('token').setName('Enter user token');// TODO: Add additional config values if applicable for your connectorconfig.setDateRangeRequired(false);config.setIsSteppedConfig(false);returnconfig.build();}
getData() will have access to the token through the
request.configParams object. Use the token to fetch filtered data or
filter existing fetched data.
Following the above example, the token would be
request.configParams.token. In getData(), the token is passed to a REST
API end-point to get a list of Store Ids. These Store Ids are then used
to construct the SQL query to fetch sales data.
varSTORE_ID_API='https://www.example.com/api/storeid';varQUERY_STRING_PREFIX="SELECT StoreName, Sales from stores"functiongetData(request){vartoken=request.configParams.token;varstoreIds=getStoreIdList(token);varqueryString=constructQueryString(storeIds);varfetchedData=fetchData(queryString);// rest of getData() implementation}functiongetStoreIdList(token){varurl=STORE_ID_API;varresponse=UrlFetchApp.fetch(url);varparsedResponse=JSON.parse(response);returnparsedResponse.storeIds;}functionconstructQueryString(storeIds){varstoreIdString=storeIds.join(',');varqueryString=QUERY_STRING_PREFIX+' WHERE storeId in ('+storeIdString+')';returnqueryString;}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-18 UTC."],[[["\u003cp\u003eEmbed Looker Studio dashboards in third-party applications, allowing clients to view relevant data without Google logins.\u003c/p\u003e\n"],["\u003cp\u003eSecurely filter data using unique, short-lived tokens passed through the embed URL, fetched by a custom Community Connector.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers need to create a Community Connector, handle token generation and data filtering, and configure Looker Studio sharing settings for embedding.\u003c/p\u003e\n"],["\u003cp\u003eTokens can either directly contain encrypted filter information or be used to retrieve it from an API endpoint, enhancing data security.\u003c/p\u003e\n"],["\u003cp\u003eG Suite users need to ensure Drive sharing is enabled for "Anyone with a Link" for external access to the embedded dashboard.\u003c/p\u003e\n"]]],[],null,["| **Objective:** A viewer of an embedded dashboard on a third-party platform will see only the data relevant for them, without the user logging into their Google account.\n\nFor example, let's assume developer X has a web application for their clients.\nClients log in to the app using their own credentials and can view sales data\nfor different stores. Each client has access to a different list of stores. The\ndeveloper would like to embed a Looker Studio dashboard in their application so\nthat when a client logs in, the client sees only the sales data for the stores\nthey have access to. Clients should not have to log into their Google account\nfor this process to work.\n\nThe proposed solution will need the developer to create a Community Connector,\npass a token through the embed URL, and then filter data based on the token.\n\nRequirements\n\n- Dashboard viewers will log in to the third-party application.\n- The application should pass a unique token to the Looker Studio dashboard through embed URL. The token can either be used to lookup filter information or have the filter information encrypted within.\n- The Community Connector should be able to convert the token into the filter values.\n\nLimitations\n\n- If you are a G Suite customer and your administrator has disabled sharing Drive files to \"Anyone with a Link\", you will not be able to share the report with users outside your organization.\n\nSolution\n\nComplete all the following steps to implement the solution.\n\nGenerate user token in web app\n\nGenerate a unique token for each logged-in user in your web application.You will\nbe passing this token to the embedded dashboard in a later step.\n\nYou should use the token to filter relevant data. Options include:\n\n- Create an API endpoint which return filtered data or the user information for a specific token.\n- Encrypt the user information in the token so that it can be decrypted later in the connector.\n\nCreate a new Community Connector\n\nReview [How Community Connectors Work](https://youtu.be/1u1wOD3RjSA?list=PLIivdWyY5sqLNJttHVnNtjKVgt2PGF4Js&t=15) and complete the\n[Community Connector Codelab](/looker-studio/connector/get-started) to get started. Use the\n[Local development tooling for creating connectors](/looker-studio/connector/local-development) for a faster and easier\ndevelopment process.\n\nWrite the connector code\n\n1. [`getConfig()`](/looker-studio/connector/reference#getconfig) should return at least one config item. This will be used to\n capture a token from embed URL's parameters.\n\n **Caution:** You should not pass user credentials via this method. \n\n function getConfig(request) {\n var cc = DataStudioApp.createCommunityConnector();\n var config = cc.getConfig();\n\n config\n .newTextInput()\n .setId('token')\n .setName('Enter user token');\n\n // TODO: Add additional config values if applicable for your connector\n\n config.setDateRangeRequired(false);\n config.setIsSteppedConfig(false);\n\n return config.build();\n }\n\n2. [`getData()`](/looker-studio/connector/reference#getData) will have access to the token through the\n `request.configParams` object. Use the token to fetch filtered data or\n filter existing fetched data. \n\n Following the above example, the token would be\n `request.configParams.token`. In `getData()`, the token is passed to a REST\n API end-point to get a list of *Store Ids* . These *Store Ids* are then used\n to construct the SQL query to fetch sales data.\n\n var STORE_ID_API = 'https://www.example.com/api/storeid';\n var QUERY_STRING_PREFIX = \"SELECT StoreName, Sales from stores\"\n\n function getData(request) {\n var token = request.configParams.token;\n\n var storeIds = getStoreIdList(token);\n var queryString = constructQueryString(storeIds);\n var fetchedData = fetchData(queryString);\n\n // rest of getData() implementation\n }\n\n function getStoreIdList(token) {\n var url = STORE_ID_API;\n var response = UrlFetchApp.fetch(url);\n var parsedResponse = JSON.parse(response);\n return parsedResponse.storeIds;\n }\n\n function constructQueryString(storeIds) {\n var storeIdString = storeIds.join(',');\n var queryString = QUERY_STRING_PREFIX\n + ' WHERE storeId in ('\n + storeIdString\n + ')';\n return queryString;\n }\n\nCreate the dashboard\n\n1. Understand how [deployments and versions](/looker-studio/connector/deploy) work for connectors.\n2. [Create a production deployment](/looker-studio/connector/deploy) for the connector.\n3. Use the Production deployment link to create a data source and a report in Looker Studio.\n4. For the `token` config parameter, [Allow report viewers to modify parameter values](/looker-studio/connector/data-source-parameters#allow_report_viewers_to_modify_parameters_values).\n5. [Share the dashboard](/looker-studio/connector/View%20only) with selected users or with \"Anyone with link\".\n6. [Enable embedding](https://support.google.com/looker-studio/answer/7450249) for the report.\n\nEmbed the dashboard in your platform\n\n1. Understand how [Report URL parameters](/looker-studio/connector/data-source-parameters#set_url_parameters) work.\n2. Pass the dynamically generated token value using URL parameters to the embedded Looker Studio report. \n Your embed url will look similar to this: \n\n ```scdoc\n `https://lookerstudio.google.com/embed/reporting/REPORT_ID/page/PAGE_ID?config=%7B%22ds0%22%3A%7B%22token%22%3A%22TOKEN_VALUE%22%7D%7D\n ```\n\nRecommendations\n\n- You should create a **short-lived** token.\n- Ensure the dashboard does not leak any information with viewed with an invalid token."]]