Skip to content

Commit

Permalink
improve layout and add more info on id.me
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevenbarash
stevenbarash committed Sep 19, 2024
1 parent b05817c commit 8b1b6a3
Show file tree
Hide file tree
Showing 3 changed files with 272 additions and 45 deletions.
251 changes: 236 additions & 15 deletions Views/Home/Index.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,241 @@
@{
var claims = ViewBag.Claims as List<dynamic>;
var token = ViewBag.Token;
}
var token = ViewBag.Token;
ViewData["Title"] = "Agency Self Service Demo";
}

@if (ViewBag.Claims != null)
{
<h2>You are authenticated</h2>
<span>@token</span>
<main class="container mt-4">
<!-- Welcome Section -->
<section class="info-box mb-4">
<div class="card">
<div class="card-body">
<h3 class="card-title">Agency Self Service Demo</h3>
<p class="card-text">This demonstration showcases how an agency might implement secure identity
verification and account management using ID.me's digital identity network integrated using OIDC and
ASP.NET.</p>
<p class="card-text">In this demo, we simulate the use of ID.me for both Authentication Assurance Level
2 (AAL2) and Identity Assurance Level 2 (IAL2):</p>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>AAL2 Authentication:</strong> High confidence that the user
controls an authenticator bound to the subscriber's account. It requires either multi-factor
authentication or two single-factor authenticators.</li>
<li class="list-group-item"><strong>IAL2 Verification:</strong> High confidence in the asserted
identity’s validity. Involves rigorous identity proofing processes like government-issued ID and
biometric comparison.</li>
</ul>
<p class="mt-3">Note: While this demo doesn't perform actual verifications, these measures ensure a high
level of security and identity assurance for accessing sensitive information or performing critical
transactions.</p>
</div>
</div>
</section>

}
else{
<h2>You are not authenticated</h2>

<a class="nav-link text-dark" asp-controller="Account" asp-action="Login">
<img src="https://developers.id.me/assets/buttons/rectangle-solid-sign-c1d3504ddef6e9f65531da61fb31addb58d43af739b4e735ece4d1a25667258b.svg" alt="Sign in" style="height: 50px;">
</a>
<!-- Identity Validation Section -->
<section class="registration-box mb-4">
<div class="card">
<div class="card-header">
<h4 class="card-title">Authenticate</h4>
</div>
<div class="card-body">

}

@if (ViewBag.Claims == null)
{
<div class="d-flex justify-content-center my-3">
<a asp-controller="Account" asp-action="Login">
<img src="https://developers.id.me/assets/buttons/rectangle-solid-sign-c1d3504ddef6e9f65531da61fb31addb58d43af739b4e735ece4d1a25667258b.svg"
alt="Sign in" style="height: 50px;">
</a>
</div>
}
else
{
<div class="card-body">
@if (ViewBag.Claims == null)
{
<div class="d-flex justify-content-center my-3">
<a asp-controller="Account" asp-action="Login">
<img src="https://developers.id.me/assets/buttons/rectangle-solid-sign-c1d3504ddef6e9f65531da61fb31addb58d43af739b4e735ece4d1a25667258b.svg"
alt="Sign in" style="height: 50px;">
</a>
</div>
}
else
{
<h5 class="text-success">You are authenticated</h5>

<h6>Received payload from ID.me:</h6>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Claim Type</th>
<th scope="col">Claim Value</th>
</tr>
</thead>
<tbody>
@foreach (var claim in ViewBag.Claims)
{
<tr>
<td>@claim.Type</td>
<td>@claim.Value</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>

}
</div>
</div>
</section>

<!-- FAQ Section -->
<section class="faq mb-5">
<div class="accordion" id="faqAccordion">
<!-- FAQ 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What is ID.me?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
<p>ID.me is a digital identity network that helps people prove their identity online, similar to
a physical ID card but for the internet.</p>
<ul>
<li>Secure identity verification to access sensitive information and perform important
transactions</li>
<li>Portability across government agencies and private sector services</li>
<li>Compliance with federal identity, credential, and access management (ICAM) standards
</li>
<li>Protection of personal information through encryption and secure data practices</li>
</ul>
</div>
</div>
</div>
<!-- FAQ 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How do I verify my identity with ID.me?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
<p>ID.me follows guidelines set by the National Institute of Standards and Technology (NIST) for
identity verification, specifically adhering to Identity Assurance Level 2 (IAL2) as defined
in NIST Special Publication 800-63A. IAL2 provides high confidence in the asserted
identity's validity. Key aspects of IAL2 include:</p>
<ul>
<li>Remote or in-person identity proofing</li>
<li>Verification of government-issued photo ID</li>
<li>Confirmation that identifying information is valid and current</li>
<li>Verification of physical or biometric characteristics to the applicant's physical
presence</li>
</ul>
<p>The ID.me verification process typically involves the following steps:</p>
<ol>
<li>Create an ID.me account or sign in to an existing one.</li>
<li>Set up multi-factor authentication for added security.</li>

<li>Upload images of your government-issued photo ID (e.g., driver's license or passport).
</li>
<li>Take a selfie for biometric verification, ensuring it matches the photo on your ID.</li>
<li>Provide additional information for verification checks, such as SSN.
</li>
</ol>
<p><strong>Note:</strong> This demo is for simulation purposes only. Please use fictitious data
for verification.</p>
</div>
</div>
</div>
<!-- FAQ 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What if I can't verify my identity online?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
<p>If you tried verifying your identity using Self-Service and weren't successful, you may have
the option to finish verifying on a video call with a Video Chat Agent. Video Chat Agents,
or Trusted Referees, are trained identity specialists employed by ID.me to verify your
identity.</p>
<p>The video chat verification process typically involves:</p>
<ol>
<li>Preparing necessary documents (e.g., government-issued ID, proof of address).</li>
<li>Joining the video call at the scheduled time.</li>
<li>Answering questions and showing your documents to the Trusted Referee.</li>
<li>Completing any additional steps as guided by the Trusted Referee.</li>
</ol>
<p>This option ensures that even if the automated online process doesn't work for you, you still
have a way to verify your identity and access the services you need.</p>
<p>ID.me supports over 200+ languages for our video chat verification option, ensuring equity of
access.</p>
</div>
</div>
</div>
<!-- FAQ 4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
How does this application integrate with ID.me?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
<p>This application integrates with ID.me using OpenID Connect (OIDC), a secure authentication
protocol built on top of OAuth 2.0.</p>
<ol>
<li>When you click the "Sign in with ID.me" button, the application initiates an OIDC flow.
</li>
<li>You're redirected to ID.me to authenticate and verify your identity.</li>
<li>After successful verification, ID.me sends an authorization code back to this
application.</li>
<li>The application exchanges this code for ID tokens and access tokens.</li>
<li>These tokens contain claims about your identity, which the application can use to grant
access to protected resources.</li>
</ol>
<p><strong>Important Security Note:</strong> In production, tokens would be sent as JWEs (JSON
Web Encryption) to protect sensitive identity information. This adds an extra layer of
protection.</p>
</div>
</div>
</div>
</div>
</section>

<!-- More Info Section -->
<section class="more-info mb-5">
<div class="card">
<div class="card-body">
<h5>For more information:</h5>
<ul class="list-group">
<li class="list-group-item"><a
href="https://developers.idmelabs.com/documentation/federated-protocols/oidc"
target="_blank">OIDC integration with ID.me</a></li>
<li class="list-group-item"><a
href="https://network.id.me/article/what-is-nist-ial2-identity-verification/"
target="_blank">What is NIST IAL2 Identity Verification</a></li>
<li class="list-group-item"><a
href="https://network.id.me/article/what-are-the-nist-800-63-digital-identity-guidelines/"
target="_blank">NIST 800-63 Digital Identity Guidelines</a></li>
<li class="list-group-item"><a href="https://www.id.me/business/government" target="_blank">ID.me
for Government</a></li>
</ul>
</div>
</div>
</section>
</main>
40 changes: 10 additions & 30 deletions Views/Shared/_Layout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,27 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only"
asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />

</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only"
asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>

<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
<img style="height: 50px" src="~/img/logo.png" alt="Logo">
</a>

<a class="navbar-brand d-flex align-items-center" asp-area="" asp-controller="Home" asp-action="Index">
<h1 class="h3 mb-0">ID.me + .NET Sample App</h1>
</a>
<div class="d-sm-inline-flex">
<ul class="navbar-nav">
@if (User?.Identity?.IsAuthenticated == true)
{
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Profile" asp-action="Index">Profile</a>
</li>

<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Account" asp-action="Logout">Sign out</a>
</li>
Expand Down Expand Up @@ -65,15 +53,7 @@
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>

</environment>
<script src="~/js/site.js" asp-append-version="true"></script>

Expand Down
26 changes: 26 additions & 0 deletions Views/Shared/_Layout.cshtml.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,32 @@ a {
color: #0077cc;
}

.btn-primary {
background-color: #007bff;
border-color: #007bff;
}

/* Additional styling for clearer separation */
.section {
padding: 2rem 0;
border-bottom: 1px solid #e0e0e0;
}

.section:last-child {
border-bottom: none;
}/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}

a {
color: #0077cc;
}

.btn-primary {
color: #fff;
background-color: #1b6ec2;
Expand Down

0 comments on commit 8b1b6a3

Please sign in to comment.