Tableau Web Data Connector实战案例Foursquare OAuth认证与数据可视化全流程【免费下载链接】webdataconnectorBring the data you care about into Tableau项目地址: https://gitcode.com/gh_mirrors/we/webdataconnectorTableau Web Data ConnectorWDC是一个强大的工具能够将您关心的数据引入Tableau进行分析和可视化。本教程将带您逐步实现一个完整的Foursquare OAuth认证与数据可视化流程从创建Foursquare应用到在Tableau中展示您喜欢的场地数据。什么是Foursquare OAuth认证OAuth是一种安全的授权协议允许第三方应用如我们的Tableau WDC在不获取用户密码的情况下访问用户在特定服务如Foursquare上的资源。Foursquare是一个流行的地理位置服务平台用户可以通过它发现和分享场所信息。通过OAuth认证我们的WDC可以安全地获取用户在Foursquare上喜欢的场地数据并将其导入Tableau进行分析。Foursquare OAuth认证流程以下是Foursquare OAuth认证的完整流程用户访问我们的WDC应用WDC应用重定向用户到Foursquare登录页面用户在Foursquare上登录并授权我们的应用Foursquare重定向回我们的应用并附带授权码我们的服务器使用授权码和客户端密钥向Foursquare请求访问令牌Foursquare返回访问令牌服务器将访问令牌存储在浏览器cookie中WDC应用使用访问令牌从Foursquare获取用户数据准备工作在开始之前您需要完成以下准备工作确保您已安装Node.js和npm克隆仓库git clone https://gitcode.com/gh_mirrors/we/webdataconnector进入项目目录cd webdataconnector步骤1创建Foursquare应用要使用Foursquare API您需要先创建一个Foursquare应用访问Foursquare开发者网站https://foursquare.com/developers/apps登录您的Foursquare账号如果没有请先注册点击Create New App按钮填写应用信息包括名称、描述和网站URL在Redirect URI字段中输入http://localhost:3333/redirect提交表单后您将获得客户端IDClient ID和客户端密钥Client Secret请妥善保存这些信息步骤2设置本地开发环境接下来我们将设置本地开发环境进入Examples目录cd Examples创建一个新的目录用于我们的Foursquare WDCmkdir FoursquareWDC进入新目录cd FoursquareWDC复制OAuthProxyExample中的文件cp ../OAuthProxyExample/{app.js,config.js,package.json} .创建public目录mkdir public安装依赖npm install步骤3配置服务器现在我们需要配置服务器以使用我们的Foursquare应用凭据编辑config.js文件// Contains credentials for your Foursquare application module.exports { CLIENT_ID: YOUR_CLIENT_ID, // 替换为您的Foursquare客户端ID CLIENT_SECRET: YOUR_CLIENT_SECRET, // 替换为您的Foursquare客户端密钥 HOSTPATH: http://localhost, PORT: 3333, REDIRECT_PATH: /redirect };步骤4创建前端界面我们需要创建一个简单的前端界面让用户能够登录Foursquare并获取数据进入public目录cd public创建index.html文件!DOCTYPE html html head titleFoursquare Connector/title link relstylesheet hrefhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css script srchttps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js/script script srchttps://connectors.tableau.com/libs/tableauwdc-2.3.0.js typetext/javascript/script script srcfoursquare.js typetext/javascript/script style body { margin: 20px; } .notsignedin { display: block; } .signedin { display: none; } #connectbutton { margin-top: 20px; } /style /head body div classcontainer h1Foursquare Venue Likes Connector/h1 div classnotsignedin pYou are not signed in, please click below to sign in to your Foursquare account./p a href# idconnectbuttonimg src./foursquare_connect.png altLogin with Foursquare//a /div div classsignedin pYou are signed in. Click the button below to get your liked venues./p button idgetvenuesbutton classbtn btn-primaryGet My Liked Venues/button /div /div /body /html复制Foursquare连接按钮图片cp ../../OAuthProxyExample/public/foursquare_connect.png .步骤5实现WDC逻辑现在我们将创建foursquare.js文件来实现WDC的核心逻辑(function() { // 配置信息 const clientId YOUR_CLIENT_ID; // 替换为您的客户端ID const redirectUri http://localhost:3333/redirect; const authUrl https://foursquare.com/oauth2/authenticate; const version 20180323; // Foursquare API版本 // 初始化Tableau WDC const myConnector tableau.makeConnector(); // 定义数据架构 myConnector.getSchema function(schemaCallback) { const cols [ { id: name, dataType: tableau.dataTypeEnum.string }, { id: latitude, dataType: tableau.dataTypeEnum.float }, { id: longitude, dataType: tableau.dataTypeEnum.float }, { id: checkinCount, dataType: tableau.dataTypeEnum.int } ]; const tableSchema { id: FoursquareTable, alias: Foursquare Liked Venues, columns: cols }; schemaCallback([tableSchema]); }; // 获取数据 myConnector.getData function(table, doneCallback) { const accessToken tableau.password; const venuesUrl https://api.foursquare.com/v2/users/self/venuelikes?oauth_token${accessToken}v${version}; $.getJSON(venuesUrl, function(resp) { const venues resp.response.venues; const tableData []; venues.forEach(venue { tableData.push({ name: venue.name, latitude: venue.location.lat, longitude: venue.location.lng, checkinCount: venue.stats.checkinsCount }); }); table.appendRows(tableData); doneCallback(); }); }; // 注册连接器 tableau.registerConnector(myConnector); // 页面加载完成后执行 $(document).ready(function() { // 检查认证状态 checkAuthState(); // 绑定按钮事件 $(#connectbutton).click(doAuthRedirect); $(#getvenuesbutton).click(submitData); }); // 检查认证状态 function checkAuthState() { $.get(/authstate, function(data) { if (data.authenticated) { tableau.password data.accessToken; $(.notsignedin).hide(); $(.signedin).show(); } else { $(.notsignedin).show(); $(.signedin).hide(); } }); } // 重定向到Foursquare认证页面 function doAuthRedirect() { const state Math.random().toString(36).substring(2, 15) Math.random().toString(36).substring(2, 15); localStorage.setItem(state, state); const authParams new URLSearchParams({ client_id: clientId, response_type: code, redirect_uri: redirectUri, state: state }); window.location.href ${authUrl}?${authParams.toString()}; } // 提交数据到Tableau function submitData() { tableau.connectionName Foursquare Venues Data; tableau.submit(); } })();步骤6测试WDC现在我们可以测试我们的WDC了启动服务器node app.js打开Tableau Desktop选择数据 新建数据源 Web数据连接器输入URLhttp://localhost:3333点击Connect to Foursquare按钮并登录授权后点击Get My Liked Venues按钮步骤7在Tableau中可视化数据成功获取数据后您可以在Tableau中创建各种可视化效果。例如您可以创建一个地图显示您喜欢的场地位置并按签到次数进行着色总结通过本教程您已经学会了如何创建一个完整的Tableau Web Data Connector实现Foursquare OAuth认证并将数据导入Tableau进行可视化。这个流程可以应用于许多其他支持OAuth的服务帮助您将各种数据源整合到Tableau中进行分析。官方文档docs/wdc_oauth_tutorial.md 示例代码Examples/OAuthProxyExample/【免费下载链接】webdataconnectorBring the data you care about into Tableau项目地址: https://gitcode.com/gh_mirrors/we/webdataconnector创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考