gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Reformatting code. Replaced alerts. Removed download method.

This commit is contained in:
Vincenzo Cestone 2022-04-27 19:38:36 +02:00
parent 1321181ad7
commit c2421ec5ab
1 changed files with 243 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

580
boot/d4s-boot.js
View File

@ -1,367 +1,273 @@
/**
* D4Science boot component that handles keykloak authz
* <d4s-boot-2
* /@url: keycloak url, for example: https://accounts.d4science.org/auth]
* /@realm: is the realm [defaults to: d4science]
* /@gateway: is the client id, for example: "pre.d4science.org"
* /@context: is the audience, for example: "%2Fpred4s%2Fpreprod%2FpreVRE"
* /@redirect-url: where to go on logout
*/
window.customElements.define('d4s-boot-2', class extends HTMLElement { window.customElements.define('d4s-boot-2', class extends HTMLElement {
#keycloak = null #keycloak = null
#authorization = null #authorization = null
#url = null #url = null
#realm = "d4science" #realm = "d4science"
#clientId = null #clientId = null
#redirectUrl = null #redirectUrl = null
#audience = null #audience = null
#authenticated = false #authenticated = false
#locked = true #locked = true
#queue = [] #queue = []
#interval = null #interval = null
constructor() { constructor() {
super() super()
} }
unlock(){ unlock() {
this.#locked = false this.#locked = false
} }
fire(etype){ fire(etype) {
const evt = new CustomEvent(etype, { detail : ''}) const evt = new CustomEvent(etype, { detail : ''})
document.dispatchEvent(evt) document.dispatchEvent(evt)
} }
connectedCallback(){ connectedCallback() {
this.startStateChecker()
this.startStateChecker()
this.loadKeycloak().then(()=>{
console.log("Keycloak loaded")
return this.initKeycloak()
}).then((authenticated)=>{
if(!authenticated) throw "Failed to authenticate";
console.log("Keycloak initialized and user authenticated")
//if an audience is provided then perform also authorization
if(this.#audience){
return this.loadKeycloakAuthorization().then(
()=>{
this.#authorization = new KeycloakAuthorization(this.#keycloak)
console.log("Keycloak authorization loaded and initialized", this.#authorization)
}
)
}else{
return Promise.resolve()
}
}).then(()=>{
this.#authenticated = true this.loadKeycloak().then(() => {
this.unlock() console.log("Keycloak loaded")
this.fire("authenticated") return this.initKeycloak()
}).catch(err=>{
console.error("Unable to initialize Keycloak",err)
})
}
loadKeycloak(){ }).then((authenticated) => {
return new Promise((resolve, reject)=>{ if (!authenticated) {
if (typeof Keycloak === 'undefined') { throw "Failed to authenticate"
const script = document.createElement('script') }
script.src = this.#url + '/js/keycloak.js' console.log("Keycloak initialized and user authenticated")
script.type = 'text/javascript' //if an audience is provided then perform also authorization
script.addEventListener('load', resolve) if (this.#audience) {
document.head.appendChild(script) return this.loadKeycloakAuthorization().then(() => {
} else { this.#authorization = new KeycloakAuthorization(this.#keycloak)
resolve() console.log("Keycloak authorization loaded and initialized", this.#authorization)
}
})
}
initKeycloak(){
this.#keycloak = new Keycloak({
url: this.#url,
realm: this.#realm,
clientId: this.#clientId
})
return this.#keycloak.init({onLoad: 'login-required', checkLoginIframe: false })
}
loadKeycloakAuthorization(){
return new Promise((resolve, reject)=>{
if (typeof KeycloakAuthorization === 'undefined') {
const authz = document.createElement('script')
authz.src = this.#url + '/js/keycloak-authz.js'
authz.type = 'text/javascript'
authz.addEventListener('load', resolve)
document.head.appendChild(authz)
} else {
resolve()
}
})
}
startStateChecker(){
this.#interval = window.setInterval(()=>{
if(this.#locked){
console.log("Still locked. Currently has " + this.#queue.length + " pending requests.")
}else if (!this.authenticated){
window.alert("Not authorized!")
}else{
if(this.#queue.length > 0){
this.#keycloak.updateToken(30).then(()=>{
if(this.#audience){
console.log("Checking entitlement for audience", this.#audience)
const audience = encodeURIComponent(this.#audience)
return this.#authorization.entitlement(audience)
} else {
return Promise.resolve(this.#keycloak.token)
}
}).then(
token => {
console.log("Authorized")
//transform all queued requests to fetches
console.log("All pending requests to promises")
let promises = this.#queue.map(r => {
r.request.headers["Authorization"] = "Bearer " + token
return r.resolve( fetch(r.url, r.request) )
})
//clear queue
this.#queue = []
console.log("Resolving all fetches")
return Promise.all(promises)
}
).catch(err => alert("Unable to make calls: " + err))
}
}
}, 300)
}
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))
}) })
} } else {
return Promise.resolve()
}
secureFetch(url, request){ }).then(() => {
const p = new Promise((resolve, reject)=>{ this.#authenticated = true
let req = request ? request : {} this.unlock()
if("headers" in req){ this.fire("authenticated")
req.headers["Authorization"] = null
} else {
req.headers = { "Authorization" : null}
}
console.log("Queued request to url ", url)
this.#queue.push({ url : url, request : req, resolve : resolve, reject : reject})
})
return p
}
download(url, name) { }).catch(err => {
this.secureFetch(url).then(reply=>{ console.error("Unable to initialize Keycloak", err)
if(reply.status !== 200) throw "Unable to download"; })
return reply.blob() }
}).then(blob=>{
const objectURL = URL.createObjectURL(blob)
var tmplnk = document.createElement("a")
tmplnk.download = name
tmplnk.href = objectURL
document.body.appendChild(tmplnk)
tmplnk.click()
document.body.removeChild(tmplnk)
}).catch(err=>alert(err))
}
logout() { loadKeycloak() {
if (this.#keycloak) { return new Promise((resolve, reject) => {
if (!this.#redirectUrl) { if (typeof Keycloak === 'undefined') {
console.error("Missing required @redirectUrl attribute in d4s-boot") const script = document.createElement('script')
script.src = this.#url + '/js/keycloak.js'
script.type = 'text/javascript'
script.addEventListener('load', resolve)
document.head.appendChild(script)
} else {
resolve()
}
})
}
initKeycloak() {
this.#keycloak = new Keycloak({
url: this.#url,
realm: this.#realm,
clientId: this.#clientId
})
return this.#keycloak.init({onLoad: 'login-required', checkLoginIframe: false })
}
loadKeycloakAuthorization() {
return new Promise((resolve, reject) => {
if (typeof KeycloakAuthorization === 'undefined') {
const authz = document.createElement('script')
authz.src = this.#url + '/js/keycloak-authz.js'
authz.type = 'text/javascript'
authz.addEventListener('load', resolve)
document.head.appendChild(authz)
} else {
resolve()
}
})
}
startStateChecker() {
this.#interval = window.setInterval(() => {
if (this.#locked) {
console.log("Still locked. Currently has " + this.#queue.length + " pending requests.")
} else if (!this.authenticated) {
window.alert("Not authorized!")
} else {
if (this.#queue.length > 0) {
this.#keycloak.updateToken(30).then(() => {
if (this.#audience) {
console.log("Checking entitlement for audience", this.#audience)
const audience = encodeURIComponent(this.#audience)
return this.#authorization.entitlement(audience)
} else { } else {
this.#keycloak.logout({ return Promise.resolve(this.#keycloak.token)
redirectUri: this.#redirectUrl
})
} }
}).then(token => {
console.log("Authorized")
//transform all queued requests to fetches
console.log("All pending requests to promises")
let promises = this.#queue.map(r => {
r.request.headers["Authorization"] = "Bearer " + token
return r.resolve( fetch(r.url, r.request) )
})
//clear queue
this.#queue = []
console.log("Resolving all fetches")
return Promise.all(promises)
}).catch(err => console.error("Unable to make calls: " + err))
} }
} }
}, 300)
}
static get observedAttributes() { parseJwt(token) {
return ["url", "realm", "gateway", "redirect-url", "context"]; 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(''))
attributeChangedCallback(name, oldValue, newValue) { return JSON.parse(jsonPayload);
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 authenticated(){
return this.#authenticated
}
get url() { expirationDate(utc) {
return this.#url let d = new Date(0)
} d.setUTCSeconds(utc)
return d
}
set url(url) { checkContext() {
this.#url = url const parseJwt = this.parseJwt
this.setAttribute("url", url) 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))
})
}
get realm() { secureFetch(url, request) {
return this.#realm const p = new Promise((resolve, reject) => {
} let req = request ? request : {}
if ("headers" in req) {
req.headers["Authorization"] = null
} else {
req.headers = { "Authorization" : null}
}
console.log("Queued request to url ", url)
this.#queue.push({ url : url, request : req, resolve : resolve, reject : reject})
})
return p
}
set realm(realm) { logout() {
this.#realm = realm if (this.#keycloak) {
this.setAttribute("realm", realm) if (!this.#redirectUrl) {
console.error("Missing required @redirectUrl attribute in d4s-boot")
} else {
this.#keycloak.logout({
redirectUri: this.#redirectUrl
})
}
} }
}
get clientId() { static get observedAttributes() {
return this.#clientId return ["url", "realm", "gateway", "redirect-url", "context"];
} }
set clientId(clientId) { attributeChangedCallback(name, oldValue, newValue) {
this.#clientId = clientId if (oldValue !== newValue) {
this.setAttribute("gateway", clientId) 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 redirectUrl() { get authenticated(){
return this.#redirectUrl return this.#authenticated
} }
set redirectUrl(redirectUrl) { get url() {
this.#redirectUrl = redirectUrl return this.#url
this.setAttribute("redirect-url", redirectUrl) }
}
get context() { set url(url) {
return this.#audience this.#url = url
} this.setAttribute("url", url)
}
set context(context) { get realm() {
this.#audience = context return this.#realm
this.setAttribute("context", context) }
}
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)
}
}) })
/*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")
})
}*/
/*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')
})
}*/