使用 GeoScene 身份进行身份验证

了解如何使用 GeoScene API for Javascript 创建 GeoScene 身份,也称为授权用户登录

如果您的应用程序需要访问GeoScene平台用户下的资源,则必须使用 GeoScene 身份实施身份验证,需要拥有 GeoScene OnlineGeoScene Enterprise 账户的个人用户授权您的应用程序以使用他们的内容和服务。

注册应用程序时,您需要配置一个重定向 URL,其指向您托管应用程序的 URL。通常这将是一个本地 Web 服务器,例如 http://localhost:8000

步骤

创建新 Pen

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

添加 HTML

  1. Codepen > HTML 中,添加 HTML 和 CSS 以创建带有 <button><pre> 元素的页面,以允许用户登录、退出和显示用户凭据。

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
        }
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

引用 API

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

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
        }
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

添加模块

GeoScene JS API 包含 AMD 模块。在 require 语句中引用 PortalOAuthInfo 和 IdentityManager 模块。

  1. 在 <head> 标签中,添加 <script> 标签和 AMD 请求语句以加载 PortalOAuthInfo 和 IdentityManager 模块。

    GeoScene API for JavaScript 使用 AMD 模块require 函数用于加载模块,以便它们可以在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
    
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
        });
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

使用身份管理器注册凭据

  1. GeoScene Developer 仪表盘的 OAuth 2.0 选项卡中,复制应用程序的 client_id

  2. 在将其注册到 IdentityManager 之前,创建一个 OAuthInfo 对象并使用复制的 client_id 设置 appId

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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]);
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

处理登录

使用 IdentityManager 注册您的 client_id 后,当应用程序访问需要身份验证的服务时,API for JavaScript 将自动提示用户授权您的应用程序。通过使用 Portal 类访问用户配置文件来创建登录体验。

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

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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]);
    
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>
  2. 针对服务 URL 调用 checkSignInStatus 方法。如果用户提供了凭据,请调用 handleSignedIn 函数。

    checkSignInStatus 可以接受任何服务的 URL。默认的 ArcGIS 门户 URL https://arcgis.com/sharing/rest/ 是完全验证用户的最简单方法。

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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]);
    
          geosceneId
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
              handleSignedIn();
            })
    
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

处理退出

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

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
          }
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>
  2. 附加 catch 语句以在用户退出时调用 handleSignedOut 函数。

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
              handleSignedIn();
            })
    
            .catch(() => {
              handleSignedOut();
    
            });
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

添加事件监听器

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

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .catch(() => {
              handleSignedOut();
    
            });
    
          document.getElementById("sign-in").addEventListener("click", function () {
            geosceneId.getCredential(info.portalUrl + "/sharing");
          });
    
          document.getElementById("sign-out").addEventListener("click", function () {
            window.location.reload();
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>
  2. 重新加载页面之前,当用户单击 sign-out 按钮时,将调用 destroyCredentials 方法。

                                                                                       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE 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 API for JavaScript Tutorials: 使用 GeoScene 身份进行身份验证</title>
    
    
      <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
      <script src="https://js.geoscene.cn/4.23/"></script>
    
      <style>
        html,
        body {
          font-size: 150%;
          margin: 10vh 10vw;
      </style>
    
      <script>
        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
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
            .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();
          });
          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'
      </script>
    
    </head>
    
    <body>
    
      <button id="sign-in" class="btn btn-primary">Sign In</button>
      <button id="sign-out" class="btn btn-primary">Sign Out</button>
      <pre><code id="results"></code></pre>
    
    </body>
    
    </html>

运行应用程序

现在,您应有一个可以使用 OAuth 2.0 检查凭据的应用程序。

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.