-
Notifications
You must be signed in to change notification settings - Fork 0
/
itemaccess.html
189 lines (167 loc) · 6.78 KB
/
itemaccess.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<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>Access ArcGIS Online items using OAuth 2.0 | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>
<style>
html,
body {
font-size: 14px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.esri-item-gallery .esri-item-container {
float: left;
text-align: center;
padding: 10px;
width: 204px;
display: inline-block;
}
.esri-item-gallery .esri-image {
width: 200px;
height: 133px;
border: 2px solid gray;
border-radius: 5px;
}
.esri-item-gallery .esri-null-image {
line-height: 133px;
text-align: center;
color: #999999;
}
.esri-item-gallery .esri-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.esri-item-gallery .esri-null-title {
color: #999999;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
require([
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/portal/PortalQueryParams"
], (Portal, OAuthInfo, esriId, PortalQueryParams) => {
const personalPanelElement = document.getElementById("personalizedPanel");
const anonPanelElement = document.getElementById("anonymousPanel");
const userIdElement = document.getElementById("userId");
const info = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "9yRGaHBfTLfnsCd0",
portalUrl:"https://1688406553422.mapsdevext.arcgis.com",
// Uncomment the next line and update if using your own portal
// portalUrl: "https://<host>:<port>/arcgis"
// Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
// authNamespace: "portal_oauth_inline",
flowType: "auto", // default that uses two-step flow
popup: false
});
esriId.registerOAuthInfos([info]);
// Set the OAuthInfo object similar to what is below if using popups for signing into the application
/*
const infoCode = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "q244Lb8gDRgWQ8hM",
// Uncomment the next line and update if using your own portal
// portalUrl: "https://<host>:<port>/arcgis"
// Uncomment the next line to prevent the user's signed in state
// from being shared with other apps on the same domain with
// the same authNamespace value.
// authNamespace: "portal_oauth_inline",
flowType: "authorization-code", // set to this if using a popup for signing in.
popup: true,
popupCallbackUrl: "oauth-callback.html" // page should be relative to application.
// Make sure it's updated to handle two-step flow
// see https://github.com/Esri/jsapi-resources/blob/master/oauth/oauth-callback.html for a sample of this.
});
*/
esriId
.checkSignInStatus(info.portalUrl + "/sharing")
.then(() => {
displayItems();
})
.catch(() => {
// Anonymous view
anonPanelElement.style.display = "block";
personalPanelElement.style.display = "none";
});
document.getElementById("sign-in").addEventListener("click", () => {
// user will be redirected to OAuth Sign In page
esriId.getCredential(info.portalUrl + "/sharing");
});
// Use this snippet instead of the code block above if signing in via a popup
/*
document.getElementById("sign-in").addEventListener("click", () => {
// user will be redirected to OAuth sign-in page
esriId.getCredential((info.portalUrl + "/sharing"), {
oAuthPopupConfirmation: false
}).then(function() {
displayItems();
});
});
*/
document.getElementById("sign-out").addEventListener("click", () => {
esriId.destroyCredentials();
window.location.reload();
});
function displayItems() {
const portal = new Portal();
// Setting authMode to immediate signs the user in once loaded
portal.authMode = "immediate";
// Once loaded, user is signed in
portal.load().then(() => {
// Create query parameters for the portal search
const queryParams = new PortalQueryParams({
query: "owner:" + portal.user.username,
sortField: "numViews",
sortOrder: "desc",
num: 20
});
userIdElement.innerHTML = portal.user.username;
anonPanelElement.style.display = "none";
personalPanelElement.style.display = "block";
// Query the items based on the queryParams created from portal above
portal.queryItems(queryParams).then(createGallery);
});
}
function createGallery(items) {
let htmlFragment = "";
items.results.forEach((item) => {
htmlFragment +=
'<div class="esri-item-container">' +
(item.thumbnailUrl
? '<div class="esri-image" style="background-image:url(' + item.thumbnailUrl + ');"></div>'
: '<div class="esri-image esri-null-image">Thumbnail not available</div>') +
(item.title
? '<div class="esri-title">' + (item.title || "") + "</div>"
: '<div class="esri-title esri-null-title">Title not available</div>') +
"</div>";
});
document.getElementById("itemGallery").innerHTML = htmlFragment;
}
});
</script>
</head>
<body>
<div id="anonymousPanel" style="display: none; padding: 5px; text-align: center;">
<span id="sign-in" class="action">Sign In</span> and view your ArcGIS Online items.
</div>
<div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
Welcome <span id="userId" style="font-weight: bold;"></span> -
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
</body>
</html>