Skip to content

Commit ad0c042

Browse files
trusktrtrusktr
committed
add missing style sheet from meteor server, add code to get auth credentials from meteor server, describe steps for connecting a client to meteor
1 parent 5dc7711 commit ad0c042

File tree

2 files changed

+155
-73
lines changed

2 files changed

+155
-73
lines changed

‎index.html

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
<link rel="stylesheet" href="/modules/prismjs/plugins/line-numbers/prism-line-numbers.css" />
5757

5858
<link rel="stylesheet" href="/styles/index.css" />
59+
60+
<!-- Connect the static docs site to the lume.io's Meteor server. -->
61+
<script src="./load-meteor.js"></script>
5962
</head>
6063
<body class="line-numbers">
6164
<div id="app"></div>
@@ -91,7 +94,15 @@
9194
import '@lume/live-code'
9295
</script>
9396

94-
<!-- Connect the static docs site to the lume.io's Meteor server. -->
95-
<script src="./load-meteor.js"></script>
97+
<blaze-component id="loginButtons" tmpl="loginButtons" data='{"align": "right"}'></blaze-component>
98+
<style>
99+
blaze-component {
100+
display: block;
101+
position: absolute;
102+
top: 0;
103+
right: 0;
104+
z-index: 888;
105+
}
106+
</style>
96107
</body>
97108
</html>

‎load-meteor.js

Lines changed: 142 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,161 @@
1+
/**
2+
* Steps for connecting a client to Meteor:
3+
* - Ensure that the server will send correct CORS headers, namely
4+
* `Access-Control-Allow-Origin` based on which domains are allowed to access
5+
* the content from the main origin, otherwise loading modules scripts and CSS
6+
* links will not work.
7+
* - Copy the __meteor_runtime_config__ from the Meteor server's HTML.
8+
* - Set DDP_DEFAULT_CONNECTION_URL and ROOT_URL in __meteor_runtime_config__ to
9+
* the server URL whether localhost or production.
10+
* - Define a cacheBust variable to bust the cache for the Meteor server's
11+
* files; increment it when the server's files change.
12+
* - Copy the Meteor server's JS scripts and CSS links from the HTML.
13+
* - Paste the Meteor server's JS scripts and CSS links into the new HTML here,
14+
* with the ROOT_URL prefixed to the script and link URLs, the random hashes
15+
* replaced with the cacheBust variable, and a crossorigin="anonymous"
16+
* attribute added to any CSS links (or JavaScript that may want to access
17+
* the CSS OM of the imported CSS will fail).
18+
* - Finally, import our own code from the Meteor server (for example entry.js)
19+
* using a script tag with type="module".
20+
* - When packages are added or removed from the server, follow these steps
21+
* again to ensure that the list of scripts and links here is up to date.
22+
* - Add postMessage code to communicate with the main origin (where the server
23+
* is hosted) via iframe to get the login credentials, and set them in
24+
* localStorage to log ourselves in on the newly attached client. Note, set CORS
25+
* headers in the meteor server for security to allow only your own domains to
26+
* access the main origin in an iframe, otherwise anyone can use an iframe to
27+
* get your credentials on any website you visit.
28+
*/
29+
130
{
231
const isDev = location.host.includes('localhost')
3-
const root = isDev ? 'http://localhost:8765' : 'https://lume.io'
32+
const mainOrigin = isDev ? 'http://localhost:8765' : 'https://lume.io'
433

534
__meteor_runtime_config__ = JSON.parse(
635
decodeURIComponent(
736
'%7B%22meteorRelease%22%3A%22METEOR%403.1.2%22%2C%22gitCommitHash%22%3A%227d31a24753d18307d7bc7f56adc080a3fc86b3b5%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22debug%22%3Afalse%2C%22ROOT_URL%22%3A%22https%3A%2F%2Flume-io-20950.nodechef.com%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22reactFastRefreshEnabled%22%3Atrue%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%22465660ba89c48b54b5ea176a5beefeab8c2947e5%22%2C%22versionRefreshable%22%3A%221952018619999f014765d73c14db1f446971e849%22%2C%22versionNonRefreshable%22%3A%22465660ba89c48b54b5ea176a5beefeab8c2947e5%22%2C%22versionReplaceable%22%3A%221952018619999f014765d73c14db1f446971e849%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%227e45b3eb2b7c0bb2dba58ca7ed0a0b0d218bfced%22%2C%22versionRefreshable%22%3A%221952018619999f014765d73c14db1f446971e849%22%2C%22versionNonRefreshable%22%3A%227e45b3eb2b7c0bb2dba58ca7ed0a0b0d218bfced%22%2C%22versionReplaceable%22%3A%221952018619999f014765d73c14db1f446971e849%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22q04iv5yj40nv1s0iw0f%22%7D%2C%22appId%22%3A%22q04iv5yj40nv1s0iw0f%22%2C%22isModern%22%3Atrue%7D',
837
),
938
)
1039

11-
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = root
12-
__meteor_runtime_config__.ROOT_URL = root
40+
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = mainOrigin
41+
__meteor_runtime_config__.ROOT_URL = mainOrigin
1342

1443
// Any time we update the Meteor server's scripts, we need to update this list of scripts, and increment the cacheBust value.
1544
const cacheBust = 0
1645

1746
document.write(/*html*/ `
18-
<script type="text/javascript" src="${root}/packages/core-runtime.js?hash=${cacheBust}"></script>
19-
<script type="text/javascript" src="${root}/packages/meteor.js?hash=${cacheBust}"></script>
20-
<script type="text/javascript" src="${root}/packages/modules-runtime.js?hash=${cacheBust}"></script>
21-
<script type="text/javascript" src="${root}/packages/modules.js?hash=${cacheBust}"></script>
22-
<script type="text/javascript" src="${root}/packages/react-fast-refresh.js?hash=${cacheBust}"></script>
23-
<script type="text/javascript" src="${root}/packages/ecmascript.js?hash=${cacheBust}"></script>
24-
<script type="text/javascript" src="${root}/packages/ecmascript-runtime.js?hash=${cacheBust}"></script>
25-
<script type="text/javascript" src="${root}/packages/babel-runtime.js?hash=${cacheBust}"></script>
26-
<script type="text/javascript" src="${root}/packages/modern-browsers.js?hash=${cacheBust}"></script>
27-
<script type="text/javascript" src="${root}/packages/promise.js?hash=${cacheBust}"></script>
28-
<script type="text/javascript" src="${root}/packages/fetch.js?hash=${cacheBust}"></script>
29-
<script type="text/javascript" src="${root}/packages/dynamic-import.js?hash=${cacheBust}"></script>
30-
<script type="text/javascript" src="${root}/packages/ecmascript-runtime-client.js?hash=${cacheBust}"></script>
31-
<script type="text/javascript" src="${root}/packages/webapp.js?hash=${cacheBust}"></script>
32-
<script type="text/javascript" src="${root}/packages/base64.js?hash=${cacheBust}"></script>
33-
<script type="text/javascript" src="${root}/packages/ejson.js?hash=${cacheBust}"></script>
34-
<script type="text/javascript" src="${root}/packages/check.js?hash=${cacheBust}"></script>
35-
<script type="text/javascript" src="${root}/packages/random.js?hash=${cacheBust}"></script>
36-
<script type="text/javascript" src="${root}/packages/tracker.js?hash=${cacheBust}"></script>
37-
<script type="text/javascript" src="${root}/packages/retry.js?hash=${cacheBust}"></script>
38-
<script type="text/javascript" src="${root}/packages/id-map.js?hash=${cacheBust}"></script>
39-
<script type="text/javascript" src="${root}/packages/callback-hook.js?hash=${cacheBust}"></script>
40-
<script type="text/javascript" src="${root}/packages/ddp-common.js?hash=${cacheBust}"></script>
41-
<script type="text/javascript" src="${root}/packages/reload.js?hash=${cacheBust}"></script>
42-
<script type="text/javascript" src="${root}/packages/socket-stream-client.js?hash=${cacheBust}"></script>
43-
<script type="text/javascript" src="${root}/packages/diff-sequence.js?hash=${cacheBust}"></script>
44-
<script type="text/javascript" src="${root}/packages/mongo-id.js?hash=${cacheBust}"></script>
45-
<script type="text/javascript" src="${root}/packages/ddp-client.js?hash=${cacheBust}"></script>
46-
<script type="text/javascript" src="${root}/packages/ddp.js?hash=${cacheBust}"></script>
47-
<script type="text/javascript" src="${root}/packages/mobile-experience.js?hash=${cacheBust}"></script>
48-
<script type="text/javascript" src="${root}/packages/geojson-utils.js?hash=${cacheBust}"></script>
49-
<script type="text/javascript" src="${root}/packages/ordered-dict.js?hash=${cacheBust}"></script>
50-
<script type="text/javascript" src="${root}/packages/minimongo.js?hash=${cacheBust}"></script>
51-
<script type="text/javascript" src="${root}/packages/ddp-server.js?hash=${cacheBust}"></script>
52-
<script type="text/javascript" src="${root}/packages/allow-deny.js?hash=${cacheBust}"></script>
53-
<script type="text/javascript" src="${root}/packages/babel-compiler.js?hash=${cacheBust}"></script>
54-
<script type="text/javascript" src="${root}/packages/typescript.js?hash=${cacheBust}"></script>
55-
<script type="text/javascript" src="${root}/packages/mongo-dev-server.js?hash=${cacheBust}"></script>
56-
<script type="text/javascript" src="${root}/packages/logging.js?hash=${cacheBust}"></script>
57-
<script type="text/javascript" src="${root}/packages/mongo.js?hash=${cacheBust}"></script>
58-
<script type="text/javascript" src="${root}/packages/reactive-var.js?hash=${cacheBust}"></script>
59-
<script type="text/javascript" src="${root}/packages/shell-server.js?hash=${cacheBust}"></script>
60-
<script type="text/javascript" src="${root}/packages/static-html.js?hash=${cacheBust}"></script>
61-
<script type="text/javascript" src="${root}/packages/ddp-rate-limiter.js?hash=${cacheBust}"></script>
62-
<script type="text/javascript" src="${root}/packages/localstorage.js?hash=${cacheBust}"></script>
63-
<script type="text/javascript" src="${root}/packages/url.js?hash=${cacheBust}"></script>
64-
<script type="text/javascript" src="${root}/packages/jquery.js?hash=${cacheBust}"></script>
65-
<script type="text/javascript" src="${root}/packages/observe-sequence.js?hash=${cacheBust}"></script>
66-
<script type="text/javascript" src="${root}/packages/htmljs.js?hash=${cacheBust}"></script>
67-
<script type="text/javascript" src="${root}/packages/blaze.js?hash=${cacheBust}"></script>
68-
<script type="text/javascript" src="${root}/packages/accounts-base.js?hash=${cacheBust}"></script>
69-
<script type="text/javascript" src="${root}/packages/sha.js?hash=${cacheBust}"></script>
70-
<script type="text/javascript" src="${root}/packages/accounts-password.js?hash=${cacheBust}"></script>
71-
<script type="text/javascript" src="${root}/packages/service-configuration.js?hash=${cacheBust}"></script>
72-
<script type="text/javascript" src="${root}/packages/spacebars.js?hash=${cacheBust}"></script>
73-
<script type="text/javascript" src="${root}/packages/templating-compiler.js?hash=${cacheBust}"></script>
74-
<script type="text/javascript" src="${root}/packages/templating-runtime.js?hash=${cacheBust}"></script>
75-
<script type="text/javascript" src="${root}/packages/templating.js?hash=${cacheBust}"></script>
76-
<script type="text/javascript" src="${root}/packages/reactive-dict.js?hash=${cacheBust}"></script>
77-
<script type="text/javascript" src="${root}/packages/session.js?hash=${cacheBust}"></script>
78-
<script type="text/javascript" src="${root}/packages/less.js?hash=${cacheBust}"></script>
79-
<script type="text/javascript" src="${root}/packages/accounts-ui-unstyled.js?hash=${cacheBust}"></script>
80-
<script type="text/javascript" src="${root}/packages/accounts-ui.js?hash=${cacheBust}"></script>
81-
<script type="text/javascript" src="${root}/packages/ferjep_persistent-session.js?hash=${cacheBust}"></script>
82-
<script type="text/javascript" src="${root}/packages/zodern_types.js?hash=${cacheBust}"></script>
83-
<script type="text/javascript" src="${root}/packages/launch-screen.js?hash=${cacheBust}"></script>
84-
<script type="text/javascript" src="${root}/global-imports.js?hash=${cacheBust}"></script>
47+
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="${mainOrigin}/packages/accounts-ui/login_buttons.less?hash=${cacheBust}" crossorigin="anonymous" />
48+
49+
<script type="text/javascript" src="${mainOrigin}/packages/core-runtime.js?hash=${cacheBust}"></script>
50+
<script type="text/javascript" src="${mainOrigin}/packages/meteor.js?hash=${cacheBust}"></script>
51+
<script type="text/javascript" src="${mainOrigin}/packages/modules-runtime.js?hash=${cacheBust}"></script>
52+
<script type="text/javascript" src="${mainOrigin}/packages/modules.js?hash=${cacheBust}"></script>
53+
<script type="text/javascript" src="${mainOrigin}/packages/react-fast-refresh.js?hash=${cacheBust}"></script>
54+
<script type="text/javascript" src="${mainOrigin}/packages/ecmascript.js?hash=${cacheBust}"></script>
55+
<script type="text/javascript" src="${mainOrigin}/packages/ecmascript-runtime.js?hash=${cacheBust}"></script>
56+
<script type="text/javascript" src="${mainOrigin}/packages/babel-runtime.js?hash=${cacheBust}"></script>
57+
<script type="text/javascript" src="${mainOrigin}/packages/modern-browsers.js?hash=${cacheBust}"></script>
58+
<script type="text/javascript" src="${mainOrigin}/packages/promise.js?hash=${cacheBust}"></script>
59+
<script type="text/javascript" src="${mainOrigin}/packages/fetch.js?hash=${cacheBust}"></script>
60+
<script type="text/javascript" src="${mainOrigin}/packages/dynamic-import.js?hash=${cacheBust}"></script>
61+
<script type="text/javascript" src="${mainOrigin}/packages/ecmascript-runtime-client.js?hash=${cacheBust}"></script>
62+
<script type="text/javascript" src="${mainOrigin}/packages/webapp.js?hash=${cacheBust}"></script>
63+
<script type="text/javascript" src="${mainOrigin}/packages/base64.js?hash=${cacheBust}"></script>
64+
<script type="text/javascript" src="${mainOrigin}/packages/ejson.js?hash=${cacheBust}"></script>
65+
<script type="text/javascript" src="${mainOrigin}/packages/check.js?hash=${cacheBust}"></script>
66+
<script type="text/javascript" src="${mainOrigin}/packages/random.js?hash=${cacheBust}"></script>
67+
<script type="text/javascript" src="${mainOrigin}/packages/tracker.js?hash=${cacheBust}"></script>
68+
<script type="text/javascript" src="${mainOrigin}/packages/retry.js?hash=${cacheBust}"></script>
69+
<script type="text/javascript" src="${mainOrigin}/packages/id-map.js?hash=${cacheBust}"></script>
70+
<script type="text/javascript" src="${mainOrigin}/packages/callback-hook.js?hash=${cacheBust}"></script>
71+
<script type="text/javascript" src="${mainOrigin}/packages/ddp-common.js?hash=${cacheBust}"></script>
72+
<script type="text/javascript" src="${mainOrigin}/packages/reload.js?hash=${cacheBust}"></script>
73+
<script type="text/javascript" src="${mainOrigin}/packages/socket-stream-client.js?hash=${cacheBust}"></script>
74+
<script type="text/javascript" src="${mainOrigin}/packages/diff-sequence.js?hash=${cacheBust}"></script>
75+
<script type="text/javascript" src="${mainOrigin}/packages/mongo-id.js?hash=${cacheBust}"></script>
76+
<script type="text/javascript" src="${mainOrigin}/packages/ddp-client.js?hash=${cacheBust}"></script>
77+
<script type="text/javascript" src="${mainOrigin}/packages/ddp.js?hash=${cacheBust}"></script>
78+
<script type="text/javascript" src="${mainOrigin}/packages/mobile-experience.js?hash=${cacheBust}"></script>
79+
<script type="text/javascript" src="${mainOrigin}/packages/geojson-utils.js?hash=${cacheBust}"></script>
80+
<script type="text/javascript" src="${mainOrigin}/packages/ordered-dict.js?hash=${cacheBust}"></script>
81+
<script type="text/javascript" src="${mainOrigin}/packages/minimongo.js?hash=${cacheBust}"></script>
82+
<script type="text/javascript" src="${mainOrigin}/packages/ddp-server.js?hash=${cacheBust}"></script>
83+
<script type="text/javascript" src="${mainOrigin}/packages/allow-deny.js?hash=${cacheBust}"></script>
84+
<script type="text/javascript" src="${mainOrigin}/packages/babel-compiler.js?hash=${cacheBust}"></script>
85+
<script type="text/javascript" src="${mainOrigin}/packages/typescript.js?hash=${cacheBust}"></script>
86+
<script type="text/javascript" src="${mainOrigin}/packages/mongo-dev-server.js?hash=${cacheBust}"></script>
87+
<script type="text/javascript" src="${mainOrigin}/packages/logging.js?hash=${cacheBust}"></script>
88+
<script type="text/javascript" src="${mainOrigin}/packages/mongo.js?hash=${cacheBust}"></script>
89+
<script type="text/javascript" src="${mainOrigin}/packages/reactive-var.js?hash=${cacheBust}"></script>
90+
<script type="text/javascript" src="${mainOrigin}/packages/shell-server.js?hash=${cacheBust}"></script>
91+
<script type="text/javascript" src="${mainOrigin}/packages/static-html.js?hash=${cacheBust}"></script>
92+
<script type="text/javascript" src="${mainOrigin}/packages/ddp-rate-limiter.js?hash=${cacheBust}"></script>
93+
<script type="text/javascript" src="${mainOrigin}/packages/localstorage.js?hash=${cacheBust}"></script>
94+
<script type="text/javascript" src="${mainOrigin}/packages/url.js?hash=${cacheBust}"></script>
95+
<script type="text/javascript" src="${mainOrigin}/packages/jquery.js?hash=${cacheBust}"></script>
96+
<script type="text/javascript" src="${mainOrigin}/packages/observe-sequence.js?hash=${cacheBust}"></script>
97+
<script type="text/javascript" src="${mainOrigin}/packages/htmljs.js?hash=${cacheBust}"></script>
98+
<script type="text/javascript" src="${mainOrigin}/packages/blaze.js?hash=${cacheBust}"></script>
99+
<script type="text/javascript" src="${mainOrigin}/packages/accounts-base.js?hash=${cacheBust}"></script>
100+
<script type="text/javascript" src="${mainOrigin}/packages/sha.js?hash=${cacheBust}"></script>
101+
<script type="text/javascript" src="${mainOrigin}/packages/accounts-password.js?hash=${cacheBust}"></script>
102+
<script type="text/javascript" src="${mainOrigin}/packages/service-configuration.js?hash=${cacheBust}"></script>
103+
<script type="text/javascript" src="${mainOrigin}/packages/spacebars.js?hash=${cacheBust}"></script>
104+
<script type="text/javascript" src="${mainOrigin}/packages/templating-compiler.js?hash=${cacheBust}"></script>
105+
<script type="text/javascript" src="${mainOrigin}/packages/templating-runtime.js?hash=${cacheBust}"></script>
106+
<script type="text/javascript" src="${mainOrigin}/packages/templating.js?hash=${cacheBust}"></script>
107+
<script type="text/javascript" src="${mainOrigin}/packages/reactive-dict.js?hash=${cacheBust}"></script>
108+
<script type="text/javascript" src="${mainOrigin}/packages/session.js?hash=${cacheBust}"></script>
109+
<script type="text/javascript" src="${mainOrigin}/packages/less.js?hash=${cacheBust}"></script>
110+
<script type="text/javascript" src="${mainOrigin}/packages/accounts-ui-unstyled.js?hash=${cacheBust}"></script>
111+
<script type="text/javascript" src="${mainOrigin}/packages/accounts-ui.js?hash=${cacheBust}"></script>
112+
<script type="text/javascript" src="${mainOrigin}/packages/ferjep_persistent-session.js?hash=${cacheBust}"></script>
113+
<script type="text/javascript" src="${mainOrigin}/packages/zodern_types.js?hash=${cacheBust}"></script>
114+
<script type="text/javascript" src="${mainOrigin}/packages/launch-screen.js?hash=${cacheBust}"></script>
115+
<script type="text/javascript" src="${mainOrigin}/global-imports.js?hash=${cacheBust}"></script>
85116
86117
<script type="module">
87-
import '${root}/entry.js'
118+
const mainOrigin = '${mainOrigin}'
119+
120+
if (!localStorage.getItem('Meteor.loginToken')) {
121+
const iframe = document.createElement('iframe')
122+
iframe.style.display = 'none'
123+
iframe.src = mainOrigin
124+
console.log('iframe src', iframe.src, mainOrigin)
125+
document.body.append(iframe)
126+
127+
// listen for credentials message
128+
window.addEventListener('message', event => {
129+
if (event.data.type === 'loginCredentials') {
130+
console.log('received credentials', event.data)
131+
localStorage.setItem('Meteor.loginToken', event.data.token)
132+
localStorage.setItem('Meteor.loginTokenExpires', event.data.expires)
133+
localStorage.setItem('Meteor.userId', event.data.userId)
134+
}
135+
})
136+
137+
await new Promise(resolve => {
138+
iframe.addEventListener('load', async () => {
139+
while (!localStorage.getItem('Meteor.loginToken')) {
140+
// Post a message to the iframe to get credentials.
141+
console.log('post message for credentials')
142+
//iframe.contentWindow.postMessage( { type: 'getLoginCredentials' }, {targetOrigin: mainOrigin})
143+
iframe.contentWindow.postMessage( { type: 'getLoginCredentials' }, {targetOrigin: '*'})
144+
//iframe.contentWindow.postMessage( { type: 'getLoginCredentials' } )
145+
await new Promise(resolve => setTimeout(resolve, 50))
146+
}
147+
148+
resolve()
149+
})
150+
})
151+
152+
iframe.src = ''
153+
iframe.remove()
154+
}
155+
156+
// This includes imports such as the <blaze-component> element.
157+
await import ('${mainOrigin}/entry.js')
158+
88159
</script>
89160
`)
90161
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy