我们都知道 API 密钥和连接无法在应用程序的客户端得到保护。在前端硬编码 API 密钥是一种快速且可靠的方法,可以让您的 API 连接关闭、API 密钥被盗,并使您的 API 提供商的账单飙升。那么,如果您不想维护后端基础架构,有哪些选择呢?我们将探索将 3rd 方 API 集成到客户端应用程序而无需构建后端的推荐技术。然后,我们将逐步引导您完成集成私有 API 以使用KOR Connect创建 Covid 19 跟踪器的示例。

在没有后端基础设施的情况下集成第 3 方 API 的方式:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ESpBP-wu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/j6ufft11nrvwv10knfon.png)

作为后端代理 (AWS Lambda) 的无服务器函数:

通常建议使用无服务器函数来隐藏客户端应用程序的 API 密钥。然后客户端可以使用这个无服务器功能作为代理,通过新的端点调用 API。开发人员还应该合并 CORS 来识别标头来源,以便只有允许的域调用代理(以防止从任何地方对代理 url 进行不必要的调用)。这可能看起来很安全,但 CORS 仅验证浏览器调用,并且很容易被欺骗或可以从浏览器外部调用。恶意行为者仍然可以使用机器人增加成本并关闭端点。在预置 AWS 服务以支持云服务之间的 API 网关、角色和权限等 lambda 函数时,可能会出现这种技术的进一步问题,如果您不熟悉云提供商,这可能会非常耗时。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MgbDFUvR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- (uploads.s3.amazonaws.com/uploads/articles/0q72a1o7nbcsnp61f95k.jpg)

Netlify 函数(基于 AWS Lambda 构建):

Netlify Functions 是 AWS Lambdas 的包装器,与 AWS 预置代理相比,使用这种方法的主要优势是改善了用户体验,Netlify 有助于为您简化部署。 Netlify Functions 删除了与设置 AWS 账户和正确集成 API 所需的其他 AWS 服务相关的任务。与设置您自己的 AWS 预置代理一样,Netlify 函数也存在类似的安全问题。即使设置了 CORS,新的 Netlify 端点也可能以不需要的方式被不需要的代理调用。这会使您的 API 容易被关闭或成本增加。此外,如果您不熟悉编写函数,这可能会带来额外的学习曲线。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fCcQbgTG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/fg4bj3hp3w310mkvzmcz.png)

韩国连接:

KOR Connect 是客户端 Web 应用程序集成 API 的一种新方式。 KOR Connect 是保护 API 密钥和连接 3rd 方 API 的最快方式,因为您不需要构建基础设施(AWS/其他云提供商)或代码功能(AWS 和 Netlify 功能)。 KOR Connect 还使用 AWS Lambda 来保护 API 密钥,但 KOR Connect 和其他选项之间的相似之处到此为止。通过一键集成在 KOR Connect 上保护 API 密钥,然后将包含新公共 URL 的片段复制粘贴到开发人员的代码中。放置在前端代码中的这个片段包含 Google 的 Recaptcha V3,它被用作证明层来确认端点调用的来源以及阻止不需要的机器人流量。 KOR Connect 还具有额外的安全层,以进一步保护 API 流量免受中间人攻击。 KOR Connect 可防止使用和不使用浏览器的恶意行为者的端点调用,保护 API 密钥并阻止机器人攻击。代码中使用的公共 URL 不需要隐藏,因此开发人员不必担心 API 机密最终会在 git 存储库中,API 机密会暴露在客户端上,必须手动创建 lambda 函数的包装器,并担心会进行不需要的端点调用。当前功能集 KOR Connect 是需要动态功能但不一定需要用户身份验证的客户端 Web 应用程序的最佳选择。 (奖金也是免费的)

现在让我们来看一个使用 KOR Connect 和 Vue.js 的示例!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--G9oPKo8N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/ivbhc4t0wbj9p1n73ued.gif)

让我们创建一个 COVID-19 跟踪器。为了做到这一点,我们必须选择我们想要使用的 API。我决定使用来自约翰霍普金斯大学的数据的COVID-19 Statistics API。

如果您已经有一个KOR Connect帐户,您可以在此处登录或者您可以创建一个新帐户。

让我们首先通过单击“+ Connect API”按钮在 KOR Connect 上创建 API 连接:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MzzRXC-_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/wg07xvqtu7udjuggvhem.jpeg)

连接细节都是直接从 RapidAPI 复制的。有关 API 连接模块的更多信息,请点击此处。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zv0dpLoo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/3a9i91j6vjvzah2pizmw.png)

完毕!建立连接后,转到查看新 API 连接的详细信息。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7Kv61qHr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/u1exv7dogze4zk0aikoa.png)

_如果你愿意,这里的是一个很棒的视频教程,由 Traversy Media 指导你在 Vue.js 上构建网站。 (这里是他的 COVID-19 跟踪器的代码)。

**注意:**在他使用公共 API 的教程中,我们将使用 KOR Connect 轻松地将私有 API 集成到我们的站点中。_

现在,您需要做的就是获取 KOR Connect 提供的 Secure URL 和 Public API Key 并使用它们来发出 API 请求。这是获取请求的示例。

fetch("<YOUR-SECURE-URL>", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "<YOUR-PUBLIC-API-KEY>"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

进入全屏模式 退出全屏模式

就这么简单,现在您的 API 集成无需任何额外的库或配置即可工作。

如果您有兴趣通过证明服务增加更多安全性,请继续阅读。

附加安全

让我们看看 KOR Connect 如何提供额外的安全层。如果您想将 Recaptcha 实现为其他安全功能中的证明层,请遵循。

您必须导航到 API 连接的查看详细信息中的附加安全部分。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--YHng2-k3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/uv1f18b9lxqghpojsz0y.png)

然后,您将必须打开附加安全性。打开附加安全时,安全类型应为单一 URL + 附加安全。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fVknPxRU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/xpvfm1010ubogsweoh1f.png)

现在,向下滚动到代码片段部分,根据您为项目使用的框架,您将向项目中添加相应的代码片段。我们将使用 VueJS 完成这个 Covid19 跟踪器 API 集成。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--T5sRTuEi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/cvteor39uzngqc1tluir.png)

看看下面的代码片段:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--VpmXLZtU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/tg2w3d0a3wf55lhxpgh0.jpeg)

这是将代码段集成到您的项目中的方法:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZkVJyuqI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/8evdz2qu9yhqr01pzzb5.png)

注意: KOR Connect URL 已使用我从 RapidAPI 收到的路径进行了修改。例如,要获取 Covid 病例总数,我需要将其添加到我的基本 URL:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5XJXPXXf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/az6j8mssouab1cihrjmx.png)

您正在使用的 API 中可用的所有路径都可以附加到 KOR Connect 基本 URL(安全 URL)。

现在,所有 API 调用都针对 KOR Connect 提供的公共 URL。 KOR Connect 将作为代理进行身份验证以及发送 API 信息。此外,由于 reCaptcha V3(自动实施)和额外的安全层,一些恶意攻击向量被阻止,从而增强了 KOR Connects 的安全性。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qg-0uB5O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/zj4ttldiae61fbmtniyb.jpeg)

经许可,此博客引用了 Rodrigo 发表的这篇Covid 19 跟踪器博客帖子。

这里有一些使用KOR Connect的更酷的项目教程:

连接 YouTube API 以在 Angular 上无后端下载音乐

在 Reactjs 上设置 Gif 生成器 API

集成实时货币汇率计算器 API - HTML