| 
									
										
										
										
											2020-08-18 04:02:26 +00:00
										 |  |  | <html> | 
					
						
							| 
									
										
										
										
											2020-09-13 05:55:12 +00:00
										 |  |  | 	<head> | 
					
						
							|  |  |  | 		<meta name="google-signin-scope" content="email" /> | 
					
						
							|  |  |  | 		<meta | 
					
						
							|  |  |  | 			name="google-signin-client_id" | 
					
						
							|  |  |  | 			content="291138637698-9hjbgadgkibuv9j26104aj0bg5bia30j.apps.googleusercontent.com" | 
					
						
							|  |  |  | 		/> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		<style> | 
					
						
							|  |  |  | 			@media (prefers-color-scheme: dark) { | 
					
						
							|  |  |  | 				body { | 
					
						
							|  |  |  | 					background-color: #222; | 
					
						
							|  |  |  | 					color: #aaa; | 
					
						
							|  |  |  | 				} | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 			body { | 
					
						
							|  |  |  | 				background-color: #222; | 
					
						
							|  |  |  | 				color: #aaa; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 			.container { | 
					
						
							|  |  |  | 				padding: 2em; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 			.authn-container { | 
					
						
							|  |  |  | 				width: 300px; | 
					
						
							|  |  |  | 				margin: auto; | 
					
						
							|  |  |  | 				border: solid 1px #c0c0c0; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 			.authn-container hr { | 
					
						
							|  |  |  | 				width: 80%; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 			.link { | 
					
						
							|  |  |  | 				background: none; | 
					
						
							|  |  |  | 				border: none; | 
					
						
							|  |  |  | 				padding: 0; | 
					
						
							|  |  |  | 				text-decoration: underline; | 
					
						
							|  |  |  | 				cursor: pointer; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		</style> | 
					
						
							|  |  |  | 	</head> | 
					
						
							|  |  |  | 	<body> | 
					
						
							|  |  |  | 		<div class="container"> | 
					
						
							|  |  |  | 			<pre><code> | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  | <h1>Tokens for Testing</h1> | 
					
						
							|  |  |  | Compatible with | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | * OAuth2 | 
					
						
							|  |  |  | * OpenID Connect (OIDC) | 
					
						
							| 
									
										
										
										
											2019-08-13 23:35:56 +00:00
										 |  |  | * JOSE (Signed Access Tokens) | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  |   * JWT | 
					
						
							| 
									
										
										
										
											2019-08-13 23:35:56 +00:00
										 |  |  |   * JWK | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  |   * JWS | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <h1>Resources</h1> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   * https://mock.pocketid.app/access_token | 
					
						
							| 
									
										
										
										
											2019-08-13 23:35:56 +00:00
										 |  |  |   * https://mock.pocketid.app/authorization_header | 
					
						
							| 
									
										
										
										
											2020-05-11 04:51:18 +00:00
										 |  |  |   * https://mock.pocketid.app/inspect_token | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  |   * https://xxx.mock.pocketid.app/.well-known/openid-configuration | 
					
						
							|  |  |  |   * https://xxx.mock.pocketid.app/.well-known/jwks.json | 
					
						
							|  |  |  |   * https://mock.pocketid.app/key.jwk.json | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-08-19 03:34:19 +00:00
										 |  |  |   * POST https://xxx.mock.pocketid.app/api/jwks | 
					
						
							|  |  |  |     { "kty":"EC", "crv":"P-256", "x":"xxx", "y":"yyy" } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   * GET  https://xxx.mock.pocketid.app/.well-known/jwks.json | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  | <h2>Get a token</h2> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Get a verifiable access token | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   https://mock.pocketid.app/access_token | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | For example: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   TOKEN=$(curl -fL https://mock.pocketid.app/access_token) | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-08-13 23:35:56 +00:00
										 |  |  | You can set the expiration (`exp`) with query parameters: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   * https://mock.pocketid.app/access_token?exp=90d (+90 days) | 
					
						
							|  |  |  |   * https://mock.pocketid.app/access_token?exp=3h (+3 hours) | 
					
						
							|  |  |  |   * https://mock.pocketid.app/access_token?exp=15m (+15 minutes) | 
					
						
							|  |  |  |   * https://mock.pocketid.app/access_token?exp=1565739000 (exactly 2019-08-13 5:30pm) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | (you can also get the whole header) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   https://mock.pocketid.app/authorization_header | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | For example: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   HEADER=$(curl -fL https://mock.pocketid.app/authorization_header) | 
					
						
							|  |  |  |   # Authorization: Bearer <token> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-05-11 04:51:18 +00:00
										 |  |  | <h3>Inspecting the Token</h3> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | You can see its decoded form at the `inspect_token` endpoint: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   curl -fL https://mock.pocketid.app/inspect_token \ | 
					
						
							|  |  |  |     -H "$(curl -fL https://mock.pocketid.app/authorization_header)" | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-08-01 06:21:32 +00:00
										 |  |  | <h3>The Token, Decoded</h3> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The Token will look like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   <font | 
					
						
							|  |  |  |     color="red">eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6IlU1Ym0tQUxtSVFOQ3hfMlFPT1piSm5Ec0d1aEd4WkRnV053alNqck5IbzQifQ</font>.<font | 
					
						
							|  |  |  |     color="blue">eyJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwODAvIiwic3ViIjoiZHVtbXkiLCJleHAiOjE1NjI4NzEyNTh9</font>.<font | 
					
						
							|  |  |  |     color="green">PWK2eTDQcVCpT_weogKuh4bHInnjqY6TGSnQzwEIc133WnJ1eUmLjq799COxSW7Dr6Khm1Po-CAXGVwCADIBEw</font> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The <font color="red">first part</font> is the JWS protected header. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Decoded, it looks like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   {"typ":"JWT","alg":"ES256","kid":"U5bm-ALmIQNCx_2QOOZbJnDsGuhGxZDgWNwjSjrNHo4"} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The <font color="blue">second part</font> is the JWS payload of JWT claims. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Decoded, it looks like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   {"iss":"http://localhost:4080/","sub":"dummy","exp":1562871258} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The <font color="green">third part</font> is the signature. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | It can't be "decoded", per se. It's two positive 32-bit BigInts called <em>R</em> and <em>S</em>, padded with zeros to fill out all the bytes. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <h2>Validate the Issuer</h2> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The token be signed and verifiable. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | If the token issuer (iss) is "https://mock.pocketid.app/" | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   * the key url (jwks_uri) will be found at "https://mock.pocketid.app/.well-known/openid-configuration" | 
					
						
							|  |  |  |   * which will point to "https://mock.pocketid.app/.well-known/jwks.json" | 
					
						
							|  |  |  |   * where there will be a key whose thumbprint (kid) matches that in the token | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The public key found there will look like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   { "crv":"P-256" | 
					
						
							|  |  |  |   , "x":"ToL2HppsTESXQKvp7ED6NMgV4YnwbMeONexNry3KDNQ" | 
					
						
							|  |  |  |   , "y":"Tt6Q3rxU37KAinUV9PLMlwosNy1t3Bf2VDg5q955AGc" | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <h3>Get the Private Key</h3> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | In truth, there's only one private key right now. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   https://mock.pocketid.app/key.jwk.json | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | You shouldn't use it for automated testing, because it will change, but it looks like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   { "crv":"P-256" | 
					
						
							|  |  |  |   , "x":"ToL2HppsTESXQKvp7ED6NMgV4YnwbMeONexNry3KDNQ" | 
					
						
							|  |  |  |   , "y":"Tt6Q3rxU37KAinUV9PLMlwosNy1t3Bf2VDg5q955AGc" | 
					
						
							|  |  |  |   , "d":"GYAwlBHc2mPsj1lp315HbYOmKNJ7esmO3JAkZVn9nJs" | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </code></pre> | 
					
						
							| 
									
										
										
										
											2020-09-13 05:55:12 +00:00
										 |  |  | 		</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		<div class="authn-flow"> | 
					
						
							|  |  |  | 			<div class="authn-container authn-loading"> | 
					
						
							|  |  |  | 				<center>⌛</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			<div class="authn-container authn-email"> | 
					
						
							|  |  |  | 				<center> | 
					
						
							|  |  |  | 					<form class="authn-form"> | 
					
						
							|  |  |  | 						<h2>Login</h2> | 
					
						
							|  |  |  | 						<input | 
					
						
							|  |  |  | 							name="username" | 
					
						
							|  |  |  | 							type="email" | 
					
						
							|  |  |  | 							placeholder="email" | 
					
						
							|  |  |  | 							value="coolaj86+noreply@gmail.com" | 
					
						
							|  |  |  | 						/> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button type="submit">Continue</button> | 
					
						
							|  |  |  | 					</form> | 
					
						
							|  |  |  | 					<hr /> | 
					
						
							|  |  |  | 					<div | 
					
						
							|  |  |  | 						class="g-signin2" | 
					
						
							|  |  |  | 						data-scope="email" | 
					
						
							|  |  |  | 						data-onsuccess="onSignIn" | 
					
						
							|  |  |  | 						data-theme="dark" | 
					
						
							|  |  |  | 					></div> | 
					
						
							|  |  |  | 					<br /> | 
					
						
							|  |  |  | 				</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			<div class="authn-container authn-new-user"> | 
					
						
							|  |  |  | 				<center> | 
					
						
							|  |  |  | 					<h2>Choose Password</h2> | 
					
						
							|  |  |  | 					<form class="authn-form"> | 
					
						
							|  |  |  | 						<input | 
					
						
							|  |  |  | 							name="password" | 
					
						
							|  |  |  | 							type="password" | 
					
						
							|  |  |  | 							placeholder="password" | 
					
						
							|  |  |  | 							value="secret" | 
					
						
							|  |  |  | 						/><button type="button">Show</button> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button type="submit">Create Account</button> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						Already have an account? | 
					
						
							|  |  |  | 						<button class="link" type="button"> | 
					
						
							|  |  |  | 							link existing account | 
					
						
							|  |  |  | 						</button> | 
					
						
							|  |  |  | 					</form> | 
					
						
							|  |  |  | 				</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			<div class="authn-container authn-existing"> | 
					
						
							|  |  |  | 				<!-- skip this for google auth --> | 
					
						
							|  |  |  | 				<center> | 
					
						
							|  |  |  | 					<h2>Existing User</h2> | 
					
						
							|  |  |  | 					<form class="authn-form"> | 
					
						
							|  |  |  | 						<input | 
					
						
							|  |  |  | 							name="password" | 
					
						
							|  |  |  | 							type="password" | 
					
						
							|  |  |  | 							placeholder="password" | 
					
						
							|  |  |  | 						/> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button type="submit">Continue</button> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button class="link" type="button"> | 
					
						
							|  |  |  | 							forgot password | 
					
						
							|  |  |  | 						</button> | 
					
						
							|  |  |  | 					</form> | 
					
						
							|  |  |  | 				</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			<div class="authn-container authn-failed"> | 
					
						
							|  |  |  | 				<center> | 
					
						
							|  |  |  | 					<h2>Incorrect Password</h2> | 
					
						
							|  |  |  | 					<form class="authn-form"> | 
					
						
							|  |  |  | 						<input | 
					
						
							|  |  |  | 							name="password" | 
					
						
							|  |  |  | 							type="password" | 
					
						
							|  |  |  | 							placeholder="password" | 
					
						
							|  |  |  | 						/> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button type="submit">Continue</button> | 
					
						
							|  |  |  | 						<br /> | 
					
						
							|  |  |  | 						<button class="link" type="button"> | 
					
						
							|  |  |  | 							forgot password | 
					
						
							|  |  |  | 						</button> | 
					
						
							|  |  |  | 					</form> | 
					
						
							|  |  |  | 				</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			<div class="authn-container authn-new-device"> | 
					
						
							|  |  |  | 				<center> | 
					
						
							|  |  |  | 					<h2>New Device</h2> | 
					
						
							|  |  |  | 					<p>Check your email to confirm new device.</p> | 
					
						
							|  |  |  | 				</center> | 
					
						
							|  |  |  | 			</div> | 
					
						
							|  |  |  | 		</div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		<script src="./dist/main.js"></script> | 
					
						
							|  |  |  | 		<script | 
					
						
							|  |  |  | 			src="https://apis.google.com/js/platform.js" | 
					
						
							|  |  |  | 			async | 
					
						
							|  |  |  | 			defer | 
					
						
							|  |  |  | 		></script> | 
					
						
							|  |  |  | 	</body> | 
					
						
							| 
									
										
										
										
											2020-08-18 04:02:26 +00:00
										 |  |  | </html> |