如何使用 Javascript 从 Google Api 检索服务帐户 OAuth2 令牌?

2023-12-04

我需要使用 google 项目服务帐户来使用 JavaScript 访问 google API。为了做到这一点,我需要 OAuth2 到 google API 服务器来获取身份验证令牌。

据我所知,Google 提供了一个用于节点服务器的库 (GAPI),但我需要一个可以在其他安全 JavaScript 环境中工作的解决方案。


这项任务有两个主要部门。

  1. 配置
  2. Coding

首先是配置 steps.

  • If you don't have a google account:
    1. 导航谷歌网站
    2. 找到并点击“登录”
    3. 点击“更多选项”
    4. 点击“创建帐户”
    5. 按照步骤创建帐户
  • 导航到 api 仪表板:console.developers.google.com/apis/dashboard
  • Select or create a project by clicking on the current project. The project I have showing is called "My Project" enter image description here

  • Click google enable apis and services and enable those API you plan to work with

  • 导航到凭据部分:console.developers.google.com/apis/credentials
  • Click google create credentials and select "Service account key"
    • 如果您创建新的服务帐户,为了测试,请将角色设置为“项目”“所有者”。您最终会想要阅读 google Api 角色。看管理角色 and 向服务帐户授予角色
  • 确保“密钥类型”为“Json”,然后单击“创建”。您的密钥/证书将自动下载

现在对于Coding部分。

  • 首次下载jsrsasign并添加对“jsrsasign-all-min.js”的引用。如果您愿意,可以从 github 下载“jsrsasign-all-min.js”
  • 其次使用您的证书/密钥(之前下载)更新以下脚本:

    function postJWT(jwt, callback) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200 && callback) {
                    callback(this.responseText);
                    return;
                }
                if (console) console.log(this.responseText);
            }
        };
        var parameters = "grant_type=" + encodeURIComponent("urn:ietf:params:oauth:grant-type:jwt-bearer") + "&assertion=" + encodeURIComponent(jwt);
        xhttp.open("POST", "https://www.googleapis.com/oauth2/v4/token", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(parameters);
    }
    
    function getCert() {
        var cert = //your json key (downloaded earlier) goes here
            {
                "type": "service_account",
                "project_id": "proj..",
                "private_key_id": "e18..",
                "private_key": "-----BEGIN PRIVATE KEY-----\nMII..==\n-----END PRIVATE KEY-----\n",
                "client_email": "[email protected]",
                "client_id": "5761..",
                "auth_uri": "https://accounts.google.com/o/oauth2/auth",
                "token_uri": "https://accounts.google.com/o/oauth2/token",
                "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
                "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/..service-account%40...iam.gserviceaccount.com"
            };      
        return cert;
    }
    function getJWT() {
        var cert = getCert();
        var key = KEYUTIL.getKey(cert.private_key);
        var headers = { "alg": "RS256", "typ": "JWT" };
        var issued = Math.floor(new Date().getTime()/1000);
    
        var claims = {
            "iss": cert.client_email,
            "scope": "https://www.googleapis.com/auth/analytics.readonly",
            "aud": "https://www.googleapis.com/oauth2/v4/token",
            "exp": issued + 3600,
            "iat": issued
        };
    
        var jwt = KJUR.jws.JWS.sign(headers.alg, headers, JSON.stringify(claims), key);
        return jwt;
    }
    
  • 当您测试代码时,您应该会收到一个带有身份验证令牌的 json 对象。您可以像这样测试您的实现:

    postJWT(getJWT(text), function(){
        let token = JSON.parse(response).access_token;
        //Do your api calls here using the token. 
        //Reuse the token for up to 1 hour.
    });
    

以下是带有令牌的成功 json 对象的示例:

{
    "access_token": "ya29.c.ElkABZznrLNLK6ZAq2ybiH5lsRJpABE8p7MlZZJ0WCKcDNDv75lh-o1iRX__uMNUKSySiawm4YJGsbfqJH2JH61nRK6O2m0GJR7DgkEmo6ZlKtrvzke9C3xpwA",
    "token_type": "Bearer",
    "expires_in": 3600
}

请注意,此方法要求可以从您的 javascript 环境访问密钥/证书。如果此环境是公共的,您的 api 很容易受到攻击。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Javascript 从 Google Api 检索服务帐户 OAuth2 令牌? 的相关文章

  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐

  • 使用 jquery 悬停地图区域精灵

    我正在开发我的第一个实际的 WordPress 网站 但我在使用 jquery 时遇到了一些问题 我真的希望有人能在这里帮助我 所以我想做的是根据当前悬停的地图区域来定位我的 div 背景 我在这里找到了一个例子 http ubytujna
  • Dal(带有实体框架)和模型层进入 MVC

    首先 我使用EF进入Dal层 与 MVC 分离的项目 相同的解决方案 从 EF 的 EDMX 文件生成的模型是来自的实际模型Model层 如果是这样 我如何访问这些模型以在 MVC 中工作View层 我认为直接从视图访问数据层来使用这些模型
  • 从现有数据库生成 JPA 2 实体

    如何从现有数据库生成符合 JPA2 标准的 Entity 我找到了这个 Question 仍然不清楚 JBoss 是否会生成兼容的 JPA2 而且我也想知道是否有一种独立于供应商的方法来做到这一点 您可以使用类似的插件日食大理为你做这件事
  • ViewPager 中的片段在旋转时不会在其 RecyclerView 中显示任何内容

    我在与 TabLayout 集成的 ViewPager 中有 4 个片段 这些片段中的每一个都包含一个 RecyclerView 因为我正在显示未知数量的列表项 这些项目是按日期加载的 因此我有两个按钮可以让您更改日期 然后根据设置的日期加
  • 在 JSF 组件中使用 render 是否足以安全地防止伪造的操作调用?

    我们一直使用自定义 Secure 拦截器来保护我们的支持 bean 方法 以防止伪造该方法的调用 但最近 我突然意识到 如果调用操作的组件未呈现 则这些方法将无法访问 据我了解 JSF 将生成视图 并且如果组件不是根据权限呈现的 例如带有
  • Azure 事件中心是否保证至少一次传递?

    我正在构建一个 Azure Web 应用程序 我想将活动日志发送到 Azure 事件中心 如果应用程序主机和事件中心之间的连接丢失会发生什么 事件中心客户端是否实现某种本地队列 TLDR 是的 EventHubs 提供至少一次交付 Even
  • ASP.NET:自定义动态填充站点地图(SiteMap Provider)

    我正在尝试写我自己的第一个SiteMapProvider子类 它旨在使用一堆不同的数据库查找动态填充 就像我在网上找到的所有示例一样 然而 有很多事情我不太清楚 这是我的第一个问题 Why is StaticSiteMapProvider几
  • 函数内部由 ddply 中指定的变量组成的子集

    通常 我需要通过对应用 ddply 的另一个 data frame 进行子集化的变量来对函数内的 data frame 进行子集化 为此 我再次显式地在函数内写入变量 我想知道是否有更优雅的方法来做到这一点 下面我举了一个简单的例子 只是为
  • 如何使用 matlab 从 yuv 420 视频剪辑中提取帧并将它们存储为不同的图像?

    如何从 yuv 420 视频中提取帧 假设我想将它们存储为静态图像 如何 这是来自MathWorks 文件交换那应该做你想做的事 将 YUV CIF 4 2 0 视频文件转换为图像文件 by Da Yu 功能loadFileYuv从上面的提
  • 中的每个文件创建 FormData 实例

    我正在尝试使用输入文件multiple属性并拆分 formData 这样我就可以为多文件元素中的每个文件提供一个 formData HTML
  • 使用 ITextSharp 创建可填写的 PDF 表单

    我使用 Acrobat Adob e 8 创建了一个包含可填写字段的 PDF 文件 可以使用 ITextSharp 而不是 Adob e 进行编程吗 注意 我并不是指使用 ITextSharp 填写 PDF 而是我想create使用 ITe
  • 将时区添加到 data.table 中的 POSIXct 对象

    我有一个 data table 对象 其中日期和时间列存储为 IDate ITime 对象 我还有一个时区列 其中时区以字符形式给出 现在我想创建一个使用 POSIXct 格式的 DateTime 列 但是我不知道如何向对象添加正确的时区
  • 有没有办法判断 python 是否使用“--with-threads --enable-shared”进行配置和编译?

    这是针对 Debian Squeeez 上的 Python 2 6 6 我试图查明 debian 附带的二进制文件是否配置了以下标志 with threads enable shared 就好像它们不是一样 我需要自己从源代码编译和安装 w
  • Solidity 中的动态数组

    我想声明一个简单的数组 动态列表 一个set函数推入一个字符串和一个get函数返回动态数组中保存的所有字符串 我搜索了很多但找不到这个简单的东西 这是我的解决方案 你需要experimental ABIEncoderV2返回字符串数组 pr
  • 如何在 DASH 内容的

    我已使用以下方式在网页中嵌入了 DASH 视频
  • ID/类别选择器

    我对 jQuery 选择器有一些问题 假设我想选择 elementID 但是elementID是一个变量 除了以其他方式执行此操作之外 还有其他可能性var variable elementID variable 我的意思是没有指定 还有其
  • 扩展并仅指定已知属性?

    我试图提供一个接受给定类型的映射的接口 并将其用于运行时逻辑和编译时类型 就像是 type SomeType a string b a string b string magicalFunction a 1 1 return type is
  • 在 __init__ 中使用继承的类方法

    我有一个由几个孩子继承的父类 我想使用父母的初始化其中一个孩子 classmethod初始化器 我怎样才能做到这一点 我试过 class Point object def init self x y self x x self y y cl
  • 如何像Xcode一样绘制带有蓝色色调的分段控件?

    我正在尝试重新创建 Xcode 中使用的分段控件 其中图像用蓝色绘制 例如在界面生成器中 到目前为止我有一个习惯NSSegmentedCell压倒性的 void drawSegment NSInteger segment inFrame N
  • 如何使用 Javascript 从 Google Api 检索服务帐户 OAuth2 令牌?

    我需要使用 google 项目服务帐户来使用 JavaScript 访问 google API 为了做到这一点 我需要 OAuth2 到 google API 服务器来获取身份验证令牌 据我所知 Google 提供了一个用于节点服务器的库