forked from dodplatformone/p1sso
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
325 lines (313 loc) · 22.6 KB
/
index.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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Platform One SSO</title>
<link rel="icon" type="image/png" sizes="502x498" href="img/babyyodaCrop.jpg">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-top">
<nav class="navbar navbar-light navbar-expand-lg fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand js-scroll-trigger" href="#page-top"
style="color: #52a1fd;">PLATFORM ONE SSO</a><button data-toggle="collapse"
data-target="#navbarResponsive" class="navbar-toggler float-right" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive"
style="margin: 0 auto;margin-left: 0px;padding: auto;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;width: auto;min-width: 0px;max-width: none;height: auto;min-height: 0px;padding-left: 10px;">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#whatisp1sso">What is P1 SSO?</a></li>
<li class="nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#whatdoineedtodo">What do I need to do?</a></li>
<li class="nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#howdoisetupp1sso">How do I setup it up?</a></li>
<li class="nav-item" role="presentation"><a class="nav-link js-scroll-trigger" href="#faq">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead" style="background: url('img/tech-bg.jpg');height: 100%;max-height: auto;">
<div class="container h-100">
<div class="row h-100">
<div class="col-lg-7 my-auto">
<div class="mx-auto header-content">
<h1 class="text-center mb-5" style="color: #F8F8F8;">The transition to Platform One Single
Sign-On (P1 SSO) has begun. Scroll down for more information and setup
instructions.</h1>
</div>
</div>
<div class="col-lg-5 my-auto">
<div class="imac-mockup">
<img class="device" src="img/imac.svg">
<div class="screen" style="background-image: url('img/desktopMockup.jpg');">
</div>
</div>
</div>
</div>
</div>
</header>
<section id="whatisp1sso" class="whatisp1sso text-left"
style="background-color: #040e16;height: none;min-height: auto;max-height: auto;max-width: auto;">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="section-heading" style="color: #52a1fd;">What is Platform One SSO?</h2>
<p>Platform One Single Sign-On (P1 SSO) allows us to
provide access to different apps using the same login based on an
open source identity service called Keycloak. In other words, you will
have one login to access
apps such as Mattermost, Jitsi, GitLab, etc. It also gives us the capability to
have multiple login
methods on the same account, meaning you'll be able to use a username, password and MFA to log
in at home while using a CAC to log in at work. These changes will be rolling out in two phases:
</p>
<p><b>Phase 1 is complete!</b> If you were previously logging into Mattermost using
username/password/MFA, you will now log in using P1 SSO.</li>
<p><b>Phase 2</b> will occur in the near fututre (approximately end of June). This is when we will
migrate Mattermost AF Portal Login users
to P1 SSO and enable the CAC login option.
<p><b>It's important to note that P1 SSO currently only supports the username/password/MFA login
option. We're hoping to enable the CAC login option soon and will make an announcement when
it's
available.</b></p>
</div>
</div>
</div>
<section id="whatdoineedtodo" class="whatdoineedtodo text-left"
style="background-color: #040e16;height: none;min-height: auto;max-height: auto;max-width: auto;">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="section-heading" style="color: #52a1fd;">What do I need to do?</h2>
<p style="color: #ff3800;">Important: Carefully read the instructions below to avoid
issues.</p>
<h3 class="section-heading" style="color: #52a1fd;">AF Portal Login Users</h3>
<p> If you currently log into Mattermost using the AF Portal Login button, nothing has changed.
Continue logging into Mattermost using the AF Portal Login button.</p>
<h3 class="section-heading" style="color: #52a1fd;">Username/Password/MFA Users</h3>
<p>If you were logging into Mattermost using a username, password and MFA, you will now log in
using P1 SSO.</p>
<p><b>If you already setup your P1 SSO account</b>, simply click the "Platform One SSO" button
and use the username (email), password and MFA you setup for your P1 SSO account. That's all
you need to do! The rest of this guide does not apply.
</p>
<p><b>If you did not already setup your P1 SSO account</b>, you will need to set it up now to
access your Mattermost account by following the <a class="js-scroll-trigger"
href="#howdoisetupp1sso">"How do I set up
P1 SSO?"</a> instructions.</p>
<p><b>If you need to setup a new account (i.e. you do not have a Mattermost account)</b>, new
Mattermost accounts are now created through P1 SSO. <a href="new_account.html">Click
here</a> for setup instructions.</p>
</div>
</div>
</div>
<section id="howdoisetupp1sso" class="howdoisetupp1sso text-left"
style="background-color: #040e16;height: none;min-height: auto;max-height: auto;max-width: auto;">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="section-heading" style="color: #52a1fd;">How do I set up P1 SSO?</h2>
<p>These instructions are for users that have an <b>existing</b> Mattermost account but did
not setup up their P1 SSO account. If you're a brand new user and do
not have a Mattermost account, <a href="new_account.html">click here</a> for
instructions on setting up a new account.</p>
<p>Access to your
MFA app (e.g. Google Authenticator, Authy, etc.) and the government email
address associated with your Mattermost account is required. <span
style="color: #ff3800;">This process must be done from a web browser on a computer.
Do not use Internet Explorer.</span></p>
</div>
</div>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">Step 1</h3>
<p>Go to
<a href="https://chat.collab.cdl.af.mil/"
target="_blank">https://chat.collab.cdl.af.mil/</a> and
click the blue button labeled "Platform One SSO".<br></p>
<div class="badges" style="height: auto; border-bottom:"><img class="img-fluid"
src="img/signon_changed.jpg" width="auto"
style="height: auto;width: 550px; border-radius: 25px;"></div>
</div>
</div>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">Step 2</h3>
<p>Click "Forgot Password?" and on the next screen, enter the email address associated with
your Mattermost account and click "Submit".<br>
<div class="badges" style="height: auto; border-bottom:">
<div class="badges" style="height: auto; border-bottom:"><img class="img-fluid"
src="img/sso_main.jpg" width="auto"
style="height: auto;width: 550px; border-radius: 25px;"></div>
</div>
</div>
</div>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">Step 3</h3>
<p>You will receive an email with a link to reset your credentials. Click “Link to reset
credentials” or copy the URL into a web browser. <span style="color: #ff3800;">Do not
use Internet Explorer.</span><br>
<div class="badges" style="height: auto; border-bottom:">
<div class="badges" style="height: auto; border-bottom:"><img class="img-fluid"
src="img/verify_email.jpg" width="auto"
style="height: auto;width: 550px; border-radius: 25px;"></div>
</div>
</div>
</div>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">Step 4</h3>
<p>Setup MFA by scanning the QR code with your MFA app. This will create a new MFA
6-digit pin which you'll use for P1 SSO.
Enter the new 6-digit pin and type in a device name (can be anything).</p>
<p style="font-style: italic; font-weight: bold;">Note: If your MFA
pin is not accepted or entered incorrectly, the QR code is
reset so you will need to scan it again. Check the <a class="js-scroll-trigger"
href="#faq">FAQ below</a> for additional
troubleshooting steps.</p>
<div class="badges" style="height: auto; border-bottom:"><img class="img-fluid"
src="img/setup_mfa.jpg" width="auto"
style="height: auto;width: 550px; border-radius: 25px;"></div>
</div>
</div>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">Step 5</h3>
<p>Enter a new password.
You can use the same password as your Mattermost account but it must
contain at least two
special characters.<br></p>
<div class="badges" style="height: auto; border-bottom:"><img class="img-fluid"
src="img/setup_password.jpg" width="auto"
style="height: auto;width: 550px;border-radius: 25px;"></div>
</div>
</div>
<br>
<br>
<div class="row border-bottom: 3px solid #ffffff;">
<div class="col-md-8 mx-auto">
<h3 class="section-heading" style="color: #52a1fd;">That's it!</h3>
<p>You should now be logged into your Mattermost account. From here on out, you will use
the blue "Platform One SSO" button on the Mattermost login screen to
log into your account using the username, password and MFA you just setup.</p>
<p style="font-style: italic;">Note: For the mobile app, select the purple "GitLab" button
to log into P1 SSO. This is a known issue.</p>
</div>
</div>
<br>
</div>
<section id="faq" class="faq text-left"
style="background-color: #040e16;height: none;min-height: auto;max-height: auto;max-width: auto;">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="section-heading" style="color: #52a1fd;">FAQ</h2>
<h4>Why is this change necessary?</h4>
<li>Platform One Single Sign-On (P1 SSO) gives us the ability to provide access to
different apps
such as Mattermost, Jitsi, GitLab, etc. using one login. This prevents having to
create a new account for each app or service we release. Additionally, using P1 SSO
will allow users to have multiple login methods such as username, password and MFA
at home and using a CAC to login at work. Some of these changes were also made to
help improve security.</li>
<br>
<h4>Why do I have to set up a new password and MFA again?</h4>
<li>Unfortunately, we are not able to migrate passwords from Mattermost. However, you
can use the same password you were using in Mattermost as long as it contains two
special characters. Since the P1
SSO is a different login service, MFA must be setup again.</li>
<br>
<h4>When setting up MFA, why do I keep getting "Invalid authenticator code"?</h4>
<li>Make sure you are scanning the QR code with the MFA app on your mobile device. This
will produce a
MFA token (6-digit number) that changes every 30 seconds. Type in that 6-digit
number (e.g. 123456) with no spaces.</li>
<li>If the MFA token is not accepted, you will receive the "Invalid authenticator code"
error. You must re-scan the QR code again which creates another MFA token (another
6-digit pin that is changing every 30 seconds). You must use the new 6-digit pin
(you can delete the old ones).</li>
<li>Your phone time may be out of sync. Check your phone's settings to make sure the
time is updating automatically. If you're using Google Authenticator on Android, try
the Sync Now feature to update the time.</li>
<br>
<h4>Why am I not receiving a password
reset email from P1 SSO?</h4>
<li>Try having the email sent again and
make sure to check your junk email folder.</li>
<li>If you accidently tried logging in using your old Mattermost credentials more than
five times, your account is likely locked out. Contact a team admin or email us at
<a href="mailto: [email protected]">[email protected]</a>
to have your account unlocked.</li>
<li>If you created your Mattermost
account after 19 May, your P1 SSO account may not have been automatically created.
Ask a
team or system admin for an invite link to create a P1 SSO account. Alternatively
you can send a request to <a
href="mailto: [email protected]">[email protected]</a>.
</li>
<br>
<h4>What username, password and MFA pin
do I use to log into Mattermost?</h4>
<li>You now log in using
the P1 SSO sign-on method which will use your email address and the newly
created password & MFA pin you set up in the steps above.</li>
<br>
<h4>How does a new user create a
Mattermost account with a username, password and MFA?</h4>
<li>New Mattermost accounts using username, password and MFA are now created
through P1 SSO. <a href="new_account.html">Click here</a> for instructions.</li>
<li>Users still have the option to create new Mattermost accounts
using the AF Portal Login option, but they will be limited to only CAC access.
Ultimately, when
both phases of the P1 SSO transition are complete, all users will use a P1 SSO
account to access apps like Mattermost and will be able to log in using username,
password and MFA or a CAC.</li>
<br>
<h4>How do I send someone an invite link
to P1 SSO?</h4>
<li>Administrators and users can find invitation links on their <a
href="https://sso.collab.cdl.af.mil/"
target="_blank">https://sso.collab.cdl.af.mil/</a> profile. Invitation links
are valid for 10 days. There is no restriction on sharing invitation links as long
as it is done through a government approved medium. Looking for a guide? Head to <a href="invite_user.html"> our Invite User guide</a> </li>
<br>
<h4>I have another question or need additional help. Who do I contact?</h4>
<li>Contact your team admin for additional assistance. If you're not sure who your team
admin is or can't get a hold of them, email us at <a
href="mailto: [email protected]">[email protected]</a>.
</li>
</div>
</div>
</div>
<section id="survey" class="survey text-left"
style="background-color: #040e16;height: none;min-height: auto;max-height: auto;max-width: auto;">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="section-heading" style="color: #52a1fd;">Feedback</h2>
<p>We're always looking to improve our user experience. We would appreciate if you
could take a minute to fill out a quick survey to give us feedback by <a
href="https://airtable.com/shrcThgZSF8jKx3tB">clicking here.</a></p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
<script src="js/script.min.js"></script>
</body>
</html>