Skip to content

Upgrades to verify v2, improves testing #547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 30, 2024
Merged

Upgrades to verify v2, improves testing #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion magic-links/assets/email-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
More details about how to set up email verification in the <a href="https://www.twilio.com/docs/verify/email">documentation</a>.
</p>
<p>
<a href="{{callback_url}}?token={{twilio_code}}&to={{email}}"
<a href="{{callback_url}}?code={{twilio_code}}&to={{email}}"
style="background-color:#ffbe00; color:#000000; display:inline-block; padding:12px 40px 12px 40px; text-align:center; text-decoration:none;"
target="_blank">Click here to verify email</a>
</p>
Expand Down
164 changes: 107 additions & 57 deletions magic-links/assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login with Twilio Verify</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>One-Click Login with Twilio Verify</title>
<link
rel="icon"
href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico"
/>
<link
rel="stylesheet"
href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css"
/>
</head>
<body>
<div class="container">
<h2>Twilio Verify</h2>
<p>
This example shows how to deploy
<a href="https://twilio.com/docs/verify/api">Twilio Verify</a>
and Twilio functions for serverless email verification with magic links.
</p>
<div class="page-top">
<header>
<div id="twilio-logo">
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
<svg
class="logo"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 60 60"
>
<title>Twilio Logo</title>
<path
class="cls-1"
d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"
/>
</svg>
</a>
</div>
<nav>
<a href="/index.html" style="text-decoration: none; color: white"
><span>Your Twilio Verify Application</span>
<aside>
<svg
class="icon"
role="img"
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 20 20"
aria-labelledby="NewIcon-1577"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"
></path>
</svg>
Live
</aside>
</a>
</nav>
</header>
</div>
<main>
<div class="content">
<form id="login">
<div class="form-group email-input" ">
<p>Enter your email:</p>
<input type="email" id="email" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Verify"/>
</div>
</form>
<span id="form-success" class="text-success"></span>
<span id="form-error" class="text-danger"></span>
<section>
<p>
This example shows how to deploy
<a href="https://twilio.com/docs/verify/api">Twilio Verify</a>
and Twilio functions for serverless email verification with magic links.
</p>
<form id="login">
<div class="form-group email-input" ">
<p>Enter your email:</p>
<input type="email" id="email" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Verify"/>
</div>
</form>
<span id="form-msg"></span>
</section>
<!-- EDIT_CODE_V2 -->
</div>
</div>
<!-- /.container -->
<!-- EDIT_CODE -->
</main>
<footer>
<span>We can't wait to see what you build.</span>
</footer>
</body>
<script>
function showSubmitStatus(statusType, message) {
var content = $(`#form-${statusType}`);
content.empty();
content.append(message);
function showStatus(statusType, message) {
let content = document.getElementById("form-msg");
content.className = statusType;
content.innerHTML = message;
}

$("#login").submit(function (event) {
event.preventDefault();

const to = $("#email").val()
async function sendVerificationEmail() {
const to = document.getElementById("email").value;

// Twilio functions do not accept multipart/form-data
const data = new URLSearchParams();
data.append("channel", "email");
data.append("to", to);

fetch("./start-verify", {
method: "POST",
body: data
})
.then(response => {
return response.json()
})
.then(json => {
if (json.success) {
$("#form-error").empty();
console.log("Successfully sent email.");
const message = `Email sent to ${to}. Check your email to complete verification.`;
showSubmitStatus("success", message);
} else {
$("#form-success").empty();
console.log(json.error);
const message = `Error: ${json.error.message} <a href="${json.error.moreInfo}">[more info]</a>`;
showSubmitStatus("error", message);
}
})
.catch(err => {
console.log(err);
showSubmitStatus("error", "Error starting verification.");
try {
const response = await fetch("./start-verify", {
method: "POST",
body: data
});
const json = await response.json();
if (json.success) {
console.log("Successfully sent email.");
const message = `Email sent to ${to}. Check your email to complete verification.`;
showStatus("success", message);
} else {
console.log(json.error);
const message = `Error: ${json.error.message} <a href="${json.error.moreInfo}">[more info]</a>`;
showStatus("error", message);
}
} catch (err) {
console.log(err);
showStatus("error", "Error starting verification.");
}
}

document.getElementById("login").addEventListener("submit", function(event) {
event.preventDefault();
sendVerificationEmail();
});
</script>
</html>
120 changes: 79 additions & 41 deletions magic-links/assets/verify.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login with Twilio Verify</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>One-Click Login with Twilio Verify</title>
<link
rel="icon"
href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<h2>Twilio Verify</h2>
<div class="page-top">
<header>
<div id="twilio-logo">
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
<svg
class="logo"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 60 60"
>
<title>Twilio Logo</title>
<path
class="cls-1"
d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"
/>
</svg>
</a>
</div>
<nav>
<a href="/index.html" style="text-decoration: none; color: white"
><span>Your Twilio Verify Application</span>
<aside>
<svg
class="icon"
role="img"
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 20 20"
aria-labelledby="NewIcon-1577"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"
></path>
</svg>
Live
</aside>
</a>
</nav>
</header>
</div>
<main>
<div class="content">
<div id="result-message"></div>
<p>
<a href="/index.html">Try another verification</a>
</p>
<!-- EDIT_CODE_V2 -->
</div>
</div><!-- /.container -->
</main>
<footer>
<span>We can't wait to see what you build.</span>
</footer>
</body>
<script>
function showVerificationStatus(alertType, message) {
const content = $("#result-message");
content.empty();
content.append($("<div>")
.addClass(`alert alert-${alertType}`)
.attr("role", "alert")
.text(message))
function showVerificationStatus(message) {
let content = document.getElementById("result-message");
content.innerHTML = message;
}

const params = new URLSearchParams(window.location.search);
const token = params.get("token");
const to = params.get("to");

// Twilio functions do not accept multipart/form-data
const data = new URLSearchParams();
data.append("to", to);
data.append("verification_code", token);
async function checkVerification() {
const queryParams = new URLSearchParams(window.location.search);
const data = new URLSearchParams();
["code", "to"].forEach((key) => {
if (queryParams.has(key)) {
data.append(key, queryParams.get(key));
}
});

fetch("./check-verify", {
method: 'POST',
body: data
})
.then(response => response.json())
.then(json => {
const alertType = json.success ? "success" : "danger";
showVerificationStatus(alertType, json.message);
})
.catch(err => {
console.log(err);
showVerificationStatus("danger", "Something went wrong!");
let response = await fetch("./check-verify", {
method: "POST",
body: data,
});

let json = await response.json();
showVerificationStatus(json.message);
}

checkVerification();
</script>
</html>
</html>
Loading
Loading