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)