<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Trent's blog of mostly technical documentations.">
<link rel="canonical" href="https://blog.trentsonlinedocs.xyz/posts/test-qr-svg-django/">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.2.2, mkdocs-material-7.2.6">
<title>Test QRCODE Svg in Django - Trent's Blog</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.802231af.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.3f5d1f46.min.css">
<meta name="theme-color" content="#ffffff">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
<style>:root{--md-text-font-family:"Roboto";--md-code-font-family:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../extra.css">
<meta property="og:type" content="website" />
<meta property="og:title" content="Trent's Blog - Test QRCODE Svg in Django" />
<meta property="og:description" content="Trent's blog of mostly technical documentations." />
<meta property="og:url" content="https://blog.trentsonlinedocs.xyz/posts/test-qr-svg-django/" />
<meta property="og:image" content="https://blog.trentsonlinedocs.xyz/photos/trent.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1120" />
<meta property="og:image:height" content="1120" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@BoringTrent" />
<meta name="twitter:creator" content="@BoringTrent" />
<meta name="twitter:title" content="Trent's Blog - Test QRCODE Svg in Django" />
<meta name="twitter:description" content="Trent's blog of mostly technical documentations." />
<meta name="twitter:image" content="https://blog.trentsonlinedocs.xyz/photos/trent.png" />
<link href="https://blog.trentsonlinedocs.xyz/feed_rss_created.xml" type="application/rss+xml" rel="alternate" title="Trent's Blog - RSS Feed Created"/>
<link href="https://blog.trentsonlinedocs.xyz/feed_rss_updated.xml" type="application/rss+xml" rel="alternate" title="Trent's Blog - RSS Feed Updated"/>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="">
<script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#introduction" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Trent's Blog" class="md-header__button md-logo" aria-label="Trent's Blog" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Trent's Blog
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Test QRCODE Svg in Django
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../rss/" class="md-tabs__link">
RSS
</a>
</li>
<li class="md-tabs__item">
<a href="../../links/" class="md-tabs__link">
Links
</a>
</li>
<li class="md-tabs__item">
<a href="../debian-11-ttrss/" class="md-tabs__link md-tabs__link--active">
Posts
</a>
</li>
<li class="md-tabs__item">
<a href="https://trentpalmer.org" class="md-tabs__link">
TrentReads
</a>
</li>
<li class="md-tabs__item">
<a href="https://blog.trentpalmer.org" class="md-tabs__link">
AttentionSpanHistory
</a>
</li>
<li class="md-tabs__item">
<a href="https://github.com/TrentSPalmer" class="md-tabs__link">
GitHub
</a>
</li>
<li class="md-tabs__item">
<a href="https://twitter.com/boringtrent" class="md-tabs__link">
Twitter
</a>
</li>
<li class="md-tabs__item">
<a href="https://www.facebook.com/trentspalmer" class="md-tabs__link">
Facebook
</a>
</li>
<li class="md-tabs__item">
<a href="https://docs.trentsonlinedocs.xyz/" class="md-tabs__link">
TrentDocs
</a>
</li>
<li class="md-tabs__item">
<a href="https://trentsonlinedocs.xyz/hugo-themes-report/hugo-themes-report.html" class="md-tabs__link">
HugoThemesReport
</a>
</li>
<li class="md-tabs__item">
<a href="https://play.google.com/store/apps/details?id=org.trentpalmer.libre_gps_parser" class="md-tabs__link">
LibreGpsParser
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Trent's Blog" class="md-nav__button md-logo" aria-label="Trent's Blog" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>
</a>
Trent's Blog
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_1" type="checkbox" id="__nav_1" >
<label class="md-nav__link" for="__nav_1">
Home
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Home" data-md-level="1">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
Home
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
Home
</a>
</li>
<li class="md-nav__item">
<a href="../debian-11-ttrss/" class="md-nav__link">
Debian 11 TT-RSS
</a>
</li>
<li class="md-nav__item">
<a href="../trents-favorite-podcasts/" class="md-nav__link">
Trent's Favorite Podcasts
</a>
</li>
<li class="md-nav__item">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Test QR SVG Django
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Test QR SVG Django
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#introduction" class="md-nav__link">
Introduction
</a>
<nav class="md-nav" aria-label="Introduction">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#python-libraries-used" class="md-nav__link">
Python Libraries Used
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#form-screenshot" class="md-nav__link">
Form ScreenShot
</a>
</li>
<li class="md-nav__item">
<a href="#import-python-libraries" class="md-nav__link">
Import Python Libraries
</a>
</li>
<li class="md-nav__item">
<a href="#setup-testcase" class="md-nav__link">
setUp TestCase
</a>
</li>
<li class="md-nav__item">
<a href="#get-form" class="md-nav__link">
GET Form
</a>
</li>
<li class="md-nav__item">
<a href="#consume-svg-with-beautifulsoup" class="md-nav__link">
Consume SVG with BeautifulSoup
</a>
</li>
<li class="md-nav__item">
<a href="#svg2png" class="md-nav__link">
svg2png
</a>
</li>
<li class="md-nav__item">
<a href="#add-white-background" class="md-nav__link">
Add White Background
</a>
</li>
<li class="md-nav__item">
<a href="#extract-data-from-qrcode" class="md-nav__link">
Extract Data From QRCODE
</a>
</li>
<li class="md-nav__item">
<a href="#post-the-totp_code" class="md-nav__link">
POST the totp_code
</a>
</li>
<li class="md-nav__item">
<a href="#complete-testcase" class="md-nav__link">
Complete TestCase
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../prosody-photo-uploads/" class="md-nav__link">
Prosody Photo Uploads
</a>
</li>
<li class="md-nav__item">
<a href="../xmpp-apt-notifications/" class="md-nav__link">
XMPP Apt Notification
</a>
</li>
<li class="md-nav__item">
<a href="../apache-virtual-hosts/" class="md-nav__link">
Apache Virtual Hosts
</a>
</li>
<li class="md-nav__item">
<a href="../sendxmpp-handler-for-python-logging/" class="md-nav__link">
SENDXMPP Handler for Python Logging
</a>
</li>
<li class="md-nav__item">
<a href="../instructions-for-tethering-from-phone/" class="md-nav__link">
Instruction For Tethering From Phone
</a>
</li>
<li class="md-nav__item">
<a href="../lmde4-custom-partitions-disk-encryption/" class="md-nav__link">
LMDE4 Custom Partitions for Disk Encryption
</a>
</li>
<li class="md-nav__item">
<a href="../linux-move-cursor-with-keyboard/" class="md-nav__link">
Linux Move Cursor With Keyboard
</a>
</li>
<li class="md-nav__item">
<a href="../simplified-raspberry-streaming/" class="md-nav__link">
Simplified Raspberry Streaming
</a>
</li>
<li class="md-nav__item">
<a href="../clear-linux-encrypted-xfs-root/" class="md-nav__link">
Clear Linux Encrypted XFS Root
</a>
</li>
<li class="md-nav__item">
<a href="../clear-linux-guest-virt-manager/" class="md-nav__link">
Clear Linux Guest Virt Manager
</a>
</li>
<li class="md-nav__item">
<a href="../faster-partitioning-with-sgdisk/" class="md-nav__link">
Faster Partitioning with Sgdisk
</a>
</li>
<li class="md-nav__item">
<a href="../lmde3-xfs-full-disk-encryption/" class="md-nav__link">
LMDE3 XFS Full Disk Encryption
</a>
</li>
<li class="md-nav__item">
<a href="../rewrite-hugo-themes-report-in-python/" class="md-nav__link">
Rewrite Hugo Themes Report In Python
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2">
RSS
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="RSS" data-md-level="1">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
RSS
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../rss/" class="md-nav__link">
RSS
</a>
</li>
<li class="md-nav__item">
<a href="/feed_rss_created.xml" class="md-nav__link">
RssCreated
</a>
</li>
<li class="md-nav__item">
<a href="/feed_rss_updated.xml" class="md-nav__link">
RssUpdated
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3">
Links
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Links" data-md-level="1">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Links
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../links/" class="md-nav__link">
Links
</a>
</li>
<li class="md-nav__item">
<a href="https://trentpalmer.org" class="md-nav__link">
TrentReads
</a>
</li>
<li class="md-nav__item">
<a href="https://blog.trentpalmer.org" class="md-nav__link">
AttentionSpanHistory
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/TrentSPalmer" class="md-nav__link">
GitHub
</a>
</li>
<li class="md-nav__item">
<a href="https://twitter.com/boringtrent" class="md-nav__link">
Twitter
</a>
</li>
<li class="md-nav__item">
<a href="https://www.facebook.com/trentspalmer" class="md-nav__link">
Facebook
</a>
</li>
<li class="md-nav__item">
<a href="https://docs.trentsonlinedocs.xyz/" class="md-nav__link">
TrentDocs
</a>
</li>
<li class="md-nav__item">
<a href="https://trentsonlinedocs.xyz/hugo-themes-report/hugo-themes-report.html" class="md-nav__link">
HugoThemesReport
</a>
</li>
<li class="md-nav__item">
<a href="https://play.google.com/store/apps/details?id=org.trentpalmer.libre_gps_parser" class="md-nav__link">
LibreGpsParser
</a>
</li>
<li class="md-nav__item">
<a href="https://concise-pdx.com/" class="md-nav__link">
ConcisePDX
</a>
</li>
<li class="md-nav__item">
<a href="https://trentspalmer.github.io/fcc-challenges/" class="md-nav__link">
FreeCodeCampChallenges
</a>
</li>
<li class="md-nav__item">
<a href="https://trentpalmer.work/6a57bbe24d8244289610bf57533d6c6f/" class="md-nav__link">
DeviceLayout
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4">
Posts
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Posts" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Posts
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../debian-11-ttrss/" class="md-nav__link">
Debian 11 TT-RSS
</a>
</li>
<li class="md-nav__item">
<a href="../trents-favorite-podcasts/" class="md-nav__link">
Trent's Favorite Podcasts
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Test QR SVG Django
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Test QR SVG Django
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#introduction" class="md-nav__link">
Introduction
</a>
<nav class="md-nav" aria-label="Introduction">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#python-libraries-used" class="md-nav__link">
Python Libraries Used
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#form-screenshot" class="md-nav__link">
Form ScreenShot
</a>
</li>
<li class="md-nav__item">
<a href="#import-python-libraries" class="md-nav__link">
Import Python Libraries
</a>
</li>
<li class="md-nav__item">
<a href="#setup-testcase" class="md-nav__link">
setUp TestCase
</a>
</li>
<li class="md-nav__item">
<a href="#get-form" class="md-nav__link">
GET Form
</a>
</li>
<li class="md-nav__item">
<a href="#consume-svg-with-beautifulsoup" class="md-nav__link">
Consume SVG with BeautifulSoup
</a>
</li>
<li class="md-nav__item">
<a href="#svg2png" class="md-nav__link">
svg2png
</a>
</li>
<li class="md-nav__item">
<a href="#add-white-background" class="md-nav__link">
Add White Background
</a>
</li>
<li class="md-nav__item">
<a href="#extract-data-from-qrcode" class="md-nav__link">
Extract Data From QRCODE
</a>
</li>
<li class="md-nav__item">
<a href="#post-the-totp_code" class="md-nav__link">
POST the totp_code
</a>
</li>
<li class="md-nav__item">
<a href="#complete-testcase" class="md-nav__link">
Complete TestCase
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../prosody-photo-uploads/" class="md-nav__link">
Prosody Photo Uploads
</a>
</li>
<li class="md-nav__item">
<a href="../xmpp-apt-notifications/" class="md-nav__link">
XMPP Apt Notification
</a>
</li>
<li class="md-nav__item">
<a href="../apache-virtual-hosts/" class="md-nav__link">
Apache Virtual Hosts
</a>
</li>
<li class="md-nav__item">
<a href="../sendxmpp-handler-for-python-logging/" class="md-nav__link">
SENDXMPP Handler for Python Logging
</a>
</li>
<li class="md-nav__item">
<a href="../instructions-for-tethering-from-phone/" class="md-nav__link">
Instruction For Tethering From Phone
</a>
</li>
<li class="md-nav__item">
<a href="../lmde4-custom-partitions-disk-encryption/" class="md-nav__link">
LMDE4 Custom Partitions for Disk Encryption
</a>
</li>
<li class="md-nav__item">
<a href="../linux-move-cursor-with-keyboard/" class="md-nav__link">
Linux Move Cursor With Keyboard
</a>
</li>
<li class="md-nav__item">
<a href="../simplified-raspberry-streaming/" class="md-nav__link">
Simplified Raspberry Streaming
</a>
</li>
<li class="md-nav__item">
<a href="../clear-linux-encrypted-xfs-root/" class="md-nav__link">
Clear Linux Encrypted XFS Root
</a>
</li>
<li class="md-nav__item">
<a href="../clear-linux-guest-virt-manager/" class="md-nav__link">
Clear Linux Guest Virt Manager
</a>
</li>
<li class="md-nav__item">
<a href="../faster-partitioning-with-sgdisk/" class="md-nav__link">
Faster Partitioning with Sgdisk
</a>
</li>
<li class="md-nav__item">
<a href="../lmde3-xfs-full-disk-encryption/" class="md-nav__link">
LMDE3 XFS Full Disk Encryption
</a>
</li>
<li class="md-nav__item">
<a href="../rewrite-hugo-themes-report-in-python/" class="md-nav__link">
Rewrite Hugo Themes Report In Python
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="https://trentpalmer.org" class="md-nav__link">
TrentReads
</a>
</li>
<li class="md-nav__item">
<a href="https://blog.trentpalmer.org" class="md-nav__link">
AttentionSpanHistory
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/TrentSPalmer" class="md-nav__link">
GitHub
</a>
</li>
<li class="md-nav__item">
<a href="https://twitter.com/boringtrent" class="md-nav__link">
Twitter
</a>
</li>
<li class="md-nav__item">
<a href="https://www.facebook.com/trentspalmer" class="md-nav__link">
Facebook
</a>
</li>
<li class="md-nav__item">
<a href="https://docs.trentsonlinedocs.xyz/" class="md-nav__link">
TrentDocs
</a>
</li>
<li class="md-nav__item">
<a href="https://trentsonlinedocs.xyz/hugo-themes-report/hugo-themes-report.html" class="md-nav__link">
HugoThemesReport
</a>
</li>
<li class="md-nav__item">
<a href="https://play.google.com/store/apps/details?id=org.trentpalmer.libre_gps_parser" class="md-nav__link">
LibreGpsParser
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#introduction" class="md-nav__link">
Introduction
</a>
<nav class="md-nav" aria-label="Introduction">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#python-libraries-used" class="md-nav__link">
Python Libraries Used
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#form-screenshot" class="md-nav__link">
Form ScreenShot
</a>
</li>
<li class="md-nav__item">
<a href="#import-python-libraries" class="md-nav__link">
Import Python Libraries
</a>
</li>
<li class="md-nav__item">
<a href="#setup-testcase" class="md-nav__link">
setUp TestCase
</a>
</li>
<li class="md-nav__item">
<a href="#get-form" class="md-nav__link">
GET Form
</a>
</li>
<li class="md-nav__item">
<a href="#consume-svg-with-beautifulsoup" class="md-nav__link">
Consume SVG with BeautifulSoup
</a>
</li>
<li class="md-nav__item">
<a href="#svg2png" class="md-nav__link">
svg2png
</a>
</li>
<li class="md-nav__item">
<a href="#add-white-background" class="md-nav__link">
Add White Background
</a>
</li>
<li class="md-nav__item">
<a href="#extract-data-from-qrcode" class="md-nav__link">
Extract Data From QRCODE
</a>
</li>
<li class="md-nav__item">
<a href="#post-the-totp_code" class="md-nav__link">
POST the totp_code
</a>
</li>
<li class="md-nav__item">
<a href="#complete-testcase" class="md-nav__link">
Complete TestCase
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1>Test QR SVG Django</h1>
<p>date: 2021-04-19</p>
<h2 id="introduction"><strong>Introduction</strong></h2>
<p>I worked out a solution in django-testing, for testing a view that renders a qrcode
as an svg as an inline svg xml string.</p>
<p>In case you are not familiar with
<a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics" target="_blank">svg</a>,
scalable vector graphics, it is an image that is
completely rendered from a
<a href="https://en.wikipedia.org/wiki/String_(computer_science)" target="_blank">string</a>
of text, or more accurately <a href="https://en.wikipedia.org/wiki/XML" target="_blank">XML</a>
text, unlike <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics" target="_blank">PNG</a>
or <a href="https://en.wikipedia.org/wiki/JPEG" target="_blank">JPG</a>, which are
<a href="https://en.wikipedia.org/wiki/Binary_file" target="_blank">binary file</a>s.</p>
<h3 id="python-libraries-used">Python Libraries Used</h3>
<ul>
<li><a href="https://pypi.org/project/beautifulsoup4/" target="_blank">BeautifulSoup</a>
to consume html</li>
<li><a href="https://pypi.org/project/CairoSVG/" target="_blank">CairoSVG</a>
to convert svg to png</li>
<li><a href="https://pypi.org/project/Pillow/" target="_blank">python-pillow</a>
to convert transparent png background to white</li>
<li><a href="https://pypi.org/project/opencv-python/" target="_blank">opencv-python</a>
to extract data from qrcode</li>
<li><a href="https://pypi.org/project/pyotp/" target="_blank">python-pyotp</a></li>
</ul>
<h2 id="form-screenshot"><strong>Form ScreenShot</strong></h2>
<p>This is the form we will be testing.</p>
<p>In real life you would confirm that you want to use
<a href="https://en.wikipedia.org/wiki/Multi-factor_authentication" target="_blank">two-factor-authentication</a>
by scanning the qrcode with an
<a href="https://play.google.com/store/apps/details?id=org.shadowice.flocke.andotp" target="_blank">authentication app</a>
on your smartphone, and then enter the
<a href="https://en.wikipedia.org/wiki/Time-based_One-Time_Password" target="_blank">time-based one-time password</a>.</p>
<p>totp codes are derived from two things and two things only. A secret key and a time such as the current time.
For instance, an authentication application can tell you what your totp code is, but of course
in this testing scenario we use
<a href="https://pypi.org/project/pyotp/" target="_blank">python-pyotp</a>, after extracting
the secret key from the qrcode.</p>
<div align="center">
<em>enable totp confirmation form</em>
</div>
<p><img alt=""ScreenShot of a confirmation form for enabling totp (in a django app)"" class="center" src="../../photos/IMG_screenshot_enable_totp_confirmation_form.jpg" /></p>
<h2 id="import-python-libraries"><strong>Import Python Libraries</strong></h2>
<div class="highlight"><pre><span></span><code><span class="c1"># tp/accounts/tests/test_enable_totp_view.py</span>
<span class="c1"># python manage.py test accounts.tests.test_enable_totp_view</span>
<span class="kn">from</span> <span class="nn">django.test</span> <span class="kn">import</span> <span class="n">TestCase</span>
<span class="kn">from</span> <span class="nn">django.contrib.auth.models</span> <span class="kn">import</span> <span class="n">User</span>
<span class="kn">from</span> <span class="nn">accounts.models</span> <span class="kn">import</span> <span class="n">Account</span>
<span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">reverse</span>
<span class="kn">from</span> <span class="nn">bs4</span> <span class="kn">import</span> <span class="n">BeautifulSoup</span>
<span class="kn">import</span> <span class="nn">cv2</span>
<span class="kn">from</span> <span class="nn">cairosvg</span> <span class="kn">import</span> <span class="n">svg2png</span>
<span class="kn">from</span> <span class="nn">PIL</span> <span class="kn">import</span> <span class="n">Image</span>
<span class="kn">import</span> <span class="nn">pyotp</span>
<span class="kn">import</span> <span class="nn">pathlib</span>
</code></pre></div>
<p>The Account model has a one-to-one relationship with the Django built-in
User model. This is where we keep track of the totp secret key and
boolean value for having totp authentication enabled.</p>
<h2 id="setup-testcase"><strong>setUp TestCase</strong></h2>
<div class="highlight"><pre><span></span><code><span class="o">...</span>
<span class="kn">import</span> <span class="nn">pathlib</span>
<span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="k">def</span> <span class="nf">setUp</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="n">user_a</span> <span class="o">=</span> <span class="n">User</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">create</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span><span class="p">)</span>
<span class="n">user_a</span><span class="o">.</span><span class="n">set_password</span><span class="p">(</span><span class="s1">'password_user_a'</span><span class="p">)</span>
<span class="n">user_a</span><span class="o">.</span><span class="n">save</span><span class="p">()</span>
<span class="n">Account</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">create</span><span class="p">(</span><span class="n">user</span><span class="o">=</span><span class="n">user_a</span><span class="p">)</span>
</code></pre></div>
<p>We create a test user and save that in the test database.</p>
<h2 id="get-form"><strong>GET Form</strong></h2>
<p><div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">login</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span><span class="p">,</span>
<span class="n">password</span><span class="o">=</span><span class="s1">'password_user_a'</span>
<span class="p">)</span>
<span class="n">get_response</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">get</span><span class="p">(</span>
<span class="n">reverse</span><span class="p">(</span><span class="s1">'accounts:enable_totp'</span><span class="p">)</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">status_code</span><span class="p">,</span> <span class="mi">200</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTemplateUsed</span><span class="p">(</span>
<span class="n">get_response</span><span class="p">,</span> <span class="s1">'accounts/totp_form.html'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">request</span><span class="p">[</span><span class="s1">'PATH_INFO'</span><span class="p">],</span>
<span class="s1">'/accounts/enable-totp/'</span>
<span class="p">)</span>
</code></pre></div>
The TestCase requires two requests. In the first request we GET the form
so that we can consume the qrcode.</p>
<h2 id="consume-svg-with-beautifulsoup"><strong>Consume SVG with BeautifulSoup</strong></h2>
<p><div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="o">...</span>
<span class="n">soup</span> <span class="o">=</span> <span class="n">BeautifulSoup</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">content</span><span class="p">,</span> <span class="n">features</span><span class="o">=</span><span class="s2">"lxml"</span>
<span class="p">)</span>
<span class="n">svg_container</span> <span class="o">=</span> <span class="n">soup</span><span class="o">.</span><span class="n">find</span><span class="p">(</span>
<span class="s2">"div"</span><span class="p">,</span> <span class="p">{</span><span class="s2">"id"</span><span class="p">:</span> <span class="s2">"svgcontainer"</span><span class="p">}</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertIsNotNone</span><span class="p">(</span><span class="n">svg_container</span><span class="p">)</span>
<span class="n">scsvg</span> <span class="o">=</span> <span class="n">svg_container</span><span class="o">.</span><span class="n">findChild</span><span class="p">(</span>
<span class="s2">"svg"</span><span class="p">,</span> <span class="n">recursive</span><span class="o">=</span><span class="kc">False</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertIsNotNone</span><span class="p">(</span><span class="n">scsvg</span><span class="p">)</span>
<span class="k">with</span> <span class="nb">open</span><span class="p">(</span><span class="s1">'qr.svg'</span><span class="p">,</span> <span class="s1">'w'</span><span class="p">)</span> <span class="k">as</span> <span class="n">f</span><span class="p">:</span>
<span class="n">x_string</span> <span class="o">=</span> <span class="s2">"<?xml version='1.0'"</span>
<span class="n">x_string</span> <span class="o">+=</span> <span class="s2">" encoding='utf-8'?></span><span class="se">\n</span><span class="s2">"</span>
<span class="n">f</span><span class="o">.</span><span class="n">write</span><span class="p">(</span><span class="n">x_string</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">scsvg</span><span class="p">))</span>
</code></pre></div>
The inline xml for the svg comes to us as a child of a
<code>div</code> with an <code>id</code> of <em>svgcontainer</em>. We capture the xml of the svg in the variable
<code>scsvg</code>, and then write it out to disc.</p>
<h2 id="svg2png"><strong>svg2png</strong></h2>
<p><div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="o">...</span>
<span class="n">svg2png</span><span class="p">(</span>
<span class="n">url</span><span class="o">=</span><span class="s1">'qr.svg'</span><span class="p">,</span> <span class="n">write_to</span><span class="o">=</span><span class="s1">'qr.png'</span><span class="p">,</span>
<span class="n">scale</span><span class="o">=</span><span class="mi">8</span>
<span class="p">)</span>
</code></pre></div>
With svg2png from CairoSVG, we convert the svg to png format. Opencv seems
unable to consume the qrcode unless you scale it up.</p>
<h2 id="add-white-background"><strong>Add White Background</strong></h2>
<p><div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="o">...</span>
<span class="n">t_image</span> <span class="o">=</span> <span class="n">Image</span><span class="o">.</span><span class="n">open</span><span class="p">(</span><span class="s1">'qr.png'</span><span class="p">)</span>
<span class="n">t_image</span><span class="o">.</span><span class="n">load</span><span class="p">()</span>
<span class="n">background</span> <span class="o">=</span> <span class="n">Image</span><span class="o">.</span><span class="n">new</span><span class="p">(</span>
<span class="s2">"RGB"</span><span class="p">,</span> <span class="n">t_image</span><span class="o">.</span><span class="n">size</span><span class="p">,</span>
<span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span>
<span class="p">)</span>
<span class="n">background</span><span class="o">.</span><span class="n">paste</span><span class="p">(</span>
<span class="n">t_image</span><span class="p">,</span>
<span class="n">mask</span><span class="o">=</span><span class="n">t_image</span><span class="o">.</span><span class="n">split</span><span class="p">()[</span><span class="mi">3</span><span class="p">]</span>
<span class="p">)</span>
<span class="n">background</span><span class="o">.</span><span class="n">save</span><span class="p">(</span>
<span class="s1">'qr.jpg'</span><span class="p">,</span> <span class="s2">"JPEG"</span><span class="p">,</span>
<span class="n">quality</span><span class="o">=</span><span class="mi">100</span>
<span class="p">)</span>
</code></pre></div>
We use Image from python-pillow to change the background from transparent
to white. Opencv seems unable to consume the qrcode when it has a transparent
background.</p>
<h2 id="extract-data-from-qrcode"><strong>Extract Data From QRCODE</strong></h2>
<div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="o">...</span>
<span class="n">image</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">imread</span><span class="p">(</span><span class="s1">'qr.jpg'</span><span class="p">)</span>
<span class="n">qr_det</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">QRCodeDetector</span><span class="p">()</span>
<span class="n">qrdata</span> <span class="o">=</span> <span class="n">qr_det</span><span class="o">.</span><span class="n">detectAndDecode</span><span class="p">(</span><span class="n">image</span><span class="p">)</span>
<span class="n">totp_code</span> <span class="o">=</span> <span class="n">pyotp</span><span class="o">.</span><span class="n">TOTP</span><span class="p">(</span>
<span class="n">pyotp</span><span class="o">.</span><span class="n">parse_uri</span><span class="p">(</span><span class="n">qrdata</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span><span class="o">.</span><span class="n">secret</span>
<span class="p">)</span><span class="o">.</span><span class="n">now</span><span class="p">()</span>
</code></pre></div>
<ul>
<li><code>qrdata[0]</code> will be the <em>otpauth_uri</em>.</li>
<li><code>pyotp.parse_uri(qrdata[0]).secret</code> is the secret key.</li>
<li><code>totp_code</code> is the one-time password.</li>
</ul>
<h2 id="post-the-totp_code"><strong>POST the <code>totp_code</code></strong></h2>
<p><div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="o">...</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="o">...</span>
<span class="n">totp_code</span> <span class="o">=</span> <span class="n">pyotp</span><span class="o">.</span><span class="n">TOTP</span><span class="p">(</span>
<span class="n">pyotp</span><span class="o">.</span><span class="n">parse_uri</span><span class="p">(</span><span class="n">qrdata</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span><span class="o">.</span><span class="n">secret</span>
<span class="p">)</span><span class="o">.</span><span class="n">now</span><span class="p">()</span>
<span class="n">response</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">post</span><span class="p">(</span>
<span class="n">reverse</span><span class="p">(</span><span class="s1">'accounts:enable_totp'</span><span class="p">),</span>
<span class="p">{</span><span class="s1">'totp_code'</span><span class="p">:</span> <span class="n">totp_code</span><span class="p">},</span>
<span class="n">follow</span><span class="o">=</span><span class="kc">True</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">response</span><span class="o">.</span><span class="n">status_code</span><span class="p">,</span> <span class="mi">200</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTemplateUsed</span><span class="p">(</span>
<span class="n">response</span><span class="p">,</span> <span class="s1">'base_form.html'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">response</span><span class="o">.</span><span class="n">request</span><span class="p">[</span><span class="s1">'PATH_INFO'</span><span class="p">],</span>
<span class="s1">'/accounts/edit-profile/'</span>
<span class="p">)</span>
<span class="n">user_a</span> <span class="o">=</span> <span class="n">User</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">get</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTrue</span><span class="p">(</span><span class="n">user_a</span><span class="o">.</span><span class="n">account</span><span class="o">.</span><span class="n">use_totp</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="nb">len</span><span class="p">(</span><span class="n">user_a</span><span class="o">.</span><span class="n">account</span><span class="o">.</span><span class="n">totp_key</span><span class="p">),</span> <span class="mi">16</span>
<span class="p">)</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.svg'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.png'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.jpg'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
</code></pre></div>
Post the <code>totp_code</code> back to the form, and then verify
that the database is updated, and then delete the image
files.</p>
<h2 id="complete-testcase"><strong>Complete TestCase</strong></h2>
<div class="highlight"><pre><span></span><code><span class="c1"># tp/accounts/tests/test_enable_totp_view.py</span>
<span class="c1"># python manage.py test accounts.tests.test_enable_totp_view</span>
<span class="kn">from</span> <span class="nn">django.test</span> <span class="kn">import</span> <span class="n">TestCase</span>
<span class="kn">from</span> <span class="nn">django.contrib.auth.models</span> <span class="kn">import</span> <span class="n">User</span>
<span class="kn">from</span> <span class="nn">accounts.models</span> <span class="kn">import</span> <span class="n">Account</span>
<span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">reverse</span>
<span class="kn">from</span> <span class="nn">bs4</span> <span class="kn">import</span> <span class="n">BeautifulSoup</span>
<span class="kn">import</span> <span class="nn">cv2</span>
<span class="kn">from</span> <span class="nn">cairosvg</span> <span class="kn">import</span> <span class="n">svg2png</span>
<span class="kn">from</span> <span class="nn">PIL</span> <span class="kn">import</span> <span class="n">Image</span>
<span class="kn">import</span> <span class="nn">pyotp</span>
<span class="k">class</span> <span class="nc">TestEnableTOTPViewTestCase</span><span class="p">(</span><span class="n">TestCase</span><span class="p">):</span>
<span class="c1"># setUP TestCase</span>
<span class="k">def</span> <span class="nf">setUp</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="n">user_a</span> <span class="o">=</span> <span class="n">User</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">create</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span><span class="p">)</span>
<span class="n">user_a</span><span class="o">.</span><span class="n">set_password</span><span class="p">(</span><span class="s1">'password_user_a'</span><span class="p">)</span>
<span class="n">user_a</span><span class="o">.</span><span class="n">save</span><span class="p">()</span>
<span class="n">Account</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">create</span><span class="p">(</span><span class="n">user</span><span class="o">=</span><span class="n">user_a</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">test_enable_totp_view</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">login</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span><span class="p">,</span>
<span class="n">password</span><span class="o">=</span><span class="s1">'password_user_a'</span>
<span class="p">)</span>
<span class="c1"># GET Form</span>
<span class="n">get_response</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">get</span><span class="p">(</span>
<span class="n">reverse</span><span class="p">(</span><span class="s1">'accounts:enable_totp'</span><span class="p">)</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">status_code</span><span class="p">,</span> <span class="mi">200</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTemplateUsed</span><span class="p">(</span>
<span class="n">get_response</span><span class="p">,</span> <span class="s1">'accounts/totp_form.html'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">request</span><span class="p">[</span><span class="s1">'PATH_INFO'</span><span class="p">],</span>
<span class="s1">'/accounts/enable-totp/'</span>
<span class="p">)</span>
<span class="c1"># Consume SVG with BeautifulSoup</span>
<span class="n">soup</span> <span class="o">=</span> <span class="n">BeautifulSoup</span><span class="p">(</span>
<span class="n">get_response</span><span class="o">.</span><span class="n">content</span><span class="p">,</span> <span class="n">features</span><span class="o">=</span><span class="s2">"lxml"</span>
<span class="p">)</span>
<span class="n">svg_container</span> <span class="o">=</span> <span class="n">soup</span><span class="o">.</span><span class="n">find</span><span class="p">(</span>
<span class="s2">"div"</span><span class="p">,</span> <span class="p">{</span><span class="s2">"id"</span><span class="p">:</span> <span class="s2">"svgcontainer"</span><span class="p">}</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertIsNotNone</span><span class="p">(</span><span class="n">svg_container</span><span class="p">)</span>
<span class="n">scsvg</span> <span class="o">=</span> <span class="n">svg_container</span><span class="o">.</span><span class="n">findChild</span><span class="p">(</span>
<span class="s2">"svg"</span><span class="p">,</span> <span class="n">recursive</span><span class="o">=</span><span class="kc">False</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertIsNotNone</span><span class="p">(</span><span class="n">scsvg</span><span class="p">)</span>
<span class="k">with</span> <span class="nb">open</span><span class="p">(</span><span class="s1">'qr.svg'</span><span class="p">,</span> <span class="s1">'w'</span><span class="p">)</span> <span class="k">as</span> <span class="n">f</span><span class="p">:</span>
<span class="n">x_string</span> <span class="o">=</span> <span class="s2">"<?xml version='1.0'"</span>
<span class="n">x_string</span> <span class="o">+=</span> <span class="s2">" encoding='utf-8'?></span><span class="se">\n</span><span class="s2">"</span>
<span class="n">f</span><span class="o">.</span><span class="n">write</span><span class="p">(</span><span class="n">x_string</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">scsvg</span><span class="p">))</span>
<span class="c1"># svg2png</span>
<span class="n">svg2png</span><span class="p">(</span>
<span class="n">url</span><span class="o">=</span><span class="s1">'qr.svg'</span><span class="p">,</span> <span class="n">write_to</span><span class="o">=</span><span class="s1">'qr.png'</span><span class="p">,</span>
<span class="n">scale</span><span class="o">=</span><span class="mi">8</span>
<span class="p">)</span>
<span class="c1"># add white background</span>
<span class="n">t_image</span> <span class="o">=</span> <span class="n">Image</span><span class="o">.</span><span class="n">open</span><span class="p">(</span><span class="s1">'qr.png'</span><span class="p">)</span>
<span class="n">t_image</span><span class="o">.</span><span class="n">load</span><span class="p">()</span>
<span class="n">background</span> <span class="o">=</span> <span class="n">Image</span><span class="o">.</span><span class="n">new</span><span class="p">(</span>
<span class="s2">"RGB"</span><span class="p">,</span> <span class="n">t_image</span><span class="o">.</span><span class="n">size</span><span class="p">,</span>
<span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span>
<span class="p">)</span>
<span class="n">background</span><span class="o">.</span><span class="n">paste</span><span class="p">(</span>
<span class="n">t_image</span><span class="p">,</span>
<span class="n">mask</span><span class="o">=</span><span class="n">t_image</span><span class="o">.</span><span class="n">split</span><span class="p">()[</span><span class="mi">3</span><span class="p">]</span>
<span class="p">)</span>
<span class="n">background</span><span class="o">.</span><span class="n">save</span><span class="p">(</span>
<span class="s1">'qr.jpg'</span><span class="p">,</span> <span class="s2">"JPEG"</span><span class="p">,</span>
<span class="n">quality</span><span class="o">=</span><span class="mi">100</span>
<span class="p">)</span>
<span class="c1"># extract data from qrcode</span>
<span class="n">image</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">imread</span><span class="p">(</span><span class="s1">'qr.jpg'</span><span class="p">)</span>
<span class="n">qr_det</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">QRCodeDetector</span><span class="p">()</span>
<span class="n">qrdata</span> <span class="o">=</span> <span class="n">qr_det</span><span class="o">.</span><span class="n">detectAndDecode</span><span class="p">(</span><span class="n">image</span><span class="p">)</span>
<span class="n">totp_code</span> <span class="o">=</span> <span class="n">pyotp</span><span class="o">.</span><span class="n">TOTP</span><span class="p">(</span>
<span class="n">pyotp</span><span class="o">.</span><span class="n">parse_uri</span><span class="p">(</span><span class="n">qrdata</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span><span class="o">.</span><span class="n">secret</span>
<span class="p">)</span><span class="o">.</span><span class="n">now</span><span class="p">()</span>
<span class="n">totp_code</span> <span class="o">=</span> <span class="n">pyotp</span><span class="o">.</span><span class="n">TOTP</span><span class="p">(</span>
<span class="n">pyotp</span><span class="o">.</span><span class="n">parse_uri</span><span class="p">(</span><span class="n">qrdata</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span><span class="o">.</span><span class="n">secret</span>
<span class="p">)</span><span class="o">.</span><span class="n">now</span><span class="p">()</span>
<span class="c1"># POST the `totp_code`</span>
<span class="n">response</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">client</span><span class="o">.</span><span class="n">post</span><span class="p">(</span>
<span class="n">reverse</span><span class="p">(</span><span class="s1">'accounts:enable_totp'</span><span class="p">),</span>
<span class="p">{</span><span class="s1">'totp_code'</span><span class="p">:</span> <span class="n">totp_code</span><span class="p">},</span>
<span class="n">follow</span><span class="o">=</span><span class="kc">True</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">response</span><span class="o">.</span><span class="n">status_code</span><span class="p">,</span> <span class="mi">200</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTemplateUsed</span><span class="p">(</span>
<span class="n">response</span><span class="p">,</span> <span class="s1">'base_form.html'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="n">response</span><span class="o">.</span><span class="n">request</span><span class="p">[</span><span class="s1">'PATH_INFO'</span><span class="p">],</span>
<span class="s1">'/accounts/edit-profile/'</span>
<span class="p">)</span>
<span class="n">user_a</span> <span class="o">=</span> <span class="n">User</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">get</span><span class="p">(</span>
<span class="n">username</span><span class="o">=</span><span class="s1">'user_a'</span>
<span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertTrue</span><span class="p">(</span><span class="n">user_a</span><span class="o">.</span><span class="n">account</span><span class="o">.</span><span class="n">use_totp</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">assertEquals</span><span class="p">(</span>
<span class="nb">len</span><span class="p">(</span><span class="n">user_a</span><span class="o">.</span><span class="n">account</span><span class="o">.</span><span class="n">totp_key</span><span class="p">),</span> <span class="mi">16</span>
<span class="p">)</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.svg'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.png'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
<span class="n">pathlib</span><span class="o">.</span><span class="n">Path</span><span class="p">(</span><span class="s1">'qr.jpg'</span><span class="p">)</span><span class="o">.</span><span class="n">unlink</span><span class="p">()</span>
</code></pre></div>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer">
<a href="../trents-favorite-podcasts/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Trent's Favorite Podcasts" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Trent's Favorite Podcasts
</div>
</div>
</a>
<a href="../prosody-photo-uploads/" class="md-footer__link md-footer__link--next" aria-label="Next: Prosody Photo Uploads" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Prosody Photo Uploads
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-footer-social">
<a href="https://twitter.com/boringtrent" target="_blank" rel="noopener" title="trent on twitter" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
<a href="https://www.facebook.com/trentspalmer" target="_blank" rel="noopener" title="trent on facebook" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
</a>
<a href="https://github.com/TrentSPalmer" target="_blank" rel="noopener" title="trent on github" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="/rss" target="_blank" rel="noopener" title="rss" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tabs"], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../../assets/javascripts/workers/search.409db549.min.js", "version": null}</script>
<script src="../../assets/javascripts/bundle.756773cc.min.js"></script>
</body>
</html>