You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ror-presentatie/assets/user-creation-and-authentic...

268 lines
56 KiB
HTML

2 years ago
<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>User Creation and Authentication</title>
<style>
:root{--color-primary: #206ea7;--color-primary-light: rgba(32,110,167,0.15);--color-page: #206ea7;--color-page-draft: #7e50b1;--color-chapter: #af4d0d;--color-book: #077b70;--color-bookshelf: #a94747}*{box-sizing:border-box;outline-color:var(--color-primary);outline-width:1px}*:focus{outline-style:dotted}html{height:100%;overflow-y:scroll;background-color:#f2f2f2}html.flexbox{overflow-y:hidden}html.dark-mode{background-color:#111}body{font-size:14px;line-height:1.6;color:#444;-webkit-font-smoothing:antialiased;height:100%;display:flex;flex-direction:column}html.dark-mode body{color:#aaa}body,button,input,select,label,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Roboto","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.Codemirror,pre,#markdown-editor-input,.editor-toolbar,.code-base,span.code,code{font-family:"Lucida Console","DejaVu Sans Mono","Ubuntu Mono",Monaco,monospace}h1{font-size:3.425em;line-height:1.22222222em;margin-top:.48888889em;margin-bottom:.48888889em}h2{font-size:2.8275em;line-height:1.294117647em;margin-top:.8627451em;margin-bottom:.43137255em}h3{font-size:2.333em;line-height:1.221428572em;margin-top:.78571429em;margin-bottom:.43137255em}h4{font-size:1.666em;line-height:1.375em;margin-top:.78571429em;margin-bottom:.43137255em}h1,h2,h3,h4,h5,h6{font-weight:400;position:relative;display:block;color:#222}html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode h5,html.dark-mode h6{color:#bbb}h1 .subheader,h2 .subheader,h3 .subheader,h4 .subheader,h5 .subheader,h6 .subheader{font-size:.5em;line-height:1em;color:#969696}h5{font-size:1.4em}h5,h6{line-height:1.2em;margin-top:.78571429em;margin-bottom:.66em}@media screen and (max-width: 600px){h1{font-size:2.8275em}h2{font-size:2.333em}h3{font-size:1.666em}h4{font-size:1.333em}h5{font-size:1.161616em}}.list-heading{font-size:2rem}h2.list-heading{font-size:1.333rem}a{color:var(--color-primary);fill:currentColor;cursor:pointer;text-decoration:none;transition:filter ease-in-out 80ms;line-height:1.6}a:hover{text-decoration:underline}a.icon{display:inline-block}a svg{position:relative;display:inline-block}a:focus img:only-child{outline:2px dashed var(--color-primary);outline-offset:2px}a.no-link-style{color:inherit}a.no-link-style:hover{text-decoration:none}.blended-links a{color:inherit}.blended-links a svg{fill:currentColor}p,ul,ol,pre,table,blockquote{margin-top:.3em;margin-bottom:1.375em}hr{border:0;height:1px;background:#eaeaea;margin-bottom:24px}html.dark-mode hr{background:#555}hr.faded{background-image:linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF)}hr.darker{background:#ddd}html.dark-mode hr.darker{background:#666}hr.margin-top,hr.even{margin-top:24px}strong,b,.bold,.strong{font-weight:bold}strong>strong,strong>b,strong>.bold,strong>.strong,b>strong,b>b,b>.bold,b>.strong,.bold>strong,.bold>b,.bold>.bold,.bold>.strong,.strong>strong,.strong>b,.strong>.bold,.strong>.strong{font-weight:bolder}em,i,.italic{font-style:italic}small,p.small,span.small,.text-small{font-size:.75rem;color:#5e5e5e}html.dark-mode small,html.dark-mode p.small,html.dark-mode span.small,html.dark-mode .text-small{color:#999}sup,.superscript{vertical-align:super;font-size:.8em}sub,.subscript{vertical-align:sub;font-size:.8em}pre{font-size:12px;border:1px solid #ddd;background-color:#f5f5f5;border-color:#ddd;padding-left:31px;position:relative;padding-top:3px;padding-bottom:3px}html.dark-mode pre{background-color:#2b2b2b}html.dark-mode pre{border-color:#111}pre:after{content:"";display:block;position:absolute;top:0;width:29px;left:0;height:100%;background-color:#f5f5f5;border-right:1px solid #ddd}html.dark-mode pre:after{background-color:#313335}html.dark-mode pre:after{border-right:none}@media print{pre{padding-left:12px}pre:after{display:none}}blockquote{display:block;position:relative;border-left:4px solid var(--color-primary);background-color:#f8f8f8;padding:12px 16px 12px 32px;overflow:auto}html.dark-mode blockquote{background-color:#333}blockquote:before{content:"“";f
</style>
</head>
<body>
<div class="page-content">
<div dir="auto">
<h1 class="break-text" id="bkmrk-page-title">User Creation and Authentication</h1>
<div style="clear:left;"></div>
<p id="bkmrk-this-feature-will-al">This feature will allow users to register an account through which they have access to the product. This feature is essential for the product, as the user accounts will be linked to essential information such as game data, payment details and crypto wallets.</p>
<h2 id="bkmrk-product-requirements">Product Requirements</h2>
<ul id="bkmrk-there-is-a-user-regi">
<li>The user can register an account
<ul>
<li>The system requires the user to provide an email address<br>
<ul>
<li>The system enforces that the provided email address is valid according to <a href="https://datatracker.ietf.org/doc/html/rfc5322" target="_blank" rel="noopener">RFC-5322</a>.</li>
</ul>
</li>
<li>The system requires the user to choose a passphrase<br>
<ul>
<li>The system requires that the chosen passphrase contains at least:
<ul>
<li>One upper case letter</li>
<li>One lower case letter</li>
<li>One number</li>
<li>One special character</li>
</ul>
</li>
<li>The system requires that the chosen passphrase is at least 16 characters long</li>
</ul>
</li>
</ul>
</li>
<li>The system only allows users to login to their account after their email has been verified.<br>
<ul id="bkmrk-if-a-user-authentica">
<li>If a user authenticates with correct credentials before their email address has been verified, they are able to request the system to send them another verification email.</li>
</ul>
</li>
<li>An email with instructions for email verification is sent to the user directly after account registration is complete.</li>
<li>The user can log into their registered account
<ul id="bkmrk-the-system-requires-">
<li>The system requires the user to enter their email address</li>
<li>The system requires the user to enter their password</li>
<li>The system requires the user to have verified their email address before being able to log in</li>
</ul>
</li>
<li>If the user provides wrong credentials, the system does not tell the user which part of their credentials was wrong.</li>
<li>On authentication failure, the system does not tell the user whether an account for the provided username exists or not.</li>
<li>The system allows the user to reset their password without logging in by providing the system with their email address.<br>
<ul id="bkmrk-%C2%A0a-password-reset-wh">
<li>When a password reset is requested, the user is sent an email with instructions.</li>
<li>The system does not provide any information about whether an account exists for the given email address.</li>
<li>The password reset email contains instructions and a special link that the user can click.
<ul id="bkmrk-the-special-link-is-">
<li>The special link is only valid for two hours.</li>
</ul>
</li>
</ul>
</li>
<li>The system is able to save, edit and provide the following information about a user:
<ul id="bkmrk-username%2Femail-passw">
<li>Username/email</li>
<li>Password</li>
<li>TOTP information</li>
</ul>
</li>
<li>The system is able to pair with a users' TOTP application for additional security.
<ul id="bkmrk-the-system-requires--0">
<li>The system requires a one-time-password for every login after the activation and setup of TOTP by a user.</li>
</ul>
</li>
</ul>
<h2 id="bkmrk-design-requirements">Design Requirements</h2>
<ul id="bkmrk-the-user-registratio">
<li>There is a graphical user registration form
<ul id="bkmrk-the-user-registratio-0">
<li>The user registration form has explanations for each field and how it will be used by the software</li>
<li>The user is required to enter their password twice before submitting the form.
<ul id="bkmrk-it-is-verified-that-">
<li>It is verified that both entered passwords are identical.</li>
</ul>
</li>
<li>The user registration form interactively validates that the user provides to the form
<ul id="bkmrk-if-the-input-for-one">
<li>If the input for one of the form fields is invalid, the software instantly notifies the user through explicit visual cues.</li>
</ul>
</li>
<li>After registration is completed, the UI explicitly tells the user that they will only be able to login after they have verified their email.</li>
<li>After registration is completed, the UI explicitly tells the user that an email has been sent to them with instructions for email verification.</li>
</ul>
</li>
<li>There is a graphical user authentication form
<ul id="bkmrk-the-user-authenticat">
<li>The user authentication form prompts the user to enter their email and password</li>
<li>The user authentication form has a "register account" button that brings the user to the user registration form.</li>
<li>The user authentication form has a "login" button that attempts to authenticate the user using their provided credentials.</li>
</ul>
</li>
<li>There is a graphical representation for TOTP password login.</li>
<li>If the user successfully authenticates before their email address has been verified, they are presented with a page that explains the email verification requirement.
<ul id="bkmrk-the-page-also-contai">
<li>The page also contains a button with which users can request a new verification email.</li>
</ul>
</li>
<li>There is a password reset page that the special links in password reset emails lead to.
<ul id="bkmrk-the-form-on-the-pass">
<li>The form on the password reset page requires the user to enter their new password twice.</li>
</ul>
</li>
<li>There is a user settings page that allows the user to change their:
<ul id="bkmrk-username-password-to">
<li>username</li>
<li>password</li>
<li>TOTP settings</li>
</ul>
</li>
</ul>
<h2 id="bkmrk-engineering-requirem">Engineering Requirements</h2>
<ul id="bkmrk-email-and-passphrase">
<li>Email and passphrase are only used to request a JSON Web Token from the system.<br>
<ul>
<li>The JWT is used as means of authentication for any other interactions with the system.</li>
</ul>
</li>
<li>The system needs to be able to save and retrieve users with unique, non-sequential identifiers.</li>
</ul>
<h2 id="bkmrk-user-stories">User Stories</h2>
<p id="bkmrk-this-section-contain">This section contains the user stories for this epic. After each user story, the accompanying requirements are defined in bullet point lists.</p>
<table id="bkmrk-user-story-%C2%A0-accepta" style="border-collapse: collapse; width: 100.123%; height: 112px;" border="1">
<tbody>
<tr style="height: 42px;">
<td style="width: 18.7654%; height: 42px;"><strong>User story</strong></td>
<td style="width: 81.2346%; height: 42px;">As a user, I want to be able to register a user account using an email address and password so that I can take part in Rise of Rulers gameplay.</td>
</tr>
<tr style="height: 70px;">
<td style="width: 18.7654%; height: 70px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.2346%; height: 70px;">
<ul>
<li>Given I am a user, I provide a correct email address and password to the system and click the register button, I am able to successfully register a user account.</li>
<li>Given I am a user, I have to enter my preferred password twice when registering an account and if both entries aren't identical I have to correct this before continuing.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user" style="border-collapse: collapse; width: 100%; height: 75px;" border="1">
<tbody>
<tr style="height: 46px;">
<td style="width: 18.642%; height: 46px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 46px;">As a user, I want to be able to verify my account within a reasonable amount of time by following the instructions in the account verification email.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given I am a user and I click the registration button after correctly filling out the form, the system tells me that my account registration is successful, the account needs to be verified for me to be able to use it and an email has been sent to my email address with verification instructions.</li>
<li>Given I am a user and the system tells me that an email has been sent out, the system has actually sent out the email at that instant so that I can receive it within a reasonable amount of time.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-0" style="border-collapse: collapse; width: 100%; height: 75px;" border="1">
<tbody>
<tr style="height: 46px;">
<td style="width: 18.642%; height: 46px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 46px;">As a user, I want to be told that my email needs to be verified when I successfully authenticate through the login form before I have verified my email address.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given I am a user and I click the login button after providing valid credentials, I am greeted with a message about the required email verification and the option to have the system send a new verification email to my email address.</li>
<li>Given I am a user and I am logged in without my email being verified, the system does not allow me to use its core functionalities.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-1" style="border-collapse: collapse; width: 100%; height: 251px;" border="1">
<tbody>
<tr style="height: 64px;">
<td style="width: 18.642%; height: 64px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 64px;">As a user, I want to be able to reset my account password by providing the system with the email address I used to register my account and following the instructions in a password reset email sent to my email address.</td>
</tr>
<tr style="height: 187px;">
<td style="width: 18.642%; height: 187px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 187px;">
<ul>
<li>Given I am a user and I click the reset password button after providing my email address, I am sent an email with instructions and a special link that I can use to change the password for my user account.</li>
<li>Given I am a user and I click the special link in the password reset email, I am presented with the password reset page which requires me to enter my new password twice.</li>
<li>Given I am a user and I do not enter two identical passwords into the password reset form, I am not allowed to continue before I correct this.</li>
<li>Given I am a user, I have correctly filled out the password form and I click the "reset password" button, my password is changed to the one provided in the form.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-2" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 18.642%;"><strong>User story</strong></td>
<td style="width: 81.358%;">As a user, I want to be able to pair the software with my TOTP application so that I can use one-time passwords for additional security.</td>
</tr>
<tr>
<td style="width: 18.642%;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%;">
<ul>
<li>Given that I am a user and I click the "enable TOTP" button on the user settings screen, I am able to go through the setup process and configure the system to work with my TOTP application.</li>
<li>Given that I am a user and I login after enabling TOTP for my account, I fill in a correct password and username and the system has verified these credentials, I am required to provide a one-time-password from the TOTP application before I am allowed to continue.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-3" style="border-collapse: collapse; width: 100%; height: 58px;" border="1">
<tbody>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 29px;">As a user, I want to be able to authenticate myself to the system using a username and password configured by me, so that I am able to partake in gameplay and my progress can be saved.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given that I am a user, I fill in the login form with a correct username and password and I click login, I am able to successfully authenticate to the system.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="text-muted text-small">
<div class="entity-meta">
<svg class="svg-icon" data-icon="history" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
</svg>Revision #12 <br>
<svg class="svg-icon" data-icon="star" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>Created 22 February 2022 11:16:51 by Hugo
<br>
<svg class="svg-icon" data-icon="edit" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>Updated 7 March 2022 15:41:02 by Hugo
</div> </div>
</div>
</body>
</html>