使用 GeoScene 身份进行身份验证
了解如何使用 GeoScene API for Javascript 创建 GeoScene 身份,也称为授权用户登录。
如果您的应用程序需要访问GeoScene平台用户下的资源,则必须使用 GeoScene 身份实施身份验证,需要拥有 GeoScene Online 或 GeoScene Enterprise 账户的个人用户授权您的应用程序以使用他们的内容和服务。
注册应用程序时,您需要配置一个重定向 URL,其指向您托管应用程序的 URL。通常这将是一个本地 Web 服务器,例如 http://localhost:8000
。
步骤
创建新 Pen
- 转至 CodePen 为您的制图应用程序创建一个新 Pen。
添加 HTML
在 Codepen > HTML 中,添加 HTML 和 CSS 以创建带有
<button>
和<pre>
元素的页面,以允许用户登录、退出和显示用户凭据。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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(() => { 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>
引用 API
在
<head>
标签中,添加对 CSS 文件和 JS 库的引用。Add line. Add line. 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(() => { 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>
添加模块
GeoScene JS API 包含 AMD 模块。在 require 语句中引用 Portal
、OAuthInfo
和 IdentityManager
模块。
在
<head>
标签中,添加<script>
标签和 AMD 请求语句以加载Portal
、OAuthInfo
和IdentityManager
模块。GeoScene API for JavaScript 使用 AMD 模块。
require
函数用于加载模块,以便它们可以在主function
中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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(() => { 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>
使用身份管理器注册凭据
在 GeoScene Developer 仪表盘的 OAuth 2.0 选项卡中,复制应用程序的
client_id
。在将其注册到
IdentityManager
之前,创建一个OAuthInfo
对象并使用复制的client_id
设置appId
。Add line. Add line. Add line. Add line. Add line. 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(() => { 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>
处理登录
使用 IdentityManager
注册您的 client_id
后,当应用程序访问需要身份验证的服务时,API for JavaScript 将自动提示用户授权您的应用程序。通过使用 Portal
类访问用户配置文件来创建登录体验。
创建
handleSignedIn
函数,以便在用户授权您的应用程序并加载Portal
时调用该函数。用户提供授权后,可获取并在页面上显示fullName
和username
。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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(() => { 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>针对服务 URL 调用
checkSignInStatus
方法。如果用户提供了凭据,请调用handleSignedIn
函数。checkSignInStatus
可以接受任何服务的 URL。默认的 ArcGIS 门户 URLhttps://arcgis.com/sharing/rest/
是完全验证用户的最简单方法。Add line. Add line. Add line. Add line. Add line. Add line. 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(() => { 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>
处理退出
当用户凭据销毁时,创建一个
handleSignedOut
函数。Add line. Add line. Add line. 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(() => { 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>附加
catch
语句以在用户退出时调用handleSignedOut
函数。Add line. Add line. 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(() => { 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>
添加事件监听器
当用户单击
sign-in
按钮时,调用getCredential
方法。Add line. Add line. Add line. Add line. 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(() => { 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>重新加载页面之前,当用户单击
sign-out
按钮时,将调用destroyCredentials
方法。Add line. Add line. Add line. Add line. 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(() => { 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 检查凭据的应用程序。