-
Notifications
You must be signed in to change notification settings - Fork 2
/
google-yolo.html
118 lines (112 loc) · 4.23 KB
/
google-yolo.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
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
iframe {
width: 100% !important;
}
body {
margin: 0px;
}
.google-inserted-frame {
top: 0 !important;
right:0 !important;
width: 100% !important;
}
</style>
<!-- Google One Tap 2.0 Library -->
<script src="https://accounts.google.com/gsi/client"></script>
<script>
// function to send message to the parent container
function messageParentContainer(data) {
data.isGoogleYoloMessage = true;
window.parent.postMessage(data, '*');
}
// function to hide loader after the load of the Google One Tap UI
function hideLoader() {
(document.querySelectorAll('.yolo-loader') || []).forEach(i => i.setAttribute('style', 'display: none;'));
}
function adjustIframe() {
// it listens to the changes being made to the DOM tree
const bodyObserver = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
mutation.addedNodes.forEach(node => {
// for the mutation node that is added everytime there is a change in the DOM it checks for the id that it contains added by the google one tap library to the element i.e. either credential_picker_container or credential_picker_iframe.
if (node.id.includes('credential_picker_container') || node.id.includes('credential_picker_iframe')) {
bodyObserver.disconnect();
node.classList.add('google-inserted-frame');
// the logic when the accounts have been added to the iframe to adjust the height of the parent iframe.
const attributeObserver = new MutationObserver(iframeMutationsList => {
const height = parseInt(iframeMutationsList[0].target.style.height);
hideLoader();
messageParentContainer({type: 'height', height});
});
attributeObserver.observe(node, { attributes: true });
}
});
});
});
bodyObserver.observe(window.document.body, { childList: true });
}
window.onGoogleLibraryLoad = function () {
// initializing the adjustment of the iframe's mutation observer
adjustIframe()
// Initializing the Google One Tap 2.0
google.accounts.id.initialize({
// Replace it with your Google Client Id
client_id: 'GOOGLE_CLIENT_ID',
// Function to be called with credentials after the one of the listed accounts have been selected by the user
callback: handleGoogleCb,
// cookie domain that is used for the Google One Tap
state_cookie_domain: 'gradeup.co',
// Context for the UI Message of the Google One Tap
context: 'use',
// Rednder mode for the UI style of the Google One Tap (NOT MENTIONED IN THE OFFICIAL DOCS)
ui_mode: isMobile() ? 'bottom_sheet': 'card',
});
// This function listens to every action that occurs automatically or if the user acts on it.
google.accounts.id.prompt((notification) => {
switch(notification.getMomentType()) {
case 'display':
if (notification.isNotDisplayed()) {
messageParentContainer({ type: 'canceled' });
} else {
hideLoader();
messageParentContainer({ type: 'displayed' });
}
break;
case 'dismissed':
if (notification.getDismissedReason() !== 'credential_returned') {
messageParentContainer({ type: 'canceled' });
}
break;
case 'skipped':
if (notification.getSkippedReason() !== 'tap_outside') {
messageParentContainer({ type: 'canceled' });
}
break;
default:
break;
}
});
};
// Checks for the mobile view. Just to demonstrate the usage of ui_mode
function isMobile() {
return window.parent.innerWidth <= 840;
}
// function that receives the credentials and sends an event to the parent container with credentials
function handleGoogleCb(credentials) {
messageParentContainer({ type: 'handleGoogleYoloCb', credentials })
}
</script>
</head>
<body>
<!-- Loader for the before state of the Google One Tap UI -->
<img
class="yolo-loader"
src="https://gs-post-images.grdp.co/2019/9/yolo-loader-img1569240947560-75.png-rs-high-webp.png"
style="max-width: 100%; display: block; position: relative;"
/>
</body>
</html>