Skip to content

Commit 4be0a80

Browse files
committed
:octocat: authenticator example
1 parent cdaf8aa commit 4be0a80

File tree

3 files changed

+127
-0
lines changed

3 files changed

+127
-0
lines changed

composer.json

+1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"chillerlan/php-settings-container": "^2.1.4 || ^3.0"
4747
},
4848
"require-dev": {
49+
"chillerlan/php-authenticator": "^4.0 || ^5.0",
4950
"phan/phan": "^5.4",
5051
"phpunit/phpunit": "^9.6",
5152
"phpmd/phpmd": "^2.13",

examples/Readme.md

+1
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,6 @@
2727

2828
## Other examples
2929

30+
- [Authenticator](./authenticator.php): create a QR Code that displays an URI for a mobile authenticator (featuring [`chillerlan/php-authenticator`](https://github.com/chillerlan/php-authenticator))
3031
- [Interactive output](./qrcode-interactive.php): interactive demo (via [index.html](./index.html))
3132
- [Custom module shapes](./shapes.svg): SVG paths to customize the module shapes ([#150](https://github.com/chillerlan/php-qrcode/discussions/150))

examples/authenticator.php

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<?php
2+
/**
3+
* authenticator.php
4+
*
5+
* @created 09.07.2023
6+
* @author smiley <[email protected]>
7+
* @copyright 2023 smiley
8+
* @license MIT
9+
*/
10+
11+
use chillerlan\Authenticator\{Authenticator, AuthenticatorOptionsTrait};
12+
use chillerlan\Authenticator\Authenticators\AuthenticatorInterface;
13+
use chillerlan\Settings\SettingsContainerAbstract;
14+
use chillerlan\QRCode\{QRCode, QROptionsTrait};
15+
use chillerlan\QRCode\Data\QRMatrix;
16+
17+
require_once __DIR__.'/../vendor/autoload.php';
18+
19+
// the options array
20+
$optionsArray = [
21+
/*
22+
* AuthenticatorOptionsTrait
23+
*
24+
* @see https://github.com/chillerlan/php-authenticator
25+
*/
26+
'mode' => AuthenticatorInterface::TOTP,
27+
'digits' => 8,
28+
'algorithm' => AuthenticatorInterface::ALGO_SHA512,
29+
30+
/*
31+
* QROptionsTrait
32+
*/
33+
'version' => 7,
34+
'addQuietzone' => false,
35+
'imageBase64' => false,
36+
'svgAddXmlHeader' => false,
37+
'cssClass' => 'my-qrcode',
38+
'drawLightModules' => false,
39+
'markupDark' => '',
40+
'markupLight' => '',
41+
'drawCircularModules' => true,
42+
'circleRadius' => 0.4,
43+
'connectPaths' => true,
44+
'keepAsSquare' => [
45+
QRMatrix::M_FINDER_DARK,
46+
QRMatrix::M_FINDER_DOT,
47+
QRMatrix::M_ALIGNMENT_DARK,
48+
],
49+
'svgDefs' => '
50+
<linearGradient id="gradient" x1="1" y2="1">
51+
<stop id="stop1" offset="0" />
52+
<stop id="stop2" offset="0.5"/>
53+
<stop id="stop3" offset="1"/>
54+
</linearGradient>',
55+
];
56+
57+
// create a new options container on the fly that hosts both, authenticator and qrcode
58+
$options = new class($optionsArray) extends SettingsContainerAbstract{
59+
use AuthenticatorOptionsTrait, QROptionsTrait;
60+
};
61+
62+
// invoke the worker instances
63+
$authenticator = new Authenticator($options);
64+
$qrcode = new QRCode($options);
65+
66+
// create a secret and URI, generate the QR Code
67+
$secret = $authenticator->createSecret(24);
68+
$uri = $authenticator->getUri('your authenticator', 'this website');
69+
$svg = $qrcode->render($uri);
70+
71+
// dump the output
72+
header('Content-type: text/html');
73+
74+
?>
75+
<!DOCTYPE html>
76+
<html lang="en">
77+
<head>
78+
<meta charset="UTF-8"/>
79+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
80+
<title>QRCode Authenticator Example</title>
81+
<style>
82+
#authenticator-qrcode{
83+
width: 500px;
84+
margin: 2em auto;
85+
}
86+
#secret{
87+
box-sizing: border-box;
88+
display: inline-block;
89+
width: 100%;
90+
font-size: 20px;
91+
}
92+
93+
/* styles for the embedded SVG QR code */
94+
.my-qrcode.qr-svg{
95+
margin-bottom: 1em;
96+
background: #eee; /* example for https://github.com/chillerlan/php-qrcode/discussions/199 */
97+
}
98+
.my-qrcode.qr-data-dark{
99+
fill: url(#gradient); /* the gradient defined in the SVG defs */
100+
}
101+
102+
.my-qrcode > defs > #gradient > #stop1{
103+
stop-color: #D70071;
104+
}
105+
.my-qrcode > defs > #gradient > #stop2{
106+
stop-color: #9C4E97;
107+
}
108+
.my-qrcode > defs > #gradient > #stop3{
109+
stop-color: #0035A9;
110+
}
111+
</style>
112+
</head>
113+
<body>
114+
<div id="authenticator-qrcode">
115+
<!-- embed the SVG directly -->
116+
<?php echo $svg ?>
117+
<!-- the input that holds the authenticator secret -->
118+
<input value="<?php echo $secret; ?>" id="secret" type="text" readonly="readonly" onclick="this.select();" />
119+
<label for="secret">secret</label>
120+
</div>
121+
</body>
122+
</html>
123+
<?php
124+
125+
exit;

0 commit comments

Comments
 (0)