Skip to content

Commit

Permalink
Added student and signature demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivard
ivard committed Aug 7, 2019
1 parent 2e00fa7 commit dc37c64
Show file tree
Hide file tree
Showing 17 changed files with 784 additions and 86 deletions.
1 change: 1 addition & 0 deletions build_artifacts.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ DIR=$(dirname "$0")
mkdir -p "$DIR/assets"
cp "$DIR/node_modules/jquery/dist/jquery.min.js" "$DIR/assets/jquery.min.js"
cp "$DIR/node_modules/bootstrap/dist/css/bootstrap.min.css" "$DIR/assets/bootstrap.min.css"
cp "$DIR/node_modules/bootstrap/dist/js/bootstrap.min.js" "$DIR/assets/bootstrap.min.js"
cp "$DIR/node_modules/@privacybydesign/irmajs/dist/irma.js" "$DIR/assets/irma.js"

rm -rf "$DIR/build"
Expand Down
4 changes: 2 additions & 2 deletions mail/index.en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<script src="maildemo.en.js" defer></script>
</head>
<body>
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
<h1>Demo: verification of e-mail address with IRMA</h1>

<div id="result_status"></div>
Expand Down Expand Up @@ -49,7 +49,7 @@ <h1>Demo: verification of e-mail address with IRMA</h1>
issuance webpage</a> of the Privacy by Design foundation.
</p>

<div style="margin-top: 1em; margin-bottom: 1em" align="center">
<div class="text-center">
<tr><td>
<button style="margin: 1em" class="btn btn-primary" id="try_irma_gmailbtn">Check gmail address</button>
</td>
Expand Down
2 changes: 1 addition & 1 deletion mail/index.nl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<script src="maildemo.nl.js" defer></script>
</head>
<body>
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
<h1>Demo: controle van e-mail adres met IRMA</h1>

<div id="result_status"></div>
Expand Down
70 changes: 34 additions & 36 deletions mail/maildemo.en.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
$.getScript("../start_session.js", function() {
$(function () {
let successgmail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
let email_len = email.length;
let email_tail = email.substr(email_len - 9, email_len);
if (email_tail === "gmail.com") {
$("#main").html("<h3>Email verification succeeded!</h3><p>You have revealed a <tt>gmail.com</tt> address, which allows you to proceed, for instance to <a href=\"https://www.google.com/gmail/\">Gmail</a><b><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
} else {
$("#main").html("<h3>Email verification failed!</h3><p>You do <em>not</em> have a <tt>gmail.com</tt> address, but: &nbsp; <b>"
+ email + "</p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
}
};
let successgmail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
let email_len = email.length;
let email_tail = email.substr(email_len - 9, email_len);
if (email_tail === "gmail.com") {
$("#main").html("<h3>Email verification succeeded!</h3><p>You have revealed a <tt>gmail.com</tt> address, which allows you to proceed, for instance to <a href=\"https://www.google.com/gmail/\">Gmail</a><b><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
} else {
$("#main").html("<h3>Email verification failed!</h3><p>You do <em>not</em> have a <tt>gmail.com</tt> address, but: &nbsp; <b>"
+ email + "</p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
}
};

let successemail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
$("#main").html("<h3>Email disclosure succeeded!</h3><p>You have revealed e-mail address: &nbsp; <b>"
+ email +
"</b></p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
};
let successemail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
$("#main").html("<h3>Email disclosure succeeded!</h3><p>You have revealed e-mail address: &nbsp; <b>"
+ email +
"</b></p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Back</a></p>");
};

let cancelled_fun = function() {
$("#result_status")
.html("Email verification cancelled.")
.addClass("alert alert-warning")
.css("font-weight", "bold");
}
let cancelled_fun = function() {
$("#result_status")
.html("Email verification cancelled.")
.addClass("alert alert-warning")
.css("font-weight", "bold");
}

let error_fun = function (data) {
$("#result_status")
.html("Email verification failed!")
.addClass("alert alert-danger")
.css("font-weight", "bold");
};
let error_fun = function (data) {
$("#result_status")
.html("Email verification failed!")
.addClass("alert alert-danger")
.css("font-weight", "bold");
};

$('#try_irma_gmailbtn').click(function () {
start_session('gmail', 'en', successgmail_fun, cancelled_fun, error_fun);
});
$('#try_irma_gmailbtn').click(function () {
start_session('gmail', 'en', successgmail_fun, cancelled_fun, error_fun);
});

$('#try_irma_emailbtn').click(function () {
start_session('email', 'en', successemail_fun, cancelled_fun, error_fun);
});
$('#try_irma_emailbtn').click(function () {
start_session('email', 'en', successemail_fun, cancelled_fun, error_fun);
});
});
70 changes: 34 additions & 36 deletions mail/maildemo.nl.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
$.getScript("../start_session.js", function () {
$(function () {
let successgmail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
let email_len = email.length;
let email_tail = email.substr(email_len - 9, email_len);
if (email_tail === "gmail.com") {
$("#main").html("<h3>Email controle is geslaagd!</h3><p>U heeft een <tt>gmail.com</tt> adres getoond en kunt daarmee verder, bijvoorbeeld naar <a href=\"https://www.google.com/gmail/\">Gmail</a><b><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
} else {
$("#main").html("<h3>Email controle is niet geslaagd!</h3><p>U heeft <em>geen</em> <tt>gmail.com</tt> adres, maar wel: &nbsp; <b>"
+ email + "</p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
}
};
let successgmail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
let email_len = email.length;
let email_tail = email.substr(email_len - 9, email_len);
if (email_tail === "gmail.com") {
$("#main").html("<h3>Email controle is geslaagd!</h3><p>U heeft een <tt>gmail.com</tt> adres getoond en kunt daarmee verder, bijvoorbeeld naar <a href=\"https://www.google.com/gmail/\">Gmail</a><b><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
} else {
$("#main").html("<h3>Email controle is niet geslaagd!</h3><p>U heeft <em>geen</em> <tt>gmail.com</tt> adres, maar wel: &nbsp; <b>"
+ email + "</p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
}
};

let successemail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
$("#main").html("<h3>Email opvraag is geslaagd!</h3><p>U heeft het email adres: &nbsp; <b>"
+ email +
"</b></p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
};
let successemail_fun = function (data) {
let email = data.disclosed[0][0].rawvalue;
$("#main").html("<h3>Email opvraag is geslaagd!</h3><p>U heeft het email adres: &nbsp; <b>"
+ email +
"</b></p> <br><p><a href=\"#\" onclick=\"window.location.reload(true)\">Terug</a></p>");
};

let cancelled_fun = function () {
$("#result_status")
.html("Email check geannuleerd.")
.addClass("alert alert-warning")
.css("font-weight", "bold");
};
let cancelled_fun = function () {
$("#result_status")
.html("Email check geannuleerd.")
.addClass("alert alert-warning")
.css("font-weight", "bold");
};

let error_fun = function (data) {
$("#result_status")
.html("Email check mislukt!")
.addClass("alert alert-danger")
.css("font-weight", "bold");
};
let error_fun = function (data) {
$("#result_status")
.html("Email check mislukt!")
.addClass("alert alert-danger")
.css("font-weight", "bold");
};

$('#try_irma_gmailbtn').click(function () {
start_session('gmail', 'nl', successgmail_fun, cancelled_fun, error_fun);
});
$('#try_irma_gmailbtn').click(function () {
start_session('gmail', 'nl', successgmail_fun, cancelled_fun, error_fun);
});

$('#try_irma_emailbtn').click(function () {
start_session('email', 'nl', successemail_fun, cancelled_fun, error_fun);
});
$('#try_irma_emailbtn').click(function () {
start_session('email', 'nl', successemail_fun, cancelled_fun, error_fun);
});
});
146 changes: 146 additions & 0 deletions signature/index.en.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<html>
<head>
<title>IRMA Signing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" href="../assets/bootstrap.min.css"/>
<link rel="stylesheet" href="sign_ex.css"/>

<script src="../assets/jquery.min.js" defer></script>
<script src="../assets/irma.js" defer></script>
<script type="text/javascript" src="sign.en.js" defer></script>
<script type="text/javascript" src="sign_ex.js" defer></script>
<script src="../assets/bootstrap.min.js" defer></script>
</head>
<body>
<div style="margin:auto" class="col-xs-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
<h2>Digital signatures with IRMA: some <em>sign-by-QR</em>
examples</h2>
<p>
On this page you can try out some examples in
which you can produce digital signatures
yourself, with the attributes in your IRMA
app. After pressing the buttons below, a signing
request appears in your IRMA app. When you read
this page on your phone, the switch to the IRMA
app is made automatically. When you read this
page on another device, you should first scan
the the QR code that appears, using the IRMA app
on your phone.
</p>
<p>
None of these example leads to actual
obligations. You can safely perform these
signing acts. The example text that you sign
does not commit you and the resulting signature
is not stored.
</p>
<p>
In order to be able to try out these examples
you must have collected the relevant attributes
in your IRMA app. This can be done via the
IRMA <a href="https://privacybydesign.foundation/issuance/">issuance
page</a>.
</p>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#email_consent" data-toggle="tab">Advertisement</a></li>
<li class="nav-item"><a class="nav-link" href="#donation" data-toggle="tab">Donation</a></li>
<li class="nav-item"><a class="nav-link" href="#exam" data-toggle="tab">Exam result</a></li>
</ul>
<div class="tab-content">
<div id="email_consent" class="tab-pane panel panel-default active">
<div class="panel-body">
<p>
<button id="btn_email_consent" class="btn btn-primary">Consent to receiving advertisements via email</button>
</p>
<p id="email_consent_result_status"></p>
<p>
Here you are asked to give GDPR-style
consent so that advertisements can be sent
to you. The attribute with which you sign
this consent message is the email address
at which you agree to receive the
advertisements. No further attributes of
yours are disclosed via this signature. In
principle, more of your attributes could
be included (like your gender, date of
birth, etc) so that advertisements are
more targeted.
</p>
<p>
Giving permission via a digital signature
is the perfect way to register consent
under the General Data Protection
Regulation (GDPR). This consent in the
form of a digital signature can be
transferred to other (partner)companies,
giving them certainty, because they can
check the signature themselves. Also,
these signatures can be shown to the
GDPR-regulator, upon request, in order to
demonstrate that consent has actually been
given by the owner of the email address.
</p>
</div>
</div>

<div id="donation" class="tab-pane panel panel-default">
<div class="panel-body">
<p>
<button id="btn_donation" class="btn btn-primary">Donate to the Privacy by Design foundation</button>
</p>
<div id="donation_result_status"></div>
<p>
Now you are asked to sign that you will
contribute financially to the foundation
(not really). You sign with your family
name and with your mobile phone number
attributes.
</p>
</div>
</div>

<div id="exam" class="tab-pane panel panel-default">
<div class="panel-body">
<p>
<button id="btn_exam" class="btn btn-primary">Declaration exam passed</button>
</p>
<div id="exam_result_status"></div>
<p>
Here you are asked to sign as teacher that
a certain student has passed your exam. You
sign with three SURF attributes, viz. your
name, the (educational) institution where
you work, and your email address at that
institution.
</p>
</div>
</div>
</div>

<p>
Attribute-based digital signatures offer many
new possibilities: a police officer, for
instance, can sign a report with his/her name
and police-registration number, as IRMA
attributes; in this way the integrity and
authenticity of this report is guaranteed in the
whole criminal justice chain. Also, a medical
doctor can sign a medical statement with his/her
own medical credentials as IRMA attributes, so
that everyone can verify that this statement is
actually signed by a medical doctor (and also by
whom). Within organisations all kinds of
decisions can be registered reliably and
verifiably with digital signatures. IRMA is the
only identity platform that seamlessly combines
both authentication and signing.
</p>
<p>
<a href="https://privacybydesign.foundation/demo-en/">Back</a>
to the IRMA demo page.
</p>
</div>
</body>
</html>
Loading

0 comments on commit dc37c64

Please sign in to comment.