community-website/clientcert/index.html
Jan Dittberner 5581d9e5ae Replace clientcert with 0.2.1
Replace the clientcert directory with a release of the 0.2.1 tag built
using npm run build.
2024-05-20 17:07:13 +02:00

175 lines
No EOL
19 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/styles.min.css">
<meta name="theme-color" content="#ffffff">
<title>CAcert client certificate generation in your browser</title>
</head>
<body>
<header class="sticky-top text-bg-dark py-2 mb-3" id="header">
<div class="container">
<svg id="cacert-logo" viewBox="0 0 507.33 113.69" xmlns="http://www.w3.org/2000/svg">
<path id="C" class="letters"
d="m53.438 112.45c-7.7812 0-14.977-1.1484-21.586-3.4453-6.5625-2.2969-12.211-5.7188-16.945-10.266-4.7344-4.5469-8.4141-10.219-11.039-17.016-2.5781-6.7969-3.8672-14.648-3.8672-23.555 0-8.2969 1.2422-15.82 3.7266-22.57 2.4844-6.7461 6.0938-12.535 10.828-17.367 4.5469-4.6406 10.172-8.2266 16.875-10.758 6.75-2.5312 14.109-3.7969 22.078-3.7969 4.4062 0 8.3672 0.25781 11.883 0.77344 3.5625 0.46875 6.8438 1.1016 9.8438 1.8984 3.1406 0.89062 5.9766 1.8984 8.5078 3.0234 2.5781 1.0781 4.8281 2.0859 6.75 3.0234v25.383h-3.0938c-1.3125-1.125-2.9766-2.4609-4.9922-4.0078-1.9688-1.5469-4.2188-3.0703-6.75-4.5703-2.5781-1.5-5.3672-2.7656-8.3672-3.7969s-6.2109-1.5469-9.6328-1.5469c-3.7969 0-7.4062 0.60938-10.828 1.8281-3.4219 1.1719-6.5859 3.1406-9.4922 5.9062-2.7656 2.6719-5.0156 6.2109-6.75 10.617-1.6875 4.4062-2.5312 9.75-2.5312 16.031 0 6.5625 0.91407 12.047 2.7422 16.453 1.875 4.4062 4.2188 7.875 7.0312 10.406 2.8594 2.5781 6.0469 4.4297 9.5625 5.5547 3.5156 1.0781 6.9844 1.6172 10.406 1.6172 3.2812 0 6.5156-0.49219 9.7031-1.4766 3.2344-0.98438 6.2109-2.3203 8.9297-4.0078 2.2969-1.3594 4.4297-2.8125 6.3984-4.3594s3.5859-2.8828 4.8516-4.0078h2.8125v25.031c-2.625 1.1719-5.1328 2.2734-7.5234 3.3047-2.3906 1.0312-4.8984 1.9219-7.5234 2.6719-3.4219 0.98437-6.6328 1.7344-9.6328 2.25-3 0.51562-7.125 0.77343-12.375 0.77343"/>
<path id="A" class="letters"
d="m207.57 109.34h-27.914l-7.2422-21.164h-38.812l-7.2422 21.164h-27.207l38.672-104.7h31.078l38.672 104.7m-41.695-40.359-12.867-37.547-12.867 37.547h25.734"/>
<path id="c" class="letters"
d="m252.52 110.61c-7.0391 0-13.48-0.80078-19.324-2.4102-5.793-1.6055-10.848-4.082-15.156-7.4336-4.2617-3.3477-7.5664-7.5664-9.9141-12.664-2.3477-5.0938-3.5195-11.059-3.5195-17.891 0-7.207 1.2461-13.422 3.7344-18.652 2.5352-5.2305 6.0586-9.5664 10.562-13.008 4.3555-3.2578 9.3828-5.6445 15.082-7.1562 5.6992-1.5156 11.613-2.2734 17.742-2.2734 5.5078 0 10.582 0.57422 15.23 1.7227 4.6445 1.1445 8.9766 2.6367 13 4.4727v21.129h-3.6602c-1.0078-0.82422-2.2305-1.7852-3.6641-2.8867-1.3906-1.1055-3.1133-2.1836-5.1719-3.2422-1.9648-1.0039-4.1211-1.8359-6.4648-2.4727-2.3476-0.69141-5.0781-1.0312-8.1914-1.0312-6.8945 0-12.211 2.1094-15.945 6.3281-3.6875 4.1797-5.5312 9.8633-5.5312 17.07 0 7.4336 1.8867 13.078 5.6719 16.926 3.8359 3.8594 9.2461 5.7852 16.238 5.7852 3.2539 0 6.1758-0.34766 8.7617-1.0312 2.6328-0.73438 4.8125-1.5859 6.5391-2.5469 1.625-0.91797 3.0625-1.8828 4.3086-2.8906 1.2422-1.0117 2.3945-1.9961 3.4492-2.9609h3.6602v21.129c-4.0664 1.8359-8.332 3.2773-12.785 4.3359-4.4062 1.1016-9.2891 1.6524-14.652 1.6524"/>
<path id="e" class="letters"
d="m371.17 73.617h-57.348c0.3711 6.25 2.6914 11.035 6.957 14.348 4.3164 3.3164 10.652 4.9727 19 4.9727 5.293 0 10.418-0.96875 15.383-2.9102 4.9648-1.9414 8.8867-4.0273 11.762-6.25h2.7852v20.527c-5.6602 2.3203-10.996 4-16.008 5.043s-10.555 1.5625-16.633 1.5625c-15.684 0-27.699-3.5977-36.051-10.797-8.3516-7.1992-12.527-17.449-12.527-30.758 0-13.164 3.9414-23.582 11.828-31.254 7.9336-7.7188 18.793-11.578 32.574-11.578 12.711 0 22.27 3.2891 28.672 9.8711 6.4023 6.5352 9.6055 15.961 9.6055 28.273v8.9492m-24.918-14.988c-0.13672-5.3516-1.4375-9.375-3.8945-12.074-2.4609-2.6992-6.2891-4.0508-11.484-4.0508-4.8242 0-8.793 1.2812-11.902 3.8359-3.1055 2.5586-4.8477 6.6562-5.2188 12.289h32.5"/>
<path id="r" class="letters"
d="m437.86 55.258h-2.2773c-1.0938-0.36719-2.8516-0.64453-5.2734-0.83203-2.4219-0.18359-4.4414-0.27734-6.0547-0.27734-3.6562 0-6.8867 0.23047-9.6875 0.69531-2.8008 0.46094-5.8164 1.25-9.0469 2.3594v52.191h-25.645v-77.938h25.645v11.449c5.6484-4.7188 10.566-7.8398 14.746-9.3672 4.1758-1.5742 8.0234-2.3594 11.539-2.3594 0.90235 0 1.9219 0.02344 3.0625 0.07031 1.1406 0.04687 2.1367 0.11328 2.9922 0.20703v23.801"/>
<path id="t" class="letters"
d="m482.86 10.449-25.938 10.062v11.844h-10.719v16.688h10.719v35.875c0 9.3828 2.4531 16.004 7.375 19.875 4.9688 3.8711 12.496 5.8125 22.625 5.8125 4.5352 0 8.3945-0.21484 11.531-0.625 3.1367-0.36719 6.0781-0.87891 8.875-1.5625v-16.875h-2.1562c-0.86719 0.45312-2.4062 0.95312-4.625 1.5-2.1719 0.54688-3.9297 0.8125-5.2812 0.8125-3.2812 0-5.7969-0.43359-7.5312-1.3438-1.6875-0.95703-2.8867-2.25-3.5625-3.8438-0.72266-1.5938-1.1094-3.4023-1.1562-5.4062-0.0469-2.0039-0.0625-4.3438-0.0625-7.0312v-27.188h24.375v-16.688h-24.375v-21.906h-0.0937"/>
<path id="person_dark"
d="m64.754 29.422c-4.5898 0.23438-9.668 4.0273-10.168 9.2383-0.55078 5.7461 2.2227 8.9961 6.4531 11.227 2.1172 1.1133 4.5586 1.4375 7.0195 1.0391 2.4609-0.39844 4.875-1.5977 6.6133-4.0312 0.72266-1.0156 0.48047-2.4258-0.53516-3.1484-1.0195-0.72266-2.4258-0.48047-3.1484 0.53516-1.1133 1.5625-2.3242 1.9883-3.6524 2.2031-1.3281 0.21484-2.8086 0.12891-4.1875-0.59766-2.7539-1.4531-4.2969-3.7461-4.125-6.8242 0.17578-3.0898 3.2734-5.0742 6.2031-5.1367 2.9297-0.06641 5.7422 1.332 6.7383 5.2266 0.11719 0.85547 0.71484 1.5586 1.543 1.8242 0.82422 0.26562 1.7305 0.0625 2.3281-0.56641 0.59766-0.62891 0.77735-1.5508 0.47266-2.3594-1.4805-5.793-6.5078-8.7305-11.207-8.6289-0.10938 0.0039-0.23828-0.0039-0.34766 0zm-62.961 1.418c-0.0703 0.0078-0.13671 0.04297-0.1875 0.0625-0.0156 0.0078-0.0508 0.02344-0.0625 0.03125-8e-3 0.0039-0.0273 0.02734-0.0312 0.03125-0.0117 0.0078-0.0273 0.02734-0.0352 0.03125-4e-3 0.0078-0.0234 0.02344-0.0312 0.03125 0 0.0039-0.0273 0.02734-0.0312 0.03125-8e-3 0.01563-0.0234 0.05078-0.0312 0.06641 0 0.0039 4e-3 0.02344 0 0.03125-4e-3 0.01172-0.0273 0.04687-0.0312 0.0625v0.03125c-0.0508 0.60156 1.8125 2.5508 2.5508 3.3047 0.76172 0.77734 7.0664 5.8203 10.609 8.2148 3.5664 2.4141 11.758 6.7773 13.852 7.8086 2.0742 1.0195 8.5156 3.7148 12.781 5.0039 7.332 2.2227 14.867 3.5039 22.16 4.0625 7.2969 0.55859 14.359 0.37109 20.746-0.37891 12.781-1.4961 23-4.8516 27.801-10.734 2.3984-2.9414 3.6367-7.6992 0.91015-10.672-2.9609-3.2344-9.832-5.875-10.262-5.8867h-0.0937-0.0625-0.0312c-8e-3 0.0039-0.0273 0.03125-0.0312 0.03125-8e-3 0.0039-0.0273 0-0.0312 0-0.0156 0.0078-0.0508 0.02344-0.0625 0.03125-8e-3 0.0039-0.0273 0.02734-0.0312 0.03125-4e-3 0.0039-0.0312 0.02734-0.0352 0.03125-8e-3 0.01172-0.0234 0.05078-0.0312 0.0625-4e-3 0.01562-0.0273 0.04687-0.0312 0.06641 0 0.0078 4e-3 0.05078 0 0.0625v0.03125 0.03125c0.0391 1.0625 2.0117 3.3945 3.4727 5.0117 1.1289 1.25 2.0703 2.1172 2.4805 2.6484 1.5274 1.9883 0.46485 3.4922-0.50781 4.9648-2.2578 3.4258-12.078 7.3398-24.113 8.75-6.0159 0.70312-12.676 0.85937-19.547 0.3164-6.875-0.54688-13.953-1.7617-20.84-3.8438-4.6836-1.4141-11.09-3.9766-13.445-4.9727-2.418-1.0195-9.6797-4.5312-12.152-5.7617-2.4531-1.2227-11.652-6.9141-12.402-7.4609-0.75-0.54297-2.6641-1.2344-3.2109-1.1641zm52.07 32.805c-0.22657 0.01172-0.45703 0.0625-0.62891 0.125-0.0586 0.02344-0.14062 0.06641-0.19141 0.09375-0.0234 0.01563-0.0703 0.04688-0.0937 0.0625-0.0234 0.01563-0.0703 0.04688-0.0937 0.0625-0.0273 0.02344-0.0703 0.07031-0.0937 0.09375-0.0273 0.02734-0.0742 0.06641-0.0937 0.09766-0.0156 0.01953-0.0508 0.07031-0.0625 0.09375-0.0391 0.0625-0.0703 0.14844-0.0977 0.21875-0.0312 0.08984-0.0781 0.21484-0.0937 0.31641-0.13671 1.0117 0.55469 2.6289 2.0469 4.5312 2.9102 3.7109 2.7617 6.668 2.8008 10.105 0.0391 3.4375-2.1719 7.1211-5.1289 10.578-3.4102 3.9844-7.2617 7.3867-10.766 10.109-3.4805 2.707-10.316 6.8984-12.5 8.5898-2.1523 1.6719-3.8203 2.7109-4.1562 3.6523-0.0195 0.0586-0.0508 0.13672-0.0625 0.1875-8e-3 0.0469 4e-3 0.11719 0 0.16016v0.0937c0 0.0234-4e-3 0.0703 0 0.0937s0.0234 0.0742 0.0312 0.0937c4e-3 0.0156 0.0273 0.0508 0.0312 0.0625 8e-3 0.0156 0.0234 0.0508 0.0312 0.0664 0.0156 0.0234 0.043 0.0664 0.0625 0.0937 8e-3 4e-3 0.0273 0.0234 0.0312 0.0312 8e-3 4e-3 0.0273 0.0234 0.0312 0.0312 8e-3 4e-3 0.0273 0.0234 0.0312 0.0312 0.0781 0.0664 0.20312 0.14063 0.31641 0.1875 0.79296 0.32032 2.4258 0.25 4.9414-0.4414 1.9727-0.53516 4.3359-1.3477 5.9219-1.9492 1.625-0.61719 9.3672-4.8086 13.625-7.8945 4.2226-3.0625 8.9258-7.7695 10.93-10.398 1.9844-2.6051 5.1563-6.652 5.4141-14.793 0.17188-5.4414-1.0234-9.0938-6.8633-12.469-2.4258-1.3984-4.1992-1.9883-5.3203-1.918"
fill="#00bd00" fill-rule="evenodd"/>
<path id="person_light"
d="m160.84 110.85c-8.0898-2.4688-16.062-5.2656-21.098-9.3047-5.2695-4.2266-6.4414-6-9.4141-10.09-3.7266-5.1328-7.4531-15.75-7.7773-25.746-0.24219-7.4219 0.78125-13.457 3.1602-18.945 2.0391-4.707 6.3398-10.641 8.3555-10.449 2.0977 0.20312 1.5977 2.7734 0.22657 8.5781-1.6211 6.8477-1.8398 8.6562-1.8477 15.441-0.0117 8.1758 0.75 12.039 3.5195 20.297 1.1445 3.418 2.5703 7.6641 6.5898 12.191 3.2031 3.6094 7.7148 7.1016 15.895 11.625 6.5781 3.6406 8.3672 5.2539 8.4609 6.3438 0.043 0.4961-0.46484 0.84766-1.3672 0.86719-1.2109 0.0273-2.9609-0.27734-4.7031-0.80859zm27.414-58.656c-5.2695-1.2891-7.2695-2.5859-11.098-4.2109-12.098-5.1289-20.613-8.9336-23.195-9.8477-3.375-1.1953-14.078-4.9102-20.445-6.3828-7.207-1.6602-17.801-3.7031-21.914-3.9258-3.7383-0.20312-9.0664 0.33203-11.324 1.6055-2.6914 1.5195-2.2734 4.2734 1.1758 9.9961 0.61719 1.0195 1.2266 1.6797 0.97266 2.1211-0.23437 0.41016-1.582 0.05078-2.7266-0.48828-1.543-0.72266-3.7188-2.8906-4.8984-4.707-2.75-4.2383-1.1719-9.8945 3.8281-12.645 3.6172-1.9883 7.5938-2.4062 15.844-1.7266 9.2344 0.76172 17.918 3.2852 22.023 4.5234 22.551 6.8047 30.637 10.047 39.645 14.918 4.1992 2.2695 7.9688 4.9961 8.9648 5.5938 0.8164 0.49609 3.7383 2.3633 5.0312 3.6406 0.51953 0.51172 0.70312 0.95703 0.61718 1.1406-0.1914 0.39844-1.8867 0.54297-2.4961 0.39453zm-58.395-30.895c-1.6641-0.74219-2.8203-2.3633-3.6484-3.9062-0.56641-1.0469-0.91016-2.6562-0.82032-4.4219 0.0859-1.7656 0.23438-3.1992 1.3047-5.4609 1.4375-3.0273 3.5742-5.1875 6.4336-6.5195 1.8477-0.86328 2.1953-0.98437 4.5274-0.98828 2.3516-0.0078 3.043 0.40625 4.3476 1.1641 1.625 0.94531 2.4258 2.2812 2.9805 3.5078 0.55078 1.2109 0.83985 2.0117 0.85938 4.2031 0.0195 2.207-0.6211 4.7266-2.6562 7.8789-1 1.5469-2.6875 3.0664-5.2383 4.5-1.7734 1-5.4102 1.2461-8.0898 0.04297zm7.6055-4.2266c2.3672-2.0117 3.1484-3.6367 3.3555-6.7812 0.21875-3.3086-2.3828-5.5312-3.582-5.6562-3.1445-0.32812-5.9492 1.9805-6.6016 6.2656-0.13672 0.91797-0.0547 1.7891 0.30078 3.1289 0.38281 1.4609 1.3438 2.9883 2.8906 3.4492 1.5977 0.47266 2.8203 0.10156 3.6367-0.40625"
fill="#c7ff00"/>
</svg>
<h1>Client certificate generation in your browser</h1>
<div class="row mb-3">
<div class="col-12">
<div class="progress" style="height: 2rem">
<div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1"
aria-valuemax="5" style="width:20%">Start
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row mb-3">
<div class="col-12">
<h2>1. Generate a key pair</h2>
<form id="csr-form">
<div class="mb-3">
<label for="nameInput">Your name</label>
<input type="text" class="form-control" id="nameInput" aria-describedby="nameHelp" required
minlength="3">
<small id="nameHelp" class="form-text text-muted">Please input your name as it should be added
to
your certificate</small>
</div>
<p>Choose an RSA key size</p>
<fieldset class="mb-3">
<small id="keySizeHelp" class="form-text text-muted">An RSA key pair will be generated in your
browser. Longer key sizes provide better security but take longer to generate.</small>
<div class="form-check">
<input class="form-check-input" type="radio" name="keySize" id="size3072" value="3072"
checked>
<label class="form-check-label" for="size3072">3072 Bit</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="keySize" id="size2048" value="2048">
<label class="form-check-label" for="size2048">2048 Bit (most compatible, least
secure)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="keySize" id="size4096" value="4096">
<label class="form-check-label" for="size4096">4096 Bit</label>
</div>
</fieldset>
<button type="submit" id="gen-csr-button" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-key-fill" viewBox="0 0 16 16">
<path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
Generate key pair and signing request
</button>
</form>
</div>
</div>
<div class="row mb-3 d-none" id="key-wrapper">
<div class="col-12">
<button class="btn btn-danger" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-key-output"
aria-expanded="false" aria-controls="collapse-key-output">Show private key
</button>
<div class="collapse mt-3" id="collapse-key-output">
<pre id="key-output"></pre>
</div>
</div>
</div>
<div id="csr-wrapper" class="row mb-3 d-none">
<div class="col-12">
<h2>2. Paste the CSR into the CAcert form</h2>
<p>The CAcert web application allows you to paste a custom Certificate Signing Request (CSR) when you
request a client certificate. Use the button below to copy your CSR to the clipboard.
</p>
<pre id="csr-output"></pre>
<button class="btn btn-primary" id="copy-csr-to-clipboard">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-clipboard-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"/>
</svg>
Copy CSR to Clipboard
</button>
</div>
</div>
<div id="crt-input-wrapper" class="row mb-3 d-none">
<div class="col-12">
<h2>3. Get your certificate signed</h2>
<p>Go to the <a href="https://secure.cacert.org/account.php?id=3" target="_blank">New client certificate
page</a> of the CAcert web application and click the checkbox "Show advanced options". This will
show
you a text area where you can paste the copied CSR.</p>
<label id="crt-input-label" for="crt-input">Paste the signed certificate from the CAcert web
application</label>
<textarea class="form-control" id="crt-input" name="crt-input" rows="20" autocomplete="off"
placeholder="Paste the certificate here" aria-labelledby="crt-input-label"></textarea>
</div>
</div>
<div id="prepare-download-wrapper" class="row mb-3 d-none">
<div class="col-12">
<h2>4. Build the client certificate file</h2>
<p>You now have all the ingredients for downloading your certificate and corresponding key pair. Enter a
password of your choice and click on the "Prepare Download" button to generate a file that you can
use
in your Browser, email client, or other applications.</p>
<div class="mb-3">
<label for="passwordInput">Password for your client certificate file</label>
<input type="password" class="form-control" id="passwordInput" aria-describedby="nameHelp" required
minlength="8">
</div>
<button class="btn btn-primary" id="generate-p12">
Prepare Download
</button>
</div>
</div>
<div class="row d-none mb-3" id="download-wrapper">
<div class="col-12">
<h2>5. Download ready</h2>
<p>Your key material is ready for download. The downloadable file contains your private
key and your certificate encrypted with your password. You can now use the file to install your
certificate in your browser or other applications.</p>
<a class="btn btn-success" id="download-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-file-earmark-arrow-down-fill" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm-1 4v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 11.293V7.5a.5.5 0 0 1 1 0z"/>
</svg>
Download
</a>
</div>
</div>
</div>
</main>
<footer class="sticky-bottom text-bg-dark py-2">
<div class="container">
<p><small>© 2023 CAcert</small></p>
</div>
</footer>
<script src="js/forge.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/app.min.js"></script>
</body>
</html>