-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
942 lines (921 loc) · 64.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="Vinícius Campitelli, eu@viniciuscampitelli.com">
<title>WebAuthn: o novo padrão de autenticação na Web</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="reveal.js/dist/reset.css">
<link rel="stylesheet" href="reveal.js/dist/reveal.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/dracula.min.css"
integrity="sha512-zKpFlhUX8c+WC6H/XTJavnEpWFt2zH9BU9vu0Hry5Y+SEgG21pRMFcecS7DgDXIegXBQ3uK9puwWPP3h6WSR9g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="reveal.js/dist/theme/white.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="first-slide">
<h1><span>WebAuthn:</span><br> o “novo” padrão de<br>autenticação<br>na Web</h1>
</section>
<section> <!-- Sobre mim -->
<section data-auto-animate>
<h1>Sobre mim</h1>
</section>
<section data-auto-animate>
<h1>Sobre mim</h1>
<div id="about-me">
<div class="text-center">
<img src="img/profile.jpg" alt="Vinícius Campitelli" id="profile-pic">
</div>
<ul>
<li>Desenvolvedor há 15 anos</li>
<li>Entusiasta em cibersegurança</li>
<li>Consultor de TI e instrutor de treinamentos</li>
<li>
DevRel na
<a href="https://fusionauth.io" target="_blank" rel="noopener">FusionAuth</a> e
<a href="https://yampi.com.br" target="_blank" rel="noopener">Yampi</a>
</li>
</ul>
<div class="fw-bold text-center line-height-1">Vinícius<br>Campitelli</div>
</div>
<div>
<div class="about-me-links">
<div>
<svg role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3222 10.383C15.3796 10.9457 15.4125 11.4903 15.4125 12C15.4125 12.9541 15.2972 14.0315 15.1208 15.1208C14.0315 15.2972 12.9541 15.4125 12 15.4125C11.0502 15.4125 9.97313 15.2975 8.87911 15.1205C8.70281 14.0312 8.5875 12.954 8.5875 12C8.5875 11.4905 8.62039 10.9458 8.67789 10.383C9.82608 10.5668 10.9715 10.6875 12 10.6875C13.0286 10.6875 14.174 10.5668 15.3222 10.383Z"
class="fill"/>
<path d="M16.8752 10.0994C16.9462 10.7579 16.9875 11.399 16.9875 12C16.9875 12.8769 16.8997 13.8389 16.7599 14.8153C18.7425 14.4016 20.575 13.8731 21.5567 13.5722C21.8739 13.475 21.9986 13.4363 22.1658 13.3694C22.2494 13.336 22.326 13.302 22.4259 13.2543C22.4748 12.843 22.5 12.4244 22.5 12C22.5 10.878 22.324 9.79714 21.9982 8.78346L21.9133 8.81017C20.8868 9.12245 18.9652 9.6745 16.8752 10.0994Z"
class="fill"/>
<path d="M21.4017 7.31948C20.3698 7.63221 18.579 8.14039 16.6599 8.53603C16.2178 5.84926 15.443 3.16951 15.0702 1.95598C17.8422 2.80227 20.1273 4.76467 21.4017 7.31948Z"
class="fill"/>
<path d="M15.1117 8.82229C14.0253 8.99781 12.9513 9.1125 12 9.1125C11.0487 9.1125 9.97477 8.99781 8.88843 8.8223C9.30471 6.28005 10.0478 3.68306 10.4278 2.44333C10.525 2.12606 10.5637 2.00144 10.6306 1.83418C10.664 1.75062 10.698 1.67398 10.7457 1.57414C11.157 1.52518 11.5756 1.5 12 1.5C12.4434 1.5 12.8803 1.52748 13.3093 1.58083C13.3184 1.61564 13.3268 1.64679 13.3351 1.67626C13.3597 1.76333 13.3982 1.8857 13.4628 2.09104L13.4696 2.11261C13.7935 3.14223 14.6519 6.01401 15.1117 8.82229Z"
class="fill"/>
<path d="M7.34004 8.536C7.7801 5.86107 8.54986 3.19576 8.92192 1.98181L8.92983 1.95597C6.15777 2.80225 3.8727 4.76465 2.59835 7.31946C3.63018 7.63219 5.42095 8.14036 7.34004 8.536Z"
class="fill"/>
<path d="M2.00184 8.78345C1.67598 9.79714 1.5 10.878 1.5 12C1.5 12.4389 1.52693 12.8715 1.57923 13.2963L1.74471 13.3515L1.74603 13.3519L1.74765 13.3525L1.74879 13.3528C1.80205 13.3705 3.36305 13.886 5.41878 14.3975C5.99886 14.5418 6.61307 14.6844 7.24006 14.8151C7.10025 13.8388 7.0125 12.8769 7.0125 12C7.0125 11.3988 7.05374 10.7577 7.12472 10.0994C5.03428 9.67436 3.11218 9.12212 2.08597 8.80989L2.07883 8.80771L2.00184 8.78345Z"
class="fill"/>
<path d="M12 16.9875C12.8769 16.9875 13.8389 16.8997 14.8153 16.7599C14.4016 18.7425 13.8731 20.575 13.5722 21.5566C13.475 21.8739 13.4363 21.9985 13.3694 22.1658C13.336 22.2494 13.302 22.326 13.2543 22.4259C12.843 22.4748 12.4244 22.5 12 22.5C11.5756 22.5 11.157 22.4748 10.7457 22.4259C10.698 22.326 10.664 22.2494 10.6306 22.1658C10.5637 21.9986 10.525 21.8739 10.4278 21.5567C10.1269 20.5751 9.59846 18.7427 9.18478 16.7603C10.1579 16.8996 11.1201 16.9875 12 16.9875Z"
class="fill"/>
<path d="M5.0385 15.9259C3.73853 15.6024 2.63135 15.2775 1.95597 15.0702C2.97258 18.4002 5.59982 21.0274 8.92983 22.044L8.92192 22.0182C8.59705 20.9582 7.96897 18.7917 7.52191 16.4784C6.6525 16.3103 5.80722 16.1171 5.0385 15.9259Z"
class="fill"/>
<path d="M22.0182 15.0781C20.9582 15.403 18.7915 16.0311 16.4781 16.4781C16.0311 18.7915 15.403 20.9581 15.0781 22.0182L15.0702 22.044C18.4002 21.0274 21.0274 18.4002 22.044 15.0702L22.0182 15.0781Z"
class="fill"/>
<path d="M1.6103 13.323C1.64665 13.3277 1.67628 13.3327 1.68611 13.3349C1.69472 13.337 1.70821 13.3406 1.7131 13.3419L1.72391 13.345L1.72973 13.3468L1.73585 13.3487L1.74098 13.3503C1.7381 13.3494 1.67976 13.3348 1.6103 13.323Z"
class="fill"/>
</svg>
<div>
<p>Slides</p>
<a href="https://viniciuscampitelli.com" target="_blank" rel="noopener">
viniciuscampitelli.com
</a>
</div>
</div>
<div>
<svg role="img" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
class="fill"></path>
</svg>
<div>
<p>GitHub</p>
<a href="https://github.com/vcampitelli" target="_blank" rel="noopener">
vcampitelli
</a>
</div>
</div>
<div>
<svg role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
class="fill"/>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z"
class="fill"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z"
class="fill"/>
</svg>
<div>
<p>Instagram</p>
<a href="https://instagram.com/vcampitelli" target="_blank" rel="noopener">
vcampitelli
</a>
</div>
</div>
<div>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"
class="fill"></path>
</svg>
<div>
<p><span class="strike">X</span> Twitter</p>
<a href="https://twitter.com/vcampitelli" target="_blank" rel="noopener">
vcampitelli
</a>
</div>
</div>
<div>
<svg role="img" viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
class="fill"/>
<path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
class="fill-bg"/>
</g>
</svg>
<div>
<p>LinkedIn</p>
<a href="https://linkedin.com/in/viniciuscampitelli" target="_blank"
rel="noopener">
Vinícius Campitelli
</a>
</div>
</div>
</div>
</div>
</section>
</section> <!-- Sobre mim -->
<section> <!-- Agenda -->
<section data-auto-animate data-auto-animate-restart>
<h1>Agenda</h1>
</section>
<section data-auto-animate>
<h1>Agenda</h1>
<ul>
<li>O que é WebAuthn?</li>
<li class="fragment">Por que usar?</li>
<li class="fragment">O que e quais são os autenticadores?</li>
<li class="fragment">O que são cerimônias?</li>
<li class="fragment">Demo</li>
</ul>
</section>
</section> <!-- Agenda -->
<section> <!-- O que é? -->
<section data-auto-animate data-auto-animate-restart>
<h1>O que é <span>WebAuthn</span>?</h1>
</section>
<section data-auto-animate>
<h1>O que é <span>WebAuthn</span>?</h1>
<blockquote>
This specification defines an API enabling the creation and use of strong, attested, scoped,
public key-based credentials by web applications, for the purpose of strongly authenticating
users
</blockquote>
<a href="https://w3c.github.io/webauthn/" target="_blank" rel="noopener" class="reference">
w3c.github.io/webauthn
</a>
</section>
<section data-auto-animate>
<h1>O que é <span>WebAuthn</span>?</h1>
<ul>
<li>Mais uma forma de <b>autenticação</b></li>
<li class="fragment">Precisa de um <b>autenticador</b></li>
<li class="fragment">Retira a necessidade de <b>senhas</b></li>
<li class="fragment">Baseado em chaves públicas e privadas</li>
<li class="fragment">
Parte do <a href="" target="_blank" rel="noopener">framework FIDO2</a>, que veremos em
breve
</li>
</ul>
</section>
<section data-auto-animate>
<h1>O que é <span>WebAuthn</span>?</h1>
<ul>
<li>
Primeira versão: <a href="https://www.w3.org/TR/2016/WD-webauthn-20160531/"
target="_blank" rel="noopener">31/05/2016</a>
</li>
<li>
Versão estável: <a href="https://www.w3.org/TR/2021/WD-webauthn-3-20210427/"
target="_blank" rel="noopener">27/04/2021</a>
</li>
<li>
Última versão: <a href="https://w3c.github.io/webauthn/"
target="_blank" rel="noopener">16/08/2023</a>
</li>
</ul>
<a href="https://w3c.github.io/webauthn/" target="_blank" rel="noopener" class="reference">
w3c.github.io/webauthn
</a>
</section>
<section>
<h1 class="subtitle">O que é WebAuthn?</h1>
<h2>FIDO</h2>
<blockquote>
The FIDO ("Fast IDentity Online") Alliance is an open industry association launched in
February 2013 whose stated mission is to develop and promote authentication standards that
"help reduce the world’s over-reliance on passwords"
</blockquote>
<a href="https://en.wikipedia.org/wiki/FIDO_Alliance" target="_blank" rel="noopener"
class="reference">
Wikipedia: FIDO Alliance
</a>
</section>
<section>
<h1 class="subtitle">O que é WebAuthn?</h1>
<h2>Framework FIDO2</h2>
<p>
Ação conjunta da <a>FIDO Alliance</a> com a <a>World Wide Web Consortium (W3C)</a> que criou
dois padrões:
</p>
<ul>
<li>Web Authentication: <code>WebAuthn</code></li>
<li>Client-to-Authenticator Protocol: <code>CTAP</code></li>
</ul>
<a href="https://fidoalliance.org/fido2/" target="_blank" rel="noopener" class="reference">
fidoalliance.org/fido2
</a>
</section>
<section>
<h1 class="subtitle">O que é WebAuthn?</h1>
<h2>Fluxo</h2>
<img src="img/standards.svg" alt="Fluxo" class="insert-svg">
</section>
</section> <!-- O que é? -->
<section> <!-- Por que usar? -->
<section data-auto-animate data-auto-animate-restart>
<h1>Senhas são <span>ruins</span></h1>
</section>
<section data-auto-animate>
<h1>Senhas são <span>ruins</span></h1>
<div class="d-flex align-items-center">
<p class="fw-bold font-size-xl">86%</p>
<p>
das brechas em <em>Basic Web Applications Attacks</em> do
<a href="https://www.verizon.com/business/resources/reports/dbir/2023/master-guide/"
target="_blank" rel="noopener">Verizon Data Breach Investigations Report</a>
envolvem o uso de credenciais roubadas
</p>
</div>
</section>
<section>
<h1>Senhas são <span>ruins</span></h1>
<div class="d-flex half-columns">
<div>
<p class="font-size-lg line-height-1 mb-1">
Qual o primeiro registro<br>de <b>senhas digitais</b>?
</p>
<p class="mt-0 mb-4">
<span class="fragment">Em <b>1961</b>, no sistema <a
href="https://en.wikipedia.org/wiki/Compatible_Time-Sharing_System"
target="_blank" rel="noopener">CTSS</a> do MIT</span>
</p>
</div>
<div>
<p class="font-size-lg fragment line-height-1 mb-1">
E o primeiro<br><b>vazamento de senhas</b>?
</p>
<p class="mt-0">
<span class="fragment">Em <b>1966</b>, no mesmo sistema</span>
</p>
</div>
</div>
<a href="https://www.wired.com/2012/01/computer-password/" target="_blank" rel="noopener"
class="reference fragment">
The World's First Computer Password? It Was Useless Too | WIRED
</a>
</section>
<section>
<h1>Senhas são <span>ruins</span></h1>
<ul class="margin">
<li>
Difícil equilíbrio
<ul>
<li>Complexas o bastante para não serem quebradas</li>
<li>Simples o bastante para serem lembradas</li>
</ul>
</li>
<li class="fragment" data-fragment-index="0">São normalmente reutilizadas pelos usuários</li>
<li class="fragment" data-fragment-index="1">
<span class="fragment grow" data-fragment-index="2">Muitos</span> vazamentos
<ul>
<li>
<span class="fragment grow" data-fragment-index="2">12.6 bilhões</span> de
contas em <a href="https://haveibeenpwned.com" target="_blank" rel="noopener">
haveibeenpwned.com
</a>
</li>
</ul>
</li>
</ul>
</section>
<section data-auto-animate>
<h1>Alternativas são <span>ruins</span></h1>
<ul class="margin">
<li>
Gerenciador de senhas
<ul>
<li>Necessita de um servidor central para se tornar portável</li>
<li>
Alvo muito mais visado para atacantes
<ul>
<li>
<a href="https://password-managers.bestreviews.net/faq/which-password-managers-have-been-hacked/"
target="_blank" rel="noopener">Which Password Managers Have Been
Hacked?</a>
</li>
</ul>
</li>
<li>A experiência pode não ser muito boa em alguns formulários</li>
</ul>
</li>
</ul>
</section>
<section data-auto-animate>
<h1>Alternativas são <span>ruins</span></h1>
<ul>
<li>
Duplo-fator de autenticação (2FA)
<ul>
<li>Difícil de acertar na UX</li>
<li>Pode não ser tão seguro (por exemplo, SMS)</li>
<li>Usuários podem sofrer <em>phishing</em></li>
<li>Os desenvolvedores devem saber quando requisitar</li>
</ul>
</li>
</ul>
</section>
<section data-auto-animate>
<h1>Alternativas são <span>ruins</span></h1>
<ul>
<li>
Single Sign-On (SSO)
<ul>
<li>Dependente do serviço de terceiros</li>
<li>Pode ser alterado por questões financeiras</li>
</ul>
</li>
</ul>
</section>
</section> <!-- Por que usar? -->
<section> <!-- WebAuthn oferece equilíbrio -->
<section data-auto-animate data-auto-animate-restart>
<h1>WebAuthn oferece <span>equilíbrio</span></h1>
</section>
<section data-auto-animate>
<h1>WebAuthn oferece <span>equilíbrio</span></h1>
<p>Em questões de <b>segurança</b>:</p>
<ul>
<li>Mesma tecnologia usada em SSH e TLS</li>
<li>Disponível somente em HTTPS</li>
<li>Dependente do nome do domínio <em>(mitigando phishing)</em></li>
<li>Envolve muitos pesquisadores e instituições confiáveis</li>
<li>O banco de dados do servidor não possui informações sigilosas</li>
</ul>
</section>
<section data-auto-animate>
<h1>WebAuthn oferece <span>equilíbrio</span></h1>
<p>Em questões de <b>experiência do usuário</b>:</p>
<ul>
<li>Embutido nos navegadores</li>
<li>Sem possibilidade de perder senhas</li>
<li>Resistente a ataques de <em>phishing</em></li>
<li>
Pode funcionar como 1º ou 2º fator - ou como dois fatores ao mesmo tempo
através da <b>verificação de usuários</b>
</li>
</ul>
</section>
</section> <!-- WebAuthn oferece equilíbrio -->
<section> <!-- Suporte -->
<section data-auto-animate data-auto-animate-restart>
<h1>Suporte</h1>
</section>
<section data-auto-animate>
<h1>Suporte</h1>
<img src="img/caniuse.png" alt="Can I Use? WebAuthn" class="r-stretch" style="margin: -20px">
<a href="https://caniuse.com/webauthn" target="_blank" rel="noopener" class="reference mt-0">
caniuse.com/webauthn
</a>
</section>
</section> <!-- Suporte -->
<section> <!-- Autenticadores -->
<section data-auto-animate data-auto-animate-restart>
<h1>Autenticadores</h1>
</section>
<section data-auto-animate>
<h1>Autenticadores</h1>
<p class="fw-bold">Via <span class="color-accent">Hardware Externo</span>:</p>
<div class="authenticator">
<ul>
<li>São <em>cross-platform</em></li>
<li>
Relativamente caros: a Yubikey sai por US$50 no site oficial ou entre R$300-400 no Brasil
</li>
<li>
Exemplos:
<ul>
<li><a href="https://www.yubico.com/" target="_blank" rel="noopener">Yubikey</a></li>
<li><a href="https://solokeys.com/" target="_blank" rel="noopener">Solokey</a></li>
<li><a href="https://trezor.io" target="_blank" rel="noopener">Trezor</a></li>
<li><a href="https://cloud.google.com/titan-security-key/" target="_blank" rel="noopener">Google Titan</a></li>
</ul>
</li>
</ul>
<figure>
<img src="img/yubikey.png" alt="Yubikey">
<figcaption>
<a href="https://www.yubico.com/br/product/yubikey-5-series/yubikey-5-nfc/"
target="_blank" rel="noopener" class="reference">Yubikey</a>
</figcaption>
</figure>
</div>
</section>
<section data-auto-animate>
<h1>Autenticadores</h1>
<p class="fw-bold">Via <span class="color-accent">Plataforma</span>:</p>
<div class="authenticator">
<ul>
<li>Embutidos no próprio sistema operacional</li>
<li>
Geralmente acompanham <em>hardware</em>, como o
<a href="https://support.apple.com/guide/security/secure-enclave-sec59b0b31ff/web"
target="_blank" rel="noopener">Secure Enclave</a> da Apple ou o
<a href="https://support.microsoft.com/en-us/topic/what-is-tpm-705f241d-025d-4470-80c5-4feeb24fa1ee"
target="_blank" rel="noopener">TPM</a> em Windows
</li>
<li>
Exemplos:
<ul>
<li>Windows Hello</li>
<li>Apple Touch ID</li>
<li>Android Fingerprint</li>
</ul>
</li>
</ul>
<div>
<img src="img/android.png" alt="Android" class="rounded">
</div>
</div>
</section>
<section data-auto-animate>
<h1>Autenticadores</h1>
<p class="fw-bold">Via <span class="color-accent">Software</span>:</p>
<div class="authenticator">
<ul>
<li>
Para desenvolvimento, é possível utilizar emuladores, como o
<a href="https://developer.chrome.com/docs/devtools/webauthn/" target="_blank"
rel="noopener">Google Chrome</a> ou <a href="https://github.com/GramThanos/WebDevAuthn"
target="_blank" rel="noopener">essa extensão</a>
</li>
</ul>
<div>
<img src="img/chrome-virtual.png" alt="Chrome DevTools" class="rounded">
</div>
</div>
</section>
</section> <!-- Autenticadores -->
<section> <!-- Cerimônias -->
<section data-auto-animate data-auto-animate-restart>
<h1>Cerimônias</h1>
</section>
<section data-auto-animate>
<h1>Cerimônias</h1>
<blockquote cite="https://w3c.github.io/webauthn/#ceremony">
The concept of a ceremony is an extension of the concept of a network protocol, with human
nodes alongside computer nodes and with communication links that include user interface(s),
human-to-human communication, and transfers of physical objects that carry data. What is
out-of-band to a protocol is in-band to a ceremony.
</blockquote>
<p>— The WebAuthn specification</p>
<a href="https://w3c.github.io/webauthn/#ceremony" target="_blank" rel="noopener"
class="reference">
WebAuthn | Glossário: Cerimônia
</a>
</section>
<section data-auto-animate>
<h1>Cerimônias</h1>
<div class="d-flex half-columns">
<div class="fragment">
<p class="fw-bold mb-1">Registro</p>
<p class="mt-0">
Envolve o processo de <b>Atestação</b>, em que o Servidor pode verificar a
autenticidade do Autenticador e verificar suas funcionalidades
</p>
</div>
<div class="fragment">
<p class="fw-bold mb-1">Autenticação</p>
<p class="mt-0">
Onde ocorre a <b>Asserção</b>, em que o Servidor envia um valor aleatório para o
Cliente, que retorna uma assinatura criada pelo Autenticador
<p>
</div>
</div>
</section>
<section>
<h1 class="subtitle">Cerimônias » Registro</h1>
<h2>Atestação</h2>
<p>
Quando o autenticador registra um novo par de chaves para um serviço, ele assina a
chave pública com seu <em>certificado de atestação</em>, que é embutido durante a
fabricação, sendo específico para aquele modelo de dispositivos
</p>
<p class="fragment">
Através do <a href="https://www.w3.org/TR/webauthn/#sctn-defined-attestation-formats"
target="_blank" rel="noopener">Attestation Statement Format</a>, é possível
saber mais informações sobre o tipo do dispositivo que emitiu o par de chaves
</p>
<p class="fragment">
Por questões de privacidade, só é recomendado utilizar em situações muito específicas, como
por exemplo aplicações governamentais ou de bancos
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API/Attestation_and_Assertion"
target="_blank" rel="noopener" class="reference">Attestation and Assertion | MDN</a>
</section>
<section>
<h1 class="subtitle">Cerimônias » Registro</h1>
<h2>Atestação</h2>
<p>
Para confirmar que o autenticador é legítimo, há um repositório central com os metadados dos
dispositivos reconhecidos em <a href="https://fidoalliance.org/metadata/" target="_blank"
rel="noopener">fidoalliance.org/metadata</a>
</p>
<pre><code class="json font-size-sm" data-trim>
{
"aaguid": "08987058-cadc-4b81-b6e1-30de50dcbe96",
"metadataStatement": {
"legalHeader": "Submission of this statement and retrieval and use of this statement indicates acceptance of the appropriate agreement located at https://fidoalliance.org/metadata/metadata-legal-terms/.",
"aaguid": "08987058-cadc-4b81-b6e1-30de50dcbe96",
"description": "Windows Hello Hardware Authenticator",
"authenticatorVersion": 1,
"protocolFamily": "fido2",
"schema": 3,
"upv": [{ "major": 1, "minor": 0 }],
"authenticationAlgorithms": [ "rsassa_pkcsv15_sha256_raw" ],
"publicKeyAlgAndEncodings": [ "cose" ],
"attestationTypes": [ "attca" ],
"userVerificationDetails": [
[{ "userVerificationMethod": "eyeprint_internal" }],
[{ "userVerificationMethod": "passcode_internal" }],
[{ "userVerificationMethod": "fingerprint_internal" }],
[{ "userVerificationMethod": "faceprint_internal" }]
],
"keyProtection": [ "hardware" ],
"isKeyRestricted": false,
"matcherProtection": [ "software" ],
"attachmentHint": [ "internal" ],
"tcDisplay": [],
"attestationRootCertificates": [
"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"
],
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACkUlEQVR42uyai3GDMAyGQyegGzACnaCMkBHoBhkhnSAj0A2SDaAT0E6QbEA3cOXW6XEpBtnImMv9utOllxjF/qKHLTdRSm0gdnkAAgACIAACIAACIAACIAgAARAAARAAARAAARBEAFCSJINKkpLuSTtSZbQz76W25zhKkpFWPbtaz6Q75vPuoluuPmqxlZK2yi76s9RznjlpN2K7CrFWaUAHNS0HT0Atw3YpDSjxbdoPuaziG3uk579cvIdeWsbQD7L7NAYoWpKmLy8chueO5reB7KKKrQnQJdDYn9AJZHc5QBT7enINY2hjxrqItsvJWSdxFxKuYlOlWJmE6zPPcsJuN7WFiF7me5DOAws4OyZyG6TOsr/KQziDaJm/mcy2V1V0+T0JeXxqqlrWC9mGGy3O6wwFaI0SdR+EMg9AEAACIAByqViZb+/prgFdN6qb306j3lTWs0BJ76Qjw0ktO+3ad60PQhMrfM9YwqK7lUPe4j+/OR40cDaqJeJ+xo80JsWih1WTBAcb8ysKrb+TfowQKy3v55wbBkk49FJbQusqr4snadL9hEtXC3nO1G1HG6UfxIj5oDnJlHPOVVAerWGmvYQxwc70hiTh7Bidy3/3ZFE6isxf8epNhUCl4n5ftYqWKzMP3IIquaFnquXO0sZ1yn/RWq69SuK6GdPXORfSz4HPnk1bNXO0+UZze5HqKIodNYwnHVVcOUivNcStxj4CGFYhWAWgXgmuF4JzdMhn6wDUm1DpmFyVY7IvQqeTRdod2v2F8lNn/gcpW+rUsOi9mAmFwlSo3Pw9JQ3p+8bhgnAMkPM613BxOBQqc2FEB4SmPQSAAAiAAAiAAAiAAAiAIAAEQAAEQAAEQPco3wIMADOXgFhOTghuAAAAAElFTkSuQmCC",
"authenticatorGetInfo": {
"versions": [ "FIDO_2_0" ],
"aaguid": "08987058cadc4b81b6e130de50dcbe96",
"options": {
"plat": true,
"rk": true,
"up": true
},
"maxCredentialCountInList": 100,
"maxCredentialIdLength": 32,
"transports": [ "internal" ],
"algorithms": [{ "type": "public-key", "alg": -257 }],
"minPINLength": 4,
"firmwareVersion": 19042
}
},
"statusReports": [
{
"status": "FIDO_CERTIFIED_L1",
"effectiveDate": "2020-08-05",
"certificationDescriptor": "Windows Hello Hardware Authenticator",
"certificateNumber": "FIDO20020190418002",
"certificationPolicyVersion": "1.3.6",
"certificationRequirementsVersion": "1.1.0"
},
{
"status": "FIDO_CERTIFIED",
"effectiveDate": "2020-08-05"
}
],
"timeOfLastStatusChange": "2020-08-05"
}
</code></pre>
</section>
<section>
<h1 class="subtitle">Cerimônias</h1>
<h2>Registro</h2>
<img src="img/register-flow.svg" alt="Registro com WebAuthn" class="insert-svg">
</section>
<section>
<h1 class="subtitle">Cerimônias</h1>
<h2>Autenticação</h2>
<img src="img/login-flow.svg" alt="Login com WebAuthn" class="insert-svg">
</section>
</section> <!-- Cerimônias -->
<section> <!-- Presença vs Verificação do Usuário -->
<section data-auto-animate data-auto-animate-restart>
<h1>Presença vs Verificação</h1>
</section>
<section data-auto-animate>
<h1>Presença vs Verificação</h1>
<div class="d-flex half-columns">
<div>
<p class="fw-bold mb-1"><span class="color-accent">Presença</span> do Usuário</p>
<ul>
<li>Usuário deve possuir acesso ao autenticador</li>
<li>Sempre obrigatório</li>
</ul>
</div>
<div>
<p class="fw-bold mb-1"><span class="color-accent">Verificação</span> do Usuário</p>
<ul>
<li>
Usuário providencia algo a mais ao autenticador, como um <b>pin</b> ou
<b>biometria</b>
</li>
</ul>
</div>
</div>
</section>
<section data-auto-animate>
<h1>Presença vs Verificação</h1>
<ul>
<li>
O servidor deve especificar se deseja <b>Verificação</b>
<ul>
<li>
Pode ser <code>preferred</code>, <code>required</code> ou
<code>discouraged</code>
</li>
<li>Apenas suportado em alguns autenticadores</li>
</ul>
</li>
<li>
Dica:
<ul>
<li>Para autenticação, exija a <b>Verificação</b></li>
<li>Como 2º fator, é aceitável usar <b>Presença</b></li>
</ul>
</li>
</ul>
</section>
</section> <!-- Presença vs Verificação do Usuário -->
<section> <!-- Código -->
<section data-auto-animate data-auto-animate-restart>
<h1>Código</h1>
</section>
<section data-auto-animate>
<h1>Código</h1>
<p>Criando uma credencial no navegador:</p>
<pre><code class="js" data-trim data-line-numbers="|3|4-7|8-12|13|14-16|18">
const credential = await navigator.credentials.create({
publicKey: {
challenge: base64url.toBuffer(challengeEnviadoPeloServidor),
rp: {
name: "Vinícius Campitelli",
id: "viniciuscampitelli.com",
},
user: {
id: base64url.toBuffer(user.id),
name: user.name,
displayName: user.displayName,
},
pubKeyCredParams: [{alg: -7, type: "public-key"}], // -7 => ES256
authenticatorSelection: {
authenticatorAttachment: "cross-platform", // ou "platform"
},
timeout: 60000,
attestation: "direct"
}
});
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/credentials" target="_blank"
rel="noopener" class="reference">
Navigator: credentials property | MDN
</a>
</section>
<section data-auto-animate>
<h1>Código</h1>
<p>Criando uma credencial no navegador:</p>
<pre><code class="js" data-trim data-line-numbers>
// console.log(credential);
PublicKeyCredential {
id: "PLdxbMe6vLX3SEDDLQysLV6StR9zLWRss3VH4u6TT192p-snes-IbSajJD_V5G8mZJWLIPxJAlGvwuM",
rawId: ArrayBuffer(59),
response: AuthenticatorAttestationResponse {
clientDataJSON: {
type: "webauthn.create",
challenge: "...", // confira com o challenge anterior
origin: "https://viniciuscampitelli.com"
},
attestationObject: {
authData: {
attestedCredentialData: {
credentialId: …,
credentialPublicKey: …
}
},
fmt: "fido-u2f",
attStmt: {
sig: Uint8Array(70),
x5c: Array(1),
},
},
},
type: "public-key"
}
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential" target="_blank"
rel="noopener" class="reference">
PublicKeyCredential | MDN
</a>
</section>
<section data-auto-animate>
<h1>Código</h1>
<p>
Agora, você deve enviar os dados gerados em <code>credential</code> para o servidor, que
deve realizar as validações necessárias para iniciar sua sessão
</p>
<a href="https://w3c.github.io/webauthn/#sctn-registering-a-new-credential" target="_blank"
rel="noopener" class="reference">
Registering a New Credential | W3C
</a>
</section>
<section>
<pre><code class="js" data-trim data-line-numbers>
const publicKeyCredentialRequestOptions = {
challenge: Uint8Array.from(
randomStringFromServer, c => c.charCodeAt(0)),
allowCredentials: [{
id: Uint8Array.from(
credentialId, c => c.charCodeAt(0)),
type: 'public-key',
transports: ['usb', 'ble', 'nfc'],
}],
timeout: 60000,
}
const assertion = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions
});
</code></pre>
</section>
</section> <!-- Código -->
<section> <!-- Demo -->
<section data-auto-animate data-auto-animate-restart>
<h1>Demo</h1>
</section>
<section data-auto-animate>
<h1>Demo</h1>
<p>
Acesse <a href="https://webauthn.viniciuscampitelli.com" target="_blank" rel="noopener">
webauthn.viniciuscampitelli.com
</a> ou escaneie o QR Code abaixo:
</p>
<img src="img/qrcode-webauthn.png" alt="webauthn.viniciuscampitelli.com" class="r-stretch">
</section>
<section data-auto-animate>
<h1>Demo</h1>
<p>Se quiser executar localmente:</p>
<ul>
<li>Clone este repositório e entre na pasta <code>demo</code></li>
<li>Inicialize os <em>containers</em></li>
<li>
Acesse a aplicação em <a href="https://localhost:5173" target="_blank"
rel="noopener">localhost:5173</a>
</li>
</ul>
<pre><code class="shell" data-trim>
$ git clone --recursive git@github.com:vcampitelli/slides-webauthn.git
$ cd demo
$ docker compose up -d
</code></pre>
</section>
</section> <!-- Demo -->
<section> <!-- Referências -->
<section data-auto-animate data-auto-animate-restart>
<h1>Referências</h1>
</section>
<section data-auto-animate>
<h1>Referências</h1>
<ul>
<li>
<a href="https://github.com/herrjemand/awesome-webauthn" target="_blank"
rel="noopener">herrjemand/awesome-webauthn</a>
</li>
<li>
<a href="https://webauthn.io" target="_blank" rel="noopener">webauthn.io</a>
</li>
<li>
<a href="https://webauthn.wtf" target="_blank" rel="noopener">webauthn.wtf</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API"
target="_blank" rel="noopener">Web Authentication API | MDN</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/WebAuthn" target="_blank" rel="noopener">
Wikipedia: WebAuthn</a>
</li>
</ul>
</section>
</section> <!-- Referências -->
<section>
<h2>Treinamentos in company</h2>
<div class="d-flex half-columns">
<div style="line-height: 1.5">
Gostou? Então conheça meus treinamentos corporativos e sob demanda sobre Desenvolvimento,
Segurança da Informação, DevOps, Arquitetura de Sistemas e diversos outros assuntos em
<a href="https://bit.ly/vcampitelli" target="_blank" rel="noopener" class="fw-bold">
viniciuscampitelli.com
</a>
</div>
<div>
<a href="https://bit.ly/vcampitelli" target="_blank" rel="noopener" style="display: block">
<img src="img/qrcode-workshops.png" alt="Workshops" style="height: 300px" class="my-0">
</a>
</div>
</div>
</section>
<section> <!-- Obrigado -->
<h2 class="text-center">Obrigado!</h2>
<div class="about-me-links">
<div>
<svg role="img" width="64px" height="64px" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
class="fill"></path>
</svg>
<div>
<p>Slides & GitHub</p>
<a href="https://github.com/vcampitelli" target="_blank" rel="noopener">
vcampitelli
</a>
</div>
</div>
<div>
<svg role="img" width="64px" height="64px" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"
class="fill"></path>
</svg>
<div>
<p>Twitter</p>
<a href="https://twitter.com/vcampitelli" target="_blank" rel="noopener">
vcampitelli
</a>
</div>
</div>
<div>
<svg role="img" height="64" viewBox="0 0 74 74" width="64"
xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
class="fill"/>
<path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
class="fill-bg"/>
</g>
</svg>
<div>
<p>LinkedIn</p>
<a href="https://linkedin.com/in/viniciuscampitelli" target="_blank" rel="noopener">
Vinícius Campitelli
</a>
</div>
</div>
</div>
</section> <!-- Obrigado -->
<footer>@vcampitelli</footer>
</div>
</div>
<script src="reveal.js/dist/reveal.js"></script>
<script src="reveal.js/plugin/notes/notes.js"></script>
<script src="reveal.js/plugin/highlight/highlight.js"></script>
<script>
document.querySelectorAll('img.insert-svg').forEach(($img) => {
fetch($img.src).then(response => {
if (!response.ok) {
return;
}
response.text().then(contents => {
const $wrapper = document.createElement('div');
$wrapper.classList.add('svg-wrapper');
$wrapper.innerHTML = contents.replace('<?xml version="1.0" encoding="UTF-8"?>', '');
$img.parentNode.replaceChild($wrapper, $img);
});
});
});
Reveal.initialize({
hash: true,
mouseWheel: false,
overview: false,
history: true,
plugins: [RevealHighlight, RevealNotes],
slideNumber: 'c/t',
});
Reveal.configure({
keyboard: {
38: 'prev',
40: 'next'
}
});
</script>
</body>
</html>