实施用户身份验证

字数统计: 1.3k 字
阅读时长: 约 3 分钟
当前版本: 4.29

了解如何使用 GeoScene Maps SDK for Javascript 实现用户身份验证。

如果您的应用程序需要通过 GeoScene 访问用户的安全内容，则必须实施用户身份验证。这允许拥有GeoScene Online或GeoScene Enterprise账户的个人用户授权您的应用程序使用他们可以访问的内容和服务。

先决条件 ​

您需要一个 GeoScene 账户来注册新的应用程序并获取其 client_id。

注册应用程序时，您需要配置重定向 URL，该 URL 指向您托管应用程序的 URL。一般来说，这将是一个本地 web 服务器，例如 http://localhost:8000。

步骤 ​

创建新 Pen ​

  1. 转至 CodePen，为您的制图应用程序创建新 Pen。

添加 HTML ​

  1. 在 Codepen > HTML 中，添加 HTML 和 CSS 以创建包含 <button> 和 <pre> 元素的页面，从而允许用户登录、注销和显示用户凭据。

    html
        <html>

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
            <title>GeoScene Maps SDK for JavaScript Tutorials: Implement user authentication</title>


            <style>
                html,
                body {
                    font-size: 150%;
                    margin: 10vh 10vw;
                }
            </style>

        </head>

        <body>

            <button id="sign-in" class="btn btn-primary">登录</button>
            <button id="sign-out" class="btn btn-primary">注销</button>
            <pre><code id="results"></code></pre>

        </body>

    </html>

引用 API ​

  1. 在 <head> 标签中，添加对 CSS 文件和 JS 库的引用。

    html
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>GeoScene Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.29/"></script>

    <style>
    html,
    body {
        font-size: 150%;
        margin: 10vh 10vw;
    }
    </style>

</head>

添加模块 ​

  1. 在 <head> 标签中，添加 <script> 标签和 require 语句以加载 Portal、OAuthInfo 和 IdentityManager 模块。

    更多内容

    GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

    html
    <script>

    require([
    "geoscene/portal/Portal",
    "geoscene/identity/OAuthInfo",
    "geoscene/identity/IdentityManager"
    ], function (Portal, OAuthInfo, geosceneId) {

    });
</script>

向 Identity Manager 注册凭据 ​

  1. 在向 IdentityManager 注册之前，需创建一个 OAuthInfo 对象并使用复制的 client_id 设置 appId。

    js
        require([
    "geoscene/portal/Portal",
    "geoscene/identity/OAuthInfo",
    "geoscene/identity/IdentityManager"
    ], function (Portal, OAuthInfo, geosceneId) {

        const info = new OAuthInfo({
            appId: "YOUR-CLIENT-ID",
            popup: false // the default
        });
        geosceneId.registerOAuthInfos([info]);
    });

处理登录 ​

向 IdentityManager 注册了 client_id 后，GeoScene Maps SDK for JavaScript 将自动提示用户在您的应用程序访问需要身份验证的服务时对其进行授权。通过使用 Portal 类访问用户配置文件来创建登录体验。

  1. 创建一个 handleSignedIn 函数，以便在用户授权您的应用程序时调用，然后加载 Portal。用户提供授权后，获取 fullName 和 username 并在页面上显示。

    js
        const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
    });
    geosceneId.registerOAuthInfos([info]);

    function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
            const results = { name: portal.user.fullName, username: portal.user.username };
            document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

    }

  2. 针对服务 URL 调用 checkSignInStatus 方法。如果用户提供了凭据，请调用 handleSignedIn 函数。

    更多内容

    checkSignInStatus 可以接受任何服务的 URL。默认的 GeoScene 门户 URL https://www.geosceneonline.cn/geoscene/sharing/rest/ 是对用户进行完全身份验证的最简单方法。

    js
        const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
    });
    geosceneId.registerOAuthInfos([info]);

    geosceneId.checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
            handleSignedIn();
        })

    function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
            const results = { name: portal.user.fullName, username: portal.user.username };
            document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

    }

处理登出 ​

  1. 当销毁用户凭据时，可创建一个 handleSignedOut 函数。

    js
    function handleSignedIn() {

    const portal = new Portal();
    portal.load().then(() => {
        const results = { name: portal.user.fullName, username: portal.user.username };
        document.getElementById("results").innerText = JSON.stringify(results, null, 2);
    });

}

function handleSignedOut() {
    document.getElementById("results").innerText = 'Signed Out'
}

  2. 当用户登出时，可附加一条 catch 语句来调用 handleSignedOut 函数。

    js
        geosceneId
    .checkSignInStatus(info.portalUrl + "/sharing")
    .then(() => {
        handleSignedIn();
    })

    .catch(() => {
        handleSignedOut();

    });

添加事件侦听器 ​

  1. 当用户单击 sign-in 按钮时，调用 getCredential 方法。

    js
        .catch(() => {
        handleSignedOut();

    });

    document.getElementById("sign-in").addEventListener("click", function () {
        geosceneId.getCredential(info.portalUrl + "/sharing");
    });

  2. 当用户重新加载页面之前，单击 sign-out 按钮时，可调用 destroyCredentials 方法。

    js
    .catch(() => {
    handleSignedOut();

});

document.getElementById("sign-in").addEventListener("click", function () {
    geosceneId.getCredential(info.portalUrl + "/sharing");
});

document.getElementById("sign-out").addEventListener("click", function () {
    geosceneId.destroyCredentials();
    window.location.reload();
});

运行应用程序 ​

现在，您应该有一个使用 OAuth 2.0 凭据的应用程序。

下一步是什么？ ​

要了解如何使用其他 API 功能，请参阅以下教程：