feat(client,sdk): retrieve auth token from parent frame + better resize detection
arcad/edge/pipeline/head This commit looks good
Details
arcad/edge/pipeline/head This commit looks good
Details
This commit is contained in:
parent
f5283b86ed
commit
4db7576b12
|
@ -38,7 +38,7 @@ describe('Remote Procedure Call', function () {
|
||||||
|
|
||||||
|
|
||||||
it('should call the add() method repetitively and keep count of the sent values', function () {
|
it('should call the add() method repetitively and keep count of the sent values', function () {
|
||||||
this.timeout(10000);
|
this.timeout(30000);
|
||||||
|
|
||||||
const values = [];
|
const values = [];
|
||||||
for (let i = 0; i <= 1000; i++) {
|
for (let i = 0; i <= 1000; i++) {
|
||||||
|
|
|
@ -3865,6 +3865,8 @@ var Edge = (() => {
|
||||||
var import_sockjs_client = __toESM(require_entry());
|
var import_sockjs_client = __toESM(require_entry());
|
||||||
var EventTypeMessage = "message";
|
var EventTypeMessage = "message";
|
||||||
var EdgeAuth = "edge-auth";
|
var EdgeAuth = "edge-auth";
|
||||||
|
var EdgeAuthTokenRequest = "edge_auth_token_request";
|
||||||
|
var EdgeAuthTokenResponse = "edge_auth_token_reponse";
|
||||||
var Client = class extends EventTarget {
|
var Client = class extends EventTarget {
|
||||||
constructor(autoReconnect = true) {
|
constructor(autoReconnect = true) {
|
||||||
super();
|
super();
|
||||||
|
@ -3872,6 +3874,7 @@ var Edge = (() => {
|
||||||
this._onConnectionClose = this._onConnectionClose.bind(this);
|
this._onConnectionClose = this._onConnectionClose.bind(this);
|
||||||
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
||||||
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
||||||
|
this._handleEdgeAuthTokenRequest = this._handleEdgeAuthTokenRequest.bind(this);
|
||||||
this._rpcID = 0;
|
this._rpcID = 0;
|
||||||
this._pendingRPC = {};
|
this._pendingRPC = {};
|
||||||
this._queue = [];
|
this._queue = [];
|
||||||
|
@ -3884,12 +3887,22 @@ var Edge = (() => {
|
||||||
this.send = this.send.bind(this);
|
this.send = this.send.bind(this);
|
||||||
this.upload = this.upload.bind(this);
|
this.upload = this.upload.bind(this);
|
||||||
this.addEventListener(EventTypeMessage, this._handleRPCResponse);
|
this.addEventListener(EventTypeMessage, this._handleRPCResponse);
|
||||||
|
window.addEventListener("message", this._handleEdgeAuthTokenRequest);
|
||||||
}
|
}
|
||||||
connect(token = "") {
|
connect(token = "") {
|
||||||
|
let getToken;
|
||||||
|
if (token) {
|
||||||
|
getToken = Promise.resolve(token);
|
||||||
|
} else {
|
||||||
|
getToken = this._retrieveToken();
|
||||||
|
}
|
||||||
|
return getToken.then((token2) => this._connect(token2));
|
||||||
|
}
|
||||||
|
disconnect() {
|
||||||
|
this._cleanupConnection();
|
||||||
|
}
|
||||||
|
_connect(token) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (token == "") {
|
|
||||||
token = this._getAuthCookieToken();
|
|
||||||
}
|
|
||||||
const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
|
const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
|
||||||
this._log("opening connection to", url);
|
this._log("opening connection to", url);
|
||||||
const conn = new import_sockjs_client.default(url);
|
const conn = new import_sockjs_client.default(url);
|
||||||
|
@ -3920,15 +3933,64 @@ var Edge = (() => {
|
||||||
conn.addEventListener("close", onError);
|
conn.addEventListener("close", onError);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
disconnect() {
|
_retrieveToken() {
|
||||||
this._cleanupConnection();
|
let token = this._getAuthCookieToken();
|
||||||
|
if (token) {
|
||||||
|
return Promise.resolve(token);
|
||||||
|
}
|
||||||
|
return this._getParentFrameToken();
|
||||||
|
;
|
||||||
}
|
}
|
||||||
_getAuthCookieToken() {
|
_getAuthCookieToken() {
|
||||||
const cookie = document.cookie.split("; ").find((row) => row.startsWith(EdgeAuth));
|
const cookie = document.cookie.split("; ").find((row) => row.startsWith(EdgeAuth));
|
||||||
|
let token = "";
|
||||||
if (cookie) {
|
if (cookie) {
|
||||||
return cookie.split("=")[1];
|
token = cookie.split("=")[1];
|
||||||
}
|
}
|
||||||
return "";
|
return token;
|
||||||
|
}
|
||||||
|
_getParentFrameToken(timeout = 5e3) {
|
||||||
|
if (!window.parent || window.parent === window) {
|
||||||
|
return Promise.resolve("");
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let timedOut = false;
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
timedOut = true;
|
||||||
|
reject(new Error("Edge auth token request timed out !"));
|
||||||
|
}, timeout);
|
||||||
|
const listener = (evt) => {
|
||||||
|
const message = evt.data;
|
||||||
|
if (!message || !message.type || !message.data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (message.type !== EdgeAuthTokenResponse) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.parent.removeEventListener("message", listener);
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
if (timedOut)
|
||||||
|
return;
|
||||||
|
if (!message.data || !message.data.token) {
|
||||||
|
reject("Unexpected auth token request response !");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
resolve(message.data.token);
|
||||||
|
};
|
||||||
|
window.parent.addEventListener("message", listener);
|
||||||
|
window.parent.postMessage({ type: EdgeAuthTokenRequest }, "*");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_handleEdgeAuthTokenRequest(evt) {
|
||||||
|
const message = evt.data;
|
||||||
|
if (!message || !message.type || message.type !== EdgeAuthTokenRequest) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!evt.source) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const token = this._getAuthCookieToken();
|
||||||
|
evt.source.postMessage({ type: EdgeAuthTokenResponse, data: { token } });
|
||||||
}
|
}
|
||||||
_onConnectionMessage(evt) {
|
_onConnectionMessage(evt) {
|
||||||
const rawMessage = JSON.parse(evt.data);
|
const rawMessage = JSON.parse(evt.data);
|
||||||
|
@ -4113,6 +4175,9 @@ var Edge = (() => {
|
||||||
}
|
}
|
||||||
_handleWindowMessage(evt) {
|
_handleWindowMessage(evt) {
|
||||||
const message = evt.data;
|
const message = evt.data;
|
||||||
|
if (!message || !message.type || !message.data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const event = new CustomEvent(message.type, {
|
const event = new CustomEvent(message.type, {
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
detail: message.data
|
detail: message.data
|
||||||
|
@ -4136,27 +4201,15 @@ var Edge = (() => {
|
||||||
}
|
}
|
||||||
_initResizeObserver() {
|
_initResizeObserver() {
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
const body2 = document.body, html = document.documentElement;
|
const rect = document.documentElement.getBoundingClientRect();
|
||||||
const height = Math.max(
|
const height = rect.height;
|
||||||
body2.scrollHeight,
|
const width = rect.width;
|
||||||
body2.offsetHeight,
|
|
||||||
html.clientHeight,
|
|
||||||
html.scrollHeight,
|
|
||||||
html.offsetHeight
|
|
||||||
);
|
|
||||||
const width = Math.max(
|
|
||||||
body2.scrollWidth,
|
|
||||||
body2.offsetWidth,
|
|
||||||
html.clientWidth,
|
|
||||||
html.scrollWidth,
|
|
||||||
html.offsetWidth
|
|
||||||
);
|
|
||||||
this.post({ type: "size_changed" /* SIZE_CHANGED */, data: { height, width } });
|
this.post({ type: "size_changed" /* SIZE_CHANGED */, data: { height, width } });
|
||||||
});
|
});
|
||||||
const body = document.body;
|
const body = document.body;
|
||||||
if (!body)
|
if (!body)
|
||||||
return;
|
return;
|
||||||
resizeObserver.observe(body);
|
resizeObserver.observe(document.documentElement);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -5,6 +5,8 @@ import SockJS from 'sockjs-client';
|
||||||
|
|
||||||
const EventTypeMessage = "message";
|
const EventTypeMessage = "message";
|
||||||
const EdgeAuth = "edge-auth"
|
const EdgeAuth = "edge-auth"
|
||||||
|
const EdgeAuthTokenRequest = "edge_auth_token_request"
|
||||||
|
const EdgeAuthTokenResponse = "edge_auth_token_reponse"
|
||||||
|
|
||||||
export class Client extends EventTarget {
|
export class Client extends EventTarget {
|
||||||
|
|
||||||
|
@ -19,10 +21,11 @@ export class Client extends EventTarget {
|
||||||
constructor(autoReconnect = true) {
|
constructor(autoReconnect = true) {
|
||||||
super();
|
super();
|
||||||
this._conn = null;
|
this._conn = null;
|
||||||
|
|
||||||
this._onConnectionClose = this._onConnectionClose.bind(this);
|
this._onConnectionClose = this._onConnectionClose.bind(this);
|
||||||
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
||||||
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
||||||
|
this._handleEdgeAuthTokenRequest = this._handleEdgeAuthTokenRequest.bind(this);
|
||||||
|
|
||||||
this._rpcID = 0;
|
this._rpcID = 0;
|
||||||
this._pendingRPC = {};
|
this._pendingRPC = {};
|
||||||
|
@ -30,70 +33,146 @@ export class Client extends EventTarget {
|
||||||
this._reconnectionDelay = 250;
|
this._reconnectionDelay = 250;
|
||||||
this._autoReconnect = autoReconnect;
|
this._autoReconnect = autoReconnect;
|
||||||
this.debug = false;
|
this.debug = false;
|
||||||
|
|
||||||
this.connect = this.connect.bind(this);
|
this.connect = this.connect.bind(this);
|
||||||
this.disconnect = this.disconnect.bind(this);
|
this.disconnect = this.disconnect.bind(this);
|
||||||
this.rpc = this.rpc.bind(this);
|
this.rpc = this.rpc.bind(this);
|
||||||
this.send = this.send.bind(this);
|
this.send = this.send.bind(this);
|
||||||
this.upload = this.upload.bind(this);
|
this.upload = this.upload.bind(this);
|
||||||
|
|
||||||
|
|
||||||
this.addEventListener(EventTypeMessage, this._handleRPCResponse);
|
this.addEventListener(EventTypeMessage, this._handleRPCResponse);
|
||||||
|
window.addEventListener('message', this._handleEdgeAuthTokenRequest);
|
||||||
}
|
}
|
||||||
|
|
||||||
connect(token = "") {
|
connect(token = ""): Promise<Client> {
|
||||||
return new Promise((resolve, reject) => {
|
let getToken: Promise<string>
|
||||||
if (token == "") {
|
|
||||||
token = this._getAuthCookieToken()
|
|
||||||
}
|
|
||||||
|
|
||||||
const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
|
if (token) {
|
||||||
this._log("opening connection to", url);
|
getToken = Promise.resolve(token)
|
||||||
const conn: any = new SockJS(url);
|
} else {
|
||||||
|
getToken = this._retrieveToken()
|
||||||
|
}
|
||||||
|
|
||||||
const onOpen = () => {
|
return getToken.then(token => this._connect(token))
|
||||||
this._log('client connected');
|
|
||||||
resetHandlers();
|
|
||||||
conn.onclose = this._onConnectionClose;
|
|
||||||
conn.onmessage = this._onConnectionMessage;
|
|
||||||
this._conn = conn;
|
|
||||||
this._sendQueued();
|
|
||||||
setTimeout(() => {
|
|
||||||
this._dispatchConnect();
|
|
||||||
}, 0);
|
|
||||||
return resolve(this);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onError = (evt) => {
|
|
||||||
resetHandlers();
|
|
||||||
this._scheduleReconnection();
|
|
||||||
return reject(evt);
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetHandlers = () => {
|
|
||||||
conn.removeEventListener('open', onOpen);
|
|
||||||
conn.removeEventListener('close', onError);
|
|
||||||
conn.removeEventListener('error', onError);
|
|
||||||
};
|
|
||||||
|
|
||||||
conn.addEventListener('open', onOpen);
|
|
||||||
conn.addEventListener('error', onError);
|
|
||||||
conn.addEventListener('close', onError);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnect() {
|
disconnect() {
|
||||||
this._cleanupConnection();
|
this._cleanupConnection();
|
||||||
}
|
}
|
||||||
|
|
||||||
_getAuthCookieToken() {
|
_connect(token: string): Promise<Client> {
|
||||||
const cookie = document.cookie.split("; ")
|
return new Promise((resolve, reject) => {
|
||||||
.find((row) => row.startsWith(EdgeAuth));
|
const url = `//${document.location.host}/edge/sock?${EdgeAuth}=${token}`;
|
||||||
|
this._log("opening connection to", url);
|
||||||
if (cookie) {
|
const conn: any = new SockJS(url);
|
||||||
return cookie.split("=")[1];
|
|
||||||
|
const onOpen = () => {
|
||||||
|
this._log('client connected');
|
||||||
|
resetHandlers();
|
||||||
|
conn.onclose = this._onConnectionClose;
|
||||||
|
conn.onmessage = this._onConnectionMessage;
|
||||||
|
this._conn = conn;
|
||||||
|
this._sendQueued();
|
||||||
|
setTimeout(() => {
|
||||||
|
this._dispatchConnect();
|
||||||
|
}, 0);
|
||||||
|
return resolve(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onError = (evt) => {
|
||||||
|
resetHandlers();
|
||||||
|
this._scheduleReconnection();
|
||||||
|
return reject(evt);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetHandlers = () => {
|
||||||
|
conn.removeEventListener('open', onOpen);
|
||||||
|
conn.removeEventListener('close', onError);
|
||||||
|
conn.removeEventListener('error', onError);
|
||||||
|
};
|
||||||
|
|
||||||
|
conn.addEventListener('open', onOpen);
|
||||||
|
conn.addEventListener('error', onError);
|
||||||
|
conn.addEventListener('close', onError);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
_retrieveToken(): Promise<string> {
|
||||||
|
let token = this._getAuthCookieToken();
|
||||||
|
if (token) {
|
||||||
|
return Promise.resolve(token);
|
||||||
}
|
}
|
||||||
|
|
||||||
return "";
|
return this._getParentFrameToken();;
|
||||||
|
}
|
||||||
|
|
||||||
|
_getAuthCookieToken(): string {
|
||||||
|
const cookie = document.cookie.split("; ")
|
||||||
|
.find((row) => row.startsWith(EdgeAuth));
|
||||||
|
|
||||||
|
let token = "";
|
||||||
|
|
||||||
|
if (cookie) {
|
||||||
|
token = cookie.split("=")[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
return token;
|
||||||
|
}
|
||||||
|
|
||||||
|
_getParentFrameToken(timeout = 5000): Promise<string> {
|
||||||
|
if (!window.parent || window.parent === window) {
|
||||||
|
return Promise.resolve("");
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let timedOut = false;
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
timedOut = true;
|
||||||
|
reject(new Error("Edge auth token request timed out !"));
|
||||||
|
}, timeout);
|
||||||
|
|
||||||
|
const listener = (evt) => {
|
||||||
|
const message = evt.data;
|
||||||
|
|
||||||
|
if (!message || !message.type || !message.data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message.type !== EdgeAuthTokenResponse) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.parent.removeEventListener('message', listener);
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
|
if (timedOut) return;
|
||||||
|
|
||||||
|
if (!message.data || !message.data.token) {
|
||||||
|
reject("Unexpected auth token request response !");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve(message.data.token);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.parent.addEventListener('message', listener);
|
||||||
|
window.parent.postMessage({ type: EdgeAuthTokenRequest }, '*');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleEdgeAuthTokenRequest(evt: MessageEvent) {
|
||||||
|
const message = evt.data;
|
||||||
|
if (!message || !message.type || message.type !== EdgeAuthTokenRequest) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!evt.source) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = this._getAuthCookieToken();
|
||||||
|
evt.source.postMessage({ type: EdgeAuthTokenResponse, data: { token }});
|
||||||
}
|
}
|
||||||
|
|
||||||
_onConnectionMessage(evt) {
|
_onConnectionMessage(evt) {
|
||||||
|
@ -108,7 +187,7 @@ export class Client extends EventTarget {
|
||||||
|
|
||||||
_handleRPCResponse(evt) {
|
_handleRPCResponse(evt) {
|
||||||
const { jsonrpc, id, error, result } = evt.detail;
|
const { jsonrpc, id, error, result } = evt.detail;
|
||||||
|
|
||||||
if (jsonrpc !== '2.0' || id === undefined) return;
|
if (jsonrpc !== '2.0' || id === undefined) return;
|
||||||
if (!evt.detail.hasOwnProperty("error") && !evt.detail.hasOwnProperty("result")) return;
|
if (!evt.detail.hasOwnProperty("error") && !evt.detail.hasOwnProperty("result")) return;
|
||||||
|
|
||||||
|
@ -216,20 +295,20 @@ export class Client extends EventTarget {
|
||||||
return this._conn !== null;
|
return this._conn !== null;
|
||||||
}
|
}
|
||||||
|
|
||||||
upload(blob: string|Blob, metadata: any) {
|
upload(blob: string | Blob, metadata: any) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.set("file", blob);
|
formData.set("file", blob);
|
||||||
|
|
||||||
if (metadata) {
|
if (metadata) {
|
||||||
try {
|
try {
|
||||||
formData.set("metadata", JSON.stringify(metadata));
|
formData.set("metadata", JSON.stringify(metadata));
|
||||||
} catch(err) {
|
} catch (err) {
|
||||||
return reject(err);
|
return reject(err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
|
|
||||||
const result = {
|
const result = {
|
||||||
onProgress: null,
|
onProgress: null,
|
||||||
abort: () => xhr.abort(),
|
abort: () => xhr.abort(),
|
||||||
|
@ -239,7 +318,7 @@ export class Client extends EventTarget {
|
||||||
let data;
|
let data;
|
||||||
try {
|
try {
|
||||||
data = JSON.parse(xhr.responseText);
|
data = JSON.parse(xhr.responseText);
|
||||||
} catch(err) {
|
} catch (err) {
|
||||||
reject(err);
|
reject(err);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,6 +37,10 @@ export class CrossFrameMessenger extends EventTarget {
|
||||||
|
|
||||||
_handleWindowMessage(evt: MessageEvent) {
|
_handleWindowMessage(evt: MessageEvent) {
|
||||||
const message = evt.data;
|
const message = evt.data;
|
||||||
|
if (!message || !message.type || !message.data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const event = new CustomEvent(message.type, {
|
const event = new CustomEvent(message.type, {
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
detail: message.data
|
detail: message.data
|
||||||
|
@ -67,14 +71,9 @@ export class CrossFrameMessenger extends EventTarget {
|
||||||
|
|
||||||
_initResizeObserver() {
|
_initResizeObserver() {
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
const body = document.body,
|
const rect = document.documentElement.getBoundingClientRect();
|
||||||
html = document.documentElement;
|
const height = rect.height;
|
||||||
|
const width = rect.width;
|
||||||
const height = Math.max( body.scrollHeight, body.offsetHeight,
|
|
||||||
html.clientHeight, html.scrollHeight, html.offsetHeight );
|
|
||||||
|
|
||||||
const width = Math.max( body.scrollWidth, body.offsetWidth,
|
|
||||||
html.clientWidth, html.scrollWidth, html.offsetWidth );
|
|
||||||
|
|
||||||
this.post({ type: CrossFrameMessageType.SIZE_CHANGED, data: { height, width }});
|
this.post({ type: CrossFrameMessageType.SIZE_CHANGED, data: { height, width }});
|
||||||
});
|
});
|
||||||
|
@ -83,6 +82,6 @@ export class CrossFrameMessenger extends EventTarget {
|
||||||
|
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
resizeObserver.observe(body);
|
resizeObserver.observe(document.documentElement);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue