First share

This commit is contained in:
Vincenzo Cestone 2022-03-22 11:27:28 +01:00
parent ab6bee09dc
commit 49b6ea230b
2 changed files with 338 additions and 0 deletions

215
boot/d4s-boot.js Normal file
View File

@ -0,0 +1,215 @@
window.customElements.define('d4s-boot-2', class extends HTMLElement {
#keycloak = null
#authorization = null
#url = null
#realm = "d4science"
#clientId = null
#redirectUrl = null
#audience = null
// loading attempts nr and timer between attempts
#attempts = 6
#timer = 500
constructor() {
super()
//this.attachShadow({mode: "closed"})
}
connectedCallback() {
if (typeof Keycloak === 'undefined') {
const script = document.createElement('script')
script.src = this.#url + '/js/keycloak.js'
script.type = 'text/javascript'
script.addEventListener('load', () => {
this.initKeycloak()
})
document.head.appendChild(script)
} else {
this.initKeycloak()
}
}
initKeycloak() {
this.#keycloak = new Keycloak({
url: this.#url,
realm: this.#realm,
clientId: this.#clientId
})
const keycloak = this.#keycloak
const url = this.#url
keycloak.init({
onLoad: 'login-required'
, checkLoginIframe: false
}).then((authenticated) => {
console.log(authenticated ? 'Authenticated in ' + this.#realm : 'Not authenticated')
if (typeof KeycloakAuthorization === 'undefined') {
const authz = document.createElement('script')
authz.src = url + '/js/keycloak-authz.js'
authz.type = 'text/javascript'
authz.addEventListener('load', () => {
this.#authorization = new KeycloakAuthorization(keycloak)
})
document.head.appendChild(authz)
} else {
this.#authorization = new KeycloakAuthorization(keycloak)
}
//console.log("expires: " + this.expirationDate(keycloak.tokenParsed.exp))
}).catch(function(err) {
console.error("Failed to initialize d4science boot component")
})
}
parseJwt(token) {
var base64Url = token.split('.')[1]
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
}).join(''))
return JSON.parse(jsonPayload);
}
expirationDate(utc) {
let d = new Date(0)
d.setUTCSeconds(utc)
return d
}
checkContext() {
const parseJwt = this.parseJwt
const expDt = this.expirationDate
const audience = encodeURIComponent(this.#audience)
this.#authorization.entitlement(audience).then(function (rpt) {
// onGrant callback function.
// If authorization was successful you'll receive an RPT
// with the necessary permissions to access the resource server
console.log(rpt)
//console.log("rpt expires: " + expDt(parseJwt(rpt).exp))
})
}
service(endpoint, method, params, onSuccess, onForbidden) {
if (this.#authorization == null) {
if (this.#attempts-- > 0) {
setTimeout(() => this.service(endpoint, method, params, onSuccess, onForbidden), this.#timer)
return
} else {
console.error("Impossible to initialize D4Science authorization component")
throw "Fatal error"
}
}
this.#keycloak.updateToken(30).then(() => {
const audience = encodeURIComponent(this.#audience)
this.#authorization.entitlement(audience).then(function (rpt) {
var req = new XMLHttpRequest()
req.open(method, endpoint, true)
req.setRequestHeader('Accept', 'application/json')
req.setRequestHeader('Authorization', 'Bearer ' + rpt)
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
onSuccess(req.response)
} else if (req.status == 403) {
onForbidden(req.statusText)
}
}
}
req.send(params)
})
}).catch(function() {
onForbidden('Failed to refresh token')
})
}
logout() {
if (this.#keycloak) {
if (!this.#redirectUrl) {
console.error("Missing required @redirectUrl attribute in d4s-boot")
} else {
this.#keycloak.logout({
redirectUri: this.#redirectUrl
})
}
}
}
static get observedAttributes() {
return ["url", "realm", "gateway", "redirect-url", "context"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "url":
this.#url = newValue
break
case "realm":
this.#realm = newValue
break
case "gateway":
this.#clientId = newValue
break
case "redirect-url":
this.#redirectUrl = newValue
break
case "context":
this.#audience = newValue
break
}
}
}
get url() {
return this.#url
}
set url(url) {
this.#url = url
this.setAttribute("url", url)
}
get realm() {
return this.#realm
}
set realm(realm) {
this.#realm = realm
this.setAttribute("realm", realm)
}
get clientId() {
return this.#clientId
}
set clientId(clientId) {
this.#clientId = clientId
this.setAttribute("gateway", clientId)
}
get redirectUrl() {
return this.#redirectUrl
}
set redirectUrl(redirectUrl) {
this.#redirectUrl = redirectUrl
this.setAttribute("redirect-url", redirectUrl)
}
get context() {
return this.#audience
}
set context(context) {
this.#audience = context
this.setAttribute("context", context)
}
})

123
social/d4s-social.js Normal file
View File

@ -0,0 +1,123 @@
window.customElements.define('d4s-social-search', class extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
//console.log(typeof d4s)
//console.log(this)
//this.attachShadow({mode: "open"})
//console.log(this.shadowRoot.querySelector("*[name=search]"))
//const shadowRoot = this.attachShadow({mode: 'open'})
//console.log(shadowRoot.innerHTML)
console.log("d4s-social-search connectedCallback")
var d4s = document.querySelector('d4s-boot-2')
/*
d4s.service(
'https://api.dev.d4science.org/rest/2/full-text-search/search-by-query?query=d4science',
'GET', null,
(resp) => {
document.getElementById('output').innerText = resp
},
() => { alert('Forbidden') }
)
d4s.service(
'https://api.dev.d4science.org/rest/2/posts/get-posts-user-quantity',
'GET', null,
(resp) => {
document.getElementById('output').innerText = resp
},
() => { alert('Forbidden') }
)
*/
}
})
window.customElements.define('d4s-social-posts', class extends HTMLElement {
#basepath = 'https://api.dev.d4science.org/rest'
#quantity = 20
constructor() {
super()
}
connectedCallback() {
const shadowRoot = this.attachShadow({mode: 'open'})
var d4s = document.querySelector('d4s-boot-2')
d4s.service(
this.#basepath + '/2/posts/get-posts-vre',
'GET', null,
(resp) => {
var jresp = JSON.parse(resp)
if (jresp.success) {
var ul = document.createElement('ul')
jresp.result.reverse().forEach(post => {
if (this.#quantity-- > 0) {
var li = document.createElement('li')
li.setAttribute('class', 'd4s-social-post')
const datetime = new Date(0)
datetime.setUTCMilliseconds(post.time)
li.innerHTML = `
<div class="d4s-post-heading">
<div class="d4s-post-avatar">
<img src="${post.thumbnail_url}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
</div>
<div class="d4s-post-meta">
<div class="fullname">${post.full_name}</div>
<div class="time">${datetime.toLocaleString()}</div>
</div>
</div>
<div class="d4s-post-body">${post.description}</div>
<div class="d4s-post-footer"></div>
`
ul.appendChild(li)
}
})
shadowRoot.appendChild(ul)
}
},
() => { alert('Forbidden') }
)
}
static get observedAttributes() {
return ["url", "quantity"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "url":
this.#basepath = newValue
break
case "quantity":
this.#quantity = newValue
break
}
}
}
get url() {
return this.#basepath
}
set url(url) {
this.#basepath = url
this.setAttribute("url", url)
}
get quantity() {
return this.#quantity
}
set quantity(quantity) {
this.#quantity = quantity
this.setAttribute("quantity", quantity)
}
})