friwall/web/templates/vpn/index.html

198 lines
7.8 KiB
HTML

{% extends 'base.html' %}
{% block content %}
<p>
Za VPN oziroma oddeljano povezavo v omrežje FRI uporabljamo <a href="https://wireguard.com">WireGuard</a>. Več informacij o uporabi in nastavitvah VPN najdete v <a href="https://doku.fri.uni-lj.si/vpn">dokumentaciji</a>.
<p>
Za priklop v omrežje spodaj ustvarite nov ključ in prenesite izpisano datoteko. Nato sledite napotkom za posamezni sistem.
<details>
<summary>Windows / Mac</summary>
<p>
Namestite in zaženite WireGuard za <a href="https://download.wireguard.com/windows-client/wireguard-installer.exe">Windows</a> ali <a href="https://itunes.apple.com/us/app/wireguard/id1451685025?ls=1&mt=12">Mac</a>. Kliknite <em>Import tunnel(s) from file</em> in izberite preneseno datoteko z nastavitvami <code>wg-fri.conf</code>. VPN nato aktivirate oziroma deaktivirate s klikom na gumb <em>(De)activate</em>.
</details>
<details>
<summary>Android / iOS</summary>
<p>
Namestite WireGuard za <a href="https://play.google.com/store/apps/details?id=com.wireguard.android">Android</a> ali <a href="https://itunes.apple.com/us/app/wireguard/id1441195209?ls=1&mt=8">iOS</a>. Zaženite WireGuard, dodajte novo povezavo z <em>Import from file</em> in izberite preneseno datoteko z nastavitvami.
<p>
Ključ lahko ustvarite tudi na računalniku in ga v telefon dodate s <em>Scan from QR code</em> s kodo, prikazano ob novem ključu.
</details>
<details>
<summary>Linux / BSD</summary>
<p>
Nastavitve shranite (kot skrbnik) v <code>/etc/wireguard/wg-fri.conf</code>. VPN nato (de)aktivirate s <code>sudo wg-quick up wg-fri</code> oz. <code>sudo wg-quick down wg-fri</code>.
<p>
Povezavo lahko uvozite tudi v NetworkManager z ukazom <code>nmcli connection import type wireguard file wg-fri.conf</code>.
</details>
<section id="new-key">
<h1>Nov ključ</h1>
<form id="request">
<p>
Na vsaki napravi, ki jo želite povezati v omrežje FRI, ustvarite nov ključ. Privzete nastavitve usmerijo čez VPN le promet, namenjen strežnikom na FRI in UL.
<p>
<label for="name">Ime naprave</label><br>
<input id="name" name="name" pattern="[-._A-Za-z0-9 ]*" maxlength="16" placeholder="A-Z a-z 0-9 . _ - " />
<button id="submit" type="submit">Ustvari ključ</button>
<p>
<input type="checkbox" id="add_default" name="add_default" />
<label for="add_default">Uporabi VPN za ves promet</label>
<br>
<input type="checkbox" id="use_dns" name="use_dns" checked />
<label for="use_dns">Uporabi imenske strežnike FRI</label>
</form>
<p>
Če vklopite prvo opcijo, bo vaš računalnik čez VPN usmerjal ves promet. Če izklopite drugo opcijo, bodo nekateri strežniki dostopni le prek naslova IP. Če ste v dvomih, pustite privzete nastavitve.
<section id="settings" style="display: none;">
<p>
Nastavitve za povezavo so izpisane spodaj. Zasebni ključ varujte enako skrbno kot geslo, s katerim ste se prijavili; priporočena je raba šifriranega diska. Za nov ključ osvežite to stran.
<section style="display: flex; align-items: center;">
<pre style="flex-grow: 3;"><a id="download" href="" style="float: right; padding: 0.5em;">Prenesi</a><code id="config"></code></pre>
<div id="qr" style="flex-grow: 1; text-align: center;"></div>
</section>
<p>
V nastavitvah lahko dodate ali odstranite vnose <code>AllowedIPs</code>. Ti določajo naslove, do katerih bo vaš računalnik dostopal skozi omrežje FRI. Da VPN uporabite za ves promet, dodajte vrstice <code>AllowedIPs = 0.0.0.0/0</code>. Če ne želite uporabljati imenskih strežnikov FRI, odstranite vnos <code>DNS</code>; to lahko vpliva na dostopnost nekaterih storitev.
</section>
</section>
<section class="keys" style="display: none;">
<h1>Obstoječi ključi</h1>
<p>
Ključe, ki jih ne uporabljate, lahko tukaj odstranite. Trenutno so registrirani ključi:
<ul class="keys" style="list-style: none;"></ul>
<p class="keys" id="active-key-warning" style="margin-top: 0;">
</section>
<script type="text/javascript" src="{{ url_for('static', filename='qrcode.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='wireguard.js') }}"></script>
<script type="text/javascript">
function del_key(key) {
fetch('del', {
credentials: 'include',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ pubkey: key })
})
.then(response => {
if (!response.ok)
throw new Error('deleting key failed');
return response.text();
})
.then(data => {
// reload key list
window.dispatchEvent(new Event('load'));
})
.catch(error => console.error(error));
}
function fetch_keys() {
fetch('list', {
credentials: 'include'
})
.then(response => {
if (!response.ok)
throw new Error('fetching keys failed');
return response.json();
})
.then(data => {
const keys = document.querySelector('ul.keys');
keys.innerHTML = '';
const warning = document.getElementById('active-key-warning');
warning.innerHTML = '';
for (let key of Object.values(data)) {
var a = document.createElement('a');
a.innerText = '✖';
a.href = '';
a.addEventListener('click', event => {
del_key(key.key);
event.preventDefault();
});
var li = document.createElement('li');
li.innerHTML = ' ' + (new Date(key.time*1000).toISOString().split('T')[0]) +
' <code>' + key.key + '</code> ' + key.name +
(key.active ? '<font color="red"><sup>★</sup></font> ' : '');
li.prepend(a);
keys.appendChild(li);
if (key.active)
warning.innerHTML = '<font color="red"><sup>★</sup></font> Ta ključ uporablja trenutna povezava. Če ga odstranite, bo prekinjena.';
}
document.querySelector('section.keys').style.display = (Object.keys(data).length ? 'unset' : 'none');
})
.catch(error => console.error(error));
}
window.addEventListener('load', fetch_keys);
const request = document.getElementById('request');
request.addEventListener('submit', event => {
event.preventDefault();
const name = document.getElementById('name');
const key = wireguard.generateKeypair();
const settings = document.getElementById('settings');
const submit = document.getElementById('submit');
const use_dns = document.getElementById('use_dns');
const add_default = document.getElementById('add_default');
submit.innerHTML = 'Obdelovanje…';
submit.disabled = true;
fetch('new', {
credentials: 'include',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
pubkey: key.publicKey,
name: name.value,
use_dns: use_dns.checked,
add_default: add_default.checked,
})
})
.then(response => {
if (!response.ok) {
response.text().then(text => {
settings.innerHTML = response.status + ' ' + response.statusText + ': ' + text;
});
} else {
return response.text();
}
})
.then(text => {
var complete = text.replace(/PrivateKey = .*/, "PrivateKey = "+key.privateKey).trim();
document.getElementById("config").innerHTML = complete;
var blob = new Blob([complete], { type: 'text/plain;charset=utf-8' });
const link = document.getElementById('download');
link.download = 'wg-fri.conf';
link.href = window.URL.createObjectURL(blob);
var qr = qrcode(0, 'L');
qr.addData(complete.replace(/#.*\n/g, ''));
qr.make();
document.getElementById('qr').innerHTML = qr.createSvgTag(3);
// reload key list
fetch_keys();
})
.catch(error => {
settings.innerHTML = error;
})
.finally(() => {
request.style.display = 'none';
settings.style.display = 'unset';
});
});
</script>
{% endblock %}