Javascript 身份验证帮助程序 - Amazon Location Service
身份验证函数

Javascript 身份验证帮助程序

通过您的 JavaScript 应用程序调用 Amazon Location API 时，Amazon Location JavaScript 身份验证帮助程序可以帮助您更轻松地进行身份验证。在使用 Amazon Cognito 或 API 密钥作为身份验证方法时，此身份验证帮助程序特别有用。这是一个开源库，可在 GitHub 上找到，请点击此处：https://github.com/aws-geospatial/amazon-location-utilities-auth-helper-js。

注意

身份验证帮助程序中的 Amazon Cognito 支持不支持 Amazon Cognito 的联合身份功能。

安装

如果您使用像 webpack 这样的构建系统，或者在 html 中加入带有 <script> 标签的预构建的 JavaScript 捆绑包，则可以在本地安装中使用这些库。

  • 使用以下命令通过 NPM 安装库：

    npm install @aws/amazon-location-utilities-auth-helper

  • 在 HTML 文件中使用以下命令加载脚本：

    <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script>

导入

要在 JavaScript 应用程序中使用特定函数，必须导入该函数。以下代码用于将 withIdentityPoolId 函数导入到您的应用程序中。

import { withIdentityPoolId } from '@aws/amazon-location-utilities-auth-helper';

身份验证函数

Amazon Location 身份验证帮助程序包括以下返回 AuthHelper 对象的函数：

  • async withIdentityPoolId( identityPoolId: string): AuthHelper – 此函数返回一个 AuthHelper 对象，该对象已初始化为可与 Amazon Cognito 配合使用。

  • async withAPIKey( API_KEY: string): AuthHelper – 此函数返回一个 AuthHelper 对象，该对象已初始化为可与 API 密钥 配合使用。

AuthHelper 目标提供以下函数：

  • AuthHelper.getMapAuthenticationOptions() – AuthHelper 对象的函数返回一个 JavaScript 对象，其中包含可以与 MapLibre JS 中的地图选项配合使用的 transformRequest。仅在使用身份池进行初始化时提供。

  • AuthHelper.getLocationClientConfig() – AuthHelper 对象的函数返回一个 JavaScript 对象，其中包含可用于初始化 LocationClient的 credentials。

  • AuthHelper.getCredentials() – AuthHelper 对象的函数返回来自 Amazon Cognito 的内部凭证。仅在使用身份池进行初始化时提供。

示例：使用 AuthHelper 结合 Amazon Cognito 初始化 MapLibre 地图对象

import { withIdentityPoolId } from '@aws/amazon-location-utilities-auth-helper';

const authHelper = await withIdentityPoolId("identity-pool-id"); // use Cognito pool id for credentials

const map = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-123.1187, 49.2819], // initial map center point
    zoom: 16, // initial map zoom
    style: https://maps.geo.region.amazonaws.com/maps/v0/maps/mapName/style-descriptor', // Defines the appearance of the map
    ...authHelper.getMapAuthenticationOptions(), // Provides credential options required for requests to Amazon Location
});

示例：使用 API 密钥初始化 MapLibre 地图对象（在本例中 AuthHelper 不需要）

const map = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-123.1187, 49.2819], // initial map center point
    zoom: 16, // initial map zoom
    style: https://maps.geo.region.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=api-key-id',
});

示例：使用 Amazon Cognito 和 AuthHelper 从 AWS SDK for JS 初始化 Location 客户端

此示例使用 AWS SDK for JavaScript v3。

import { withIdentityPoolId } from '@aws/amazon-location-utilities-auth-helper';

const authHelper = await withIdentityPoolId("identity-pool-id"); // use Cognito pool id for credentials

//initialize the Location client:
const client = new LocationClient({
    region: "region",
    ...authHelper.getLocationClientConfig() // sets up the Location client to use the Cognito pool defined above
});

//call a search function with the location client:
const result = await client.send(new SearchPlaceIndexForPositionCommand({
    IndexName: "place-index", // Place index resource to use
    Position: [-123.1187, 49.2819], // position to search near
    MaxResults: 10 // number of results to return
});

示例：使用 API 密钥和 AuthHelper 从 AWS SDK for JS 初始化 Location 客户端

此示例使用 AWS SDK for JavaScript v3。

import { withAPIKey } from '@aws/amazon-location-utilities-auth-helper';

const authHelper = await withAPIKey("api-key-id"); // use API Key id for credentials

//initialize the Location client:
const client = new LocationClient({
    region: "region",
    ...authHelper.getLocationClientConfig() // sets up the Location client to use the API Key defined above
});

//call a search function with the location client:
const result = await client.send(new SearchPlaceIndexForPositionCommand({
    IndexName: "place-index", // Place index resource to use
    Position: [-123.1187, 49.2819], // position to search near
    MaxResults: 10 // number of results to return
});