Let's Encrypt v2 (ACME draft 11) client for your browser. Companion to greenlock.js https://greenlock.domains
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 7.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <html>
  2. <head>
  3. <title>Greenlock&trade;</title>
  4. <meta property="og:image" content="https://greenlock.ppl.family/img/greenlock-mark-400x400.png" />
  5. <link href="style/main.css" rel="stylesheet">
  6. </head>
  7. <body hidden>
  8. <div class="column-container wide">
  9. <div class="column-row">
  10. <img src="img/greenlock-146.png">
  11. </div>
  12. <div class="column-row">
  13. <h1>Get the green lock for your website</h1>
  14. <!-- Step 1 Choose Domain(s) -->
  15. <form class="js-acme-form js-acme-form-domains">
  16. <h1><label>What's your domain?</label></h1>
  17. <h4>Certificates are valid for 90 days. Renewal is free :)</h4>
  18. <input class="js-acme-domains" type="text" placeholder="example.com,*.example.com" required>
  19. <br>
  20. <button type="submit">Next</button>
  21. <br>
  22. <br>
  23. <br>
  24. <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="v02" checked required>
  25. Production</label>
  26. <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="staging-v02" required>
  27. Testing</label>
  28. <br>
  29. <input class="js-acme-directory-url" type="url" placeholder="ACME directory url">
  30. </form>
  31. <!-- Step 2 Create Account -->
  32. <form class="js-acme-form js-acme-form-account">
  33. <h1><label>What's your email?</label></h1>
  34. <input class="js-acme-account-email" type="email" placeholder="john@doe.family" required>
  35. <br>
  36. <br>
  37. <label><input class="js-acme-account-tos" type="checkbox" required>
  38. Agree to <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?</label>
  39. <br>
  40. <br>
  41. <label><input class="js-greenlock-account-tos" type="checkbox" required>
  42. Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?</label>
  43. <br>
  44. <br>
  45. <!--
  46. <a href="#">advanced (use existing account)</a>
  47. <br>
  48. <br>
  49. -->
  50. <button type="submit">Next</button>
  51. </form>
  52. <!-- Step 3 Set Challanges -->
  53. <form class="js-acme-form js-acme-form-challenges">
  54. <h1>How will you validate your domain?</h1>
  55. <br>
  56. <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
  57. File Upload to HTTP Web Server</label>
  58. <br>
  59. <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
  60. TXT Records on DNS Name Server</label>
  61. <br>
  62. <div class="js-acme-challenges">
  63. <h2>Verify Domains &amp; Sub-Domains</h2>
  64. <table class="js-acme-table-http-01">
  65. <thead>
  66. <tr>
  67. <th>Hostname</th>
  68. <th>File Location</th>
  69. <th>File Contents</th>
  70. </tr>
  71. </thead>
  72. <tbody>
  73. <tr>
  74. <td>example.com</td>
  75. <td>.well-known/acme-challenge/xxx</td>
  76. <td>sec.ret</td>
  77. </tr>
  78. </tbody>
  79. </table>
  80. <table class="js-acme-table-dns-01">
  81. <thead>
  82. <tr>
  83. <th>Hostname</th>
  84. <th>TXT Host</th>
  85. <th>TXT Value</th>
  86. </tr>
  87. </thead>
  88. <tbody>
  89. <tr>
  90. <td>example.com</td>
  91. <td>_acme-challenge.example.com</td>
  92. <td>4A54</td>
  93. </tr>
  94. </tbody>
  95. </table>
  96. </div>
  97. <div class="js-acme-wildcard">
  98. <h2>Verify Wildcard Domains</h2>
  99. <table class="js-acme-table-wildcard">
  100. <thead>
  101. <tr>
  102. <th>Hostname</th>
  103. <th>TXT Host</th>
  104. <th>TXT Value</th>
  105. </tr>
  106. </thead>
  107. <tbody>
  108. <tr>
  109. <td>example.com</td>
  110. <td>_acme-challenge.example.com</td>
  111. <td>4A54</td>
  112. </tr>
  113. </tbody>
  114. </table>
  115. </div>
  116. <button type="submit">Next</button>
  117. </form>
  118. <!-- Step 4 Process Challanges -->
  119. <form class="js-acme-form js-acme-form-poll">
  120. Verifying Domains... (give us 5 seconds or so...)
  121. <!--
  122. <table class="js-acme-table-verifying">
  123. <thead>
  124. <tr>
  125. <th>Hostname</th>
  126. <th>Type</th>
  127. <th>Pass</th>
  128. </tr>
  129. </thead>
  130. <tbody>
  131. <tr>
  132. <td>example.com</td>
  133. <td>http-01</td>
  134. <td>-</td>
  135. </tr>
  136. </tbody>
  137. </table>
  138. <a href="#">advanced (use existing keypair for domain)</a>
  139. <button type="submit">Next</button>
  140. -->
  141. </form>
  142. <!-- Step 5 Get Certs -->
  143. <form class="js-acme-form js-acme-form-download">
  144. <div>
  145. <h2><label>privkey.pem</label></h2>
  146. <textarea cols="80" rows="10" class="js-privkey">-</textarea>
  147. </div>
  148. <div>
  149. <h2><label>fullchain.pem</label></h2>
  150. <textarea cols="80" rows="60" class="js-fullchain">-</textarea>
  151. </div>
  152. <div>
  153. <h3>node.js https server example</h3>
  154. <pre><code>'use strict';
  155. var https = require('https');
  156. var server = https.createServer({
  157. key: require('fs').readFileSync('./privkey.pem')
  158. , cert: require('fs').readFileSync('./fullchain.pem')
  159. }, function (req, res) {
  160. res.end("Hello, World!");
  161. }).listen(443, function () {
  162. console.log('Listening on', this.address());
  163. })
  164. </code></pre>
  165. </div>
  166. <!--
  167. TODO
  168. <label>cert.pem</label>
  169. <textarea class="js-cert">-</textarea>
  170. <label>chain.pem</label>
  171. <textarea class="js-chain">-</textarea>
  172. <button type="button">Download SSL Certificates</button>
  173. <br>
  174. <a href="#">Advanced (copy and paste)</a>
  175. <br>
  176. <button type="submit">Start Over</button>
  177. -->
  178. </form>
  179. <br>
  180. <br>
  181. <br>
  182. <div><small>
  183. <h3></h3>
  184. <a href="https://git.coolaj86.com/coolaj86/greenlock.html">View Source</a> (git)
  185. <!-- or
  186. <pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre>
  187. Or view the live site code (same as live-site branch):
  188. <pre><code>wget https://greenlock.ppl.family --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
  189. -->
  190. </small></div>
  191. <script src="./js/bacme.js"></script>
  192. <script src="./js/app.js"></script>
  193. <script src="./js/pkijs.org/v1.3.33/common.js"></script>
  194. <script src="./js/pkijs.org/v1.3.33/asn1.js"></script>
  195. <script src="./js/pkijs.org/v1.3.33/x509_schema.js"></script>
  196. <script src="./js/pkijs.org/v1.3.33/x509_simpl.js"></script>
  197. <script src="./js/browser-csr/v1.0.0-alpha/csr.js"></script>
  198. <!-- Global site tag (gtag.js) - Google Analytics -->
  199. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script>
  200. <script>
  201. window.dataLayer = window.dataLayer || [];
  202. function gtag(){dataLayer.push(arguments);}
  203. gtag('js', new Date());
  204. gtag('config', 'UA-118745161-2');
  205. </script>
  206. </div>
  207. </div>
  208. </body>
  209. </html>