forked from samChang72/openpass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CodeExamples.html
206 lines (199 loc) · 8.09 KB
/
CodeExamples.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>OpenPass Code Example</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
rel="stylesheet"
type="text/css"
/>
<style>
body {
font-family: Raleway, sans-serif;
}
code {
color: crimson;
background-color: #f1f1f1;
padding: .25rem;
white-space: pre-wrap;
display: inline-block;
}
h1, h2 {
text-align: center;
}
.subhead {
text-decoration: underline;
text-align: center;
}
</style>
</head>
<body>
<h1>Open Pass code examples</h1>
<section>
<h2>Identification widget</h2>
<h3 class="subhead">Add the widget script</h3>
<p>
The widget script will be downloaded with all the resources and will be
available to be instantiated on the page.
</p>
<code><script src="//openpass.criteo.com/open-pass/widget-app" type="text/javascript" async></script></code>
<h3 class="subhead">
Add HTML component
</h3>
<p>
Add the widget tag to the HTML code and the widget will be
automatically displayed based on their configuration:
<strong>native</strong> or <strong>modal</strong>.
</p>
<code><wdgt-identification session="authenticated" variant="dialog" view="modal" provider="publisher"></wdgt-identification></code>
<h3 class="subhead">
Interacting with the widget
</h3>
<p>
It is possible to retrieve data available on
<strong>OpenPass</strong> through the public API. We also provide a set of
events that can be listened to by other scripts and trigger certain logic
upon a change of state in the widget or user data.
</p>
<p>
The user data returned by the <strong>OpenPass</strong> widget component
will be of type <strong>UserData</strong>, defined by this model:
</p>
<code>type UserData = {
ifaToken: string,
uid2Token: string,
isDeclined: boolean
}</code>
<p>Properties:</p>
<ul>
<li>
The token attribute is used to store the UID2 token retrieved for the
email provided by the user.
</li>
<li>
The isDeclined flag indicates whether the user has declined to join
OpenPass. In case isDeclined = true, the token field will be empty or
undefined and must be ignored.
</li>
</ul>
<p>In practice, there are two ways of interacting with the widget:</p>
<ul>
<li>
Retrieve user data calling a function provided by the widget component
</li>
<li>Subscribe to widget events</li>
</ul>
<h3 class="subhead">Retrieve user data</h3>
<p>
The widget component provides a function called
<strong>getUserData</strong> which can be called directly on the
component. It will return an object of type
<strong>UserData</strong> previously defined.
</p>
<p>
Note that this function will return undefined if no user data is currently
available on OpenPass, meaning that the user has neither joined OpenPass
on the current site nor answered yet.
</p>
<code>const userData = document.querySelector('wdgt-identification').getUserData();
</code>
<h3 class="subhead">Subscribe to widget events</h3>
<p>Our widget emits events in two different situations:</p>
<ul>
<li>Widget component loaded</li>
<li>User data updated</li>
</ul>
<h3 class="subhead">Widget component loaded</h3>
<p>
At this point, the component has been instantiated and it's possible to
call its public API.
</p>
<ul>
<li><strong>Event name</strong>: loaded</li>
<li><strong>Event data</strong>: none</li>
</ul>
<code>function eventHandler(event) {
const userData = document.querySelector('wdgt-identification').getUserData();
// ...
}
document.querySelector('wdgt-identification').addEventListener('loaded', eventHandler);</code>
<h3 class="subhead">User data updated</h3>
<p>
This event is triggered upon interaction from the user and will contain an
updated version of the UserData object.
</p>
<ul>
<li><strong>Event name</strong>: updated</li>
<li><strong>Event data</strong>: a <strong>UserData</strong> object</li>
</ul>
<code>function eventHandler(event) {
const userData = event.data;
// ...
}
document.querySelector('wdgt-identification').addEventListener('updated', eventHandler);</code>
<h3 class="subhead">Recommended strategy</h3>
<p>
The recommended strategy is to try to retrieve the current data available
once the widget has been loaded. If it is undefined, then listen to new
widget events in order to be notified when the user interacts with
OpenPass.
</p>
<p>
Depending on how the integration is done, the widget component may be
loaded before calling the code that interacts with it. In that case, it
would be better to call the <strong>getUserData</strong> function directly
instead of waiting for the loaded event to be fired — because it was
already missed. In case you are not sure, it is possible to do both.
</p>
<p>
Some integrations will always trigger the updated event as an interaction
from the user would be required — such as the modal view. However,
it is not the case for all configurations.
</p>
</section>
<section>
<h2>Landing widget</h2>
<h3 class="subhead">Add the widget script</h3>
<p>
As in case with Identification widget, you should add the widget script.
</p>
<code><script src="//openpass.criteo.com/open-pass/widget-app" type="text/javascript" async></script></code>
<h3 class="subhead">Add HTML component</h3>
<p>Add the widget tag to the HTML code and the widget will be automatically displayed</p>
<code><wdgt-landing></wdgt-landing></code>
<h3 class="subhead">Provide a configuration to display widget in your website style</h3>
<ul>
<li><strong>brand-image-url</strong> – the URL of your site logo</li>
<li><strong>brand-color</strong> - the website theme primary color in HEX</li>
</ul>
<code><wdgt-landing brand-image-url="https://website.com/logo.png" brand-color="#006cd6"></wdgt-landing></code>
<h3 class="subhead">Subscribe to widget events</h3>
<p>Our widget emits next events</p>
<ul>
<li><strong>requestSignin</strong> - User clicked the button “Access content and deals” </li>
<li><strong>requestSignup</strong> - User clicked the button “Not a member? Sign up” </li>
</ul>
<code>function onSigninHandler() {
// ...
}
function onSignUpHandler() {
// ...
}
const widgetLandingComponent = document.querySelector('wdgt-landing');
widgetLandingComponent.addEventListener('requestSignin', onSigninHandler);
widgetLandingComponent.addEventListener('requestSignup', onSignUpHandler);
</code>
<h3 class="subhead">Recommended strategy</h3>
<p>
Partners should handle the display of their login form by subscribing to one of the Widget Landing events. A few changes are required to the partner's login form:
</p>
<ul>
<li>Add a checkbox to allow OpenPass to manage and store users data. This checkbox should have the mention "Access exclusive content and deals with OpenPass"</li>
<li>Once the user has checked the box and logged in through the partner's system (or any SSO), the partner should provide the returned user PII (email) and call <code>window.__OpenPass.signUserIn(userEmail)</code>.</li>
<li>This redirects the user to the OpenPass website and stores his preferences on the OpenPass system. The user is then redirected back to the partner's website.</li>
</ul>
</section>
</body>
</html>