-
Notifications
You must be signed in to change notification settings - Fork 18
/
google-yolo-iframe.html
109 lines (97 loc) · 4.53 KB
/
google-yolo-iframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
overflow: hidden;
}
/* Overrides for Google Yolo <iframe> */
.google-inserted-frame {
position: static !important; /* Override Google's absolute positioning */
width: calc(100% + 18px) !important; /* Override Google's fixed width to support responsive behavior */
margin: -18px 0 0 0; /* Inside the <iframe>, Google sets some padding. This negative margin attempts to undo it. If their styles change, this number must also change */
}
</style>
<script defer src="https://smartlock.google.com/client"></script>
<script>
const PUBLIC_CLIENT_ID =
'412842310182-nnsbnt2ropvf4ujenj9ueib2vupdd5sj.apps.googleusercontent.com';
const CONFIG = {
supportedAuthMethods: [
'https://accounts.google.com'
],
supportedIdTokenProviders: [{
uri: 'https://accounts.google.com',
clientId: PUBLIC_CLIENT_ID
}]
};
const messageParent = data => {
window.parent.postMessage(data, '*' /* REPLACE BY TOP LEVEL DOMAIN! */);
};
window.onGoogleYoloLoad = (googleyolo) => {
// Set the rendering mode of the IFrame. By default, Google Yolo iframe will decide
// by itself where to position (based on the userAgent). bottomSheet is at the bottom
// of the screen on mobile, navPopout is the top right card on desktop. Forcing the
// rendering mode here to a single value makes sure that we have consistent behavior
// when positioning this iframe.
//
// openyolo is a global reference to https://github.com/openid/OpenYOLO-Web, which is
// what Google Yolo uses under the hood. Hopefully we can call setRenderMode on the
// googleyolo object itself soon.
openyolo.setRenderMode('navPopout');
googleyolo.hint(CONFIG).then((credential) => {
messageParent({ type: 'credential', credential });
}, (error) => {
messageParent({ type: 'error', error });
if (error.type === 'noCredentialsAvailable') {
window.document.body.innerHTML = '<p>Make sure you are signed in to your Google account in this browser. Alternatively, you could fall back to <a href="https://support.google.com/a/answer/60224">Google SSO</a> in this case.</p>';
}
});
// GoogleYolo doesn't insert their iframe immediately. This mutation
// observer watches the <body> to tell when they insert the <iframe> so
// we can style as needed.
const bodyObserver = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeName === 'IFRAME' && node.src.includes('smartlock.google.com/iframe/')) {
bodyObserver.disconnect();
node.classList.add('google-inserted-frame');
// We need one more observer to watch the <iframe> that Google Yolo
// inserted. Its style attribute will be updated with a height that
// needs to be passed back up to the parent iframe, to avoid any
// clipping. The height can change if the user is signed in with
// many Google accounts, and clicks the 'X more accounts' button.
const attributeObserver = new MutationObserver(iframeMutationsList => {
let height = parseInt(iframeMutationsList[0].target.style.height);
if (height === 341) {
// One account is shown
height = 228 - 18;
}
else if (height === 261) {
// Two accounts shown
height = 177;
}
else if (height === 298) {
// Three or more accounts shown
height = 215;
}
else {
// Likely the expanded state, let true height through, minus top padding
height -= 18;
}
messageParent({type: 'height', height});
});
attributeObserver.observe(node, { attributes: true });
}
});
});
});
bodyObserver.observe(window.document.body, { childList: true });
};
</script>
</head>
<body>
</body>
</html>