Rework site to show the two-factor usage method

[smholloway]

This pull request changes the columns from

Site | Docs | SMS | Google Auth | Authy | VeriSign VIP | Custom

to

Site | Docs | SMS | Phone Call | Email | Hardware Token | Software Implementation

See PR #320 and PR #208 for more context about these changes.

I updated every .yaml file; anywhere there was a Yes for authy or goog or verisign there should now simply be software: Yes. For custom entries I added the appropriate hardware or software entry. I visited every doc link and tried to capture the data, but I welcome the community to fix anything I missed. I also removed stray white space and capitalized Yes and No where appropriate.

I think it turned out well.

---

Now that I've done all this work, I have a new idea that might be cleaner:

Site | Docs | Implementation

We then place the appropriate icons for each of the five categories. Perhaps

SMS: mobile icon
Phone Call: phone icon
Email: mail icon
Hardware Token: lock icon
Software Implementation: shield icon

Here's what that might look like:

See PR #334 for the code.

[jdavis]

Cool. I really like the first one because it still provides a tonnn of information yet it is easy to read. The problem with the icons is that it doesn't give a good way to compare like the first one does.

[jdavis]

Also, I don't know if this is overkill, but what if there was a way to see which hardware and which software solutions are offered either through a hover over or similar feature?

[mxxcon]

@jdavis But is "comparing" a relevant problem that we are solving here? Do people come to the site to compare implementations of different sites or do they come to find out if a service they use has 2FA? Do you have any user feedback or insight on that?

[smholloway]

If we want to show the solutions offered, I think the custom column was a good guide. After integrating PR #208 we could show the provider icon and link to the provider url. The code might look something like this:

{% for item in website.software %}
  {% if item.url %}
    <a href="{{ item.url }}">
      <img src="/img/providers/{{ item.name }}.png" class="icon" alt="{{ item.name }}">
    </a>
  {% else %}
    <i class="lock small icon"></i>
  {% endif %}
{% endfor %}

My concern with the first design is that it could foster competition. When looking at the list, I have to wonder if the best site is the one with the most checkmarks. If other people think that way, then the site could incentivize companies to check every box, and, while it might be cool to have more sites offering 2fa via SMS, email, voice calls, hardware tokens, and custom software, I'm not sure the point of the site is to encourage companies to support more modes of 2fa.

Actually, I think that logic would apply to any design that could show multiple icons per row. The only way to avoid the feature-list-checkmark mania is to simply say, "Yes, this site supports 2fa" or "Tell them to support 2fa". Is that better? Is the additional information useful? I'd have to see how people are actually using the site to know if I think this is worthwhile. My hunch is that people will scan the list and find a site they use, then click into the docs to figure out how to set 2fa up on that site.

Edit: @mxxcon said it more succinctly and more quickly :)

[jdavis]

I understand all the concern and know we'll settle on something that works really well.

First, before I respond.. @mxxcon, when you say compare, are you saying comparing different software solutions (like Google Auth and Authy)? Or comparing two sites (say Namecheap and Network Solutions)?

[mxxcon]

@jdavis comparing two sites..isn't that what you meant?

@smholloway Well, I guess that's why the line is green once any of those are supported. I don't think this site is important enough (yet?) for some service to change its strategy to make sure they check off all boxes. :)
I imagine each site will decide on its own which 2FA are relevant and feasible to them.

Having said that, personally I'm not too found of the icons you used. They are a bit too obtuse/obscure. I guess @jdavis encourages the use of fontawesome, but if the font does not have descriptive enough imagery, I hope it's not an absolute roadblock to use a standalone file. I imagine we can find some acceptable free icon library to use.

[jdavis]

@mxxcon Yeah, I was referring to sites. I just wanted to make sure that we understood each other correctly.

So regarding your question, it's hard for me to speak for other people, but the reason I created this site is because I wanted a place where I could go to see who had 2FA and then compare alternatives when making a decision. Like my blog says, I was transferring domains and wanted a registrar that had 2FA.

I'm moving across the country in a few months and am going to use the list to decide which financial institution to use and it all depends on what kind of 2FA and service they provide.

For example, I'd take SMS/TOTP 2FA over hardware or email any day. And the checkmark/X design really makes it easy to see that. The icon layout (the 2nd that @smholloway showed) isn't as easy.

Regarding @smholloway point about fostering competition, I don't necessarily agree. I don't think (and hope for that matter) that a site will be daft enough to think that.

If the consumer thinks that more checks is better, then that is a valid concern. Maybe we could get rid of the Red/Green combo all together and just do the --- like we do in custom and make it white.

What do you guys think of that?

[mxxcon]

I do like red/green combo. That makes bad sites stand out and gives a warning to the visitor...Public shaming. :)

[smholloway]

@jdavis Thanks for sharing your use case. For banks and domain registrars, it definitely makes sense. I'm not sure I'd switch from LoL to WoW just because of 2fa, but I would like to see 2fa everywhere and this site is a step in that direction (BTW, thanks!). At worst, a lagging company can see that their competitors have already added 2fa, thus motivating them to follow suit.

@mxxcon I'd argue that "bad sites" in this case are the ones with no 2fa in place. That being said, I like the red/green combo too.

Rather than speculate, I tried a few things out. Here are a few thousand words:

Red and green

White Exes

White dashes

Any of those strike your fancy? I'm currently drawn to the first with wholly red or wholly green rows and checkmarks where appropriate.

[mxxcon]

I like 1st and last. What about full green rows, but just empty boxes?

[jdavis]

Yup, I really like the first one as well. It is easier on the eyes without the white/red breaking things up and it gets across the point about it not being bad if a method of 2FA isn't supported.

[smholloway]

@mxxcon Here's green rows with empty boxes:

And here's one with checkboxes:

Better or worse?

[jdavis]

You'd make a great optometrist, @smholloway ;)

Also, I reallly really really like the last one with blank checkboxes. It is what I should have done in the first place, really.

[smholloway]

Cool. I committed the changed to make entire rows either red or green and to represent capabilities with checkboxes. I also made the Docs icon large so it would match the size of the neighbor columns. Here's a sample:

[jdavis]

Yeah, I think that looks awesome.

[jamcat22]

I agree. We should definitely change it so that the methods are sms, phone call, email, software implementation, and hardware token because most people are confused with the Authy vs. Google Authenticatior because anything that works with Google works with Authy, but not all things that work with Authy work with Google. (Also you would then have to get into Duo.)

I could help convert everything.
^EDIT: I guess this pull request already has that. (Impressive)

[smholloway]

@jdavis Awesome! Anything else you'd like to see in this PR? I think this would play nicely with PR #208.

[jdavis]

If we all think that the last image that you posted is what looks/functions the best, I think we'd be ready to merge this into the final release candidate for the new version.

I still would like to address the international issues from #241 and possibly the feature I've been working on when gathering/visualizing tweets before we "release" it.

[jamcat22]

@smholloway You did a great job at changing all of that! I found a couple of mistakes though.

E*Trade - has software (Verisign VIP)
Fastmail - has SMS (maybe - the docs made it questionable) and hardware (Yubikey)
Dreamhost - has hardware (Yubikey)
Blockchain - has hardware (Yubikey)
BIPS - has software (Google Auth/Authy/Duo/every other app that allows Google Auth)

Let me know if I made any mistakes in my thinking.

[smholloway]

Thanks, @jamcat22! I've updated those sites.

[jdavis]

@smholloway Should I create a new rc branch for merging your changes into?

[jamcat22]

Could we do anything to add a column for paid only providers? #354

[smholloway]

@jdavis I'm ready for the rc branch if you are 😄 Let's

[jdavis]

Woo, cool.

I just created a branch called dev that we can use to do the merging and various checking to make sure all the data is up to date, then we can just merge it into master.

[jdavis]

Also, I have two large homework things coming up this week and are due Friday and Saturday. So I'm going to be a bit strapped for time.

I added you as a Collaborator, @smholloway. Feel free to merge these into the dev branch and push them. Then myself and the others can take a look.

[gitcnd]

One big problem with this approach: Stifling progress: Most 2FA tech is TOTP, invented around 1984 - but there are new and far more secure offerings in today's marketplace, including things that block phishing and malware (TOTP was designed only to block offline keylogger password theft) and other things that make stuff easy for users (eg: PUSH or other automation helpers).

The problem - is that someone is going to decide what should, or should not, be in the table - and the 2FA industry is very wealthy, so I'm pretty sure there's going to be vendors out there blocking their competitors who have better products from adding this into the table...

[gitcnd]

Also - I think "software" should be re-named to "mobile app" - since there's desktop 2FA plugin software out there which is a totally different thing, but everyone knows what "mobile app" means.

[mxxcon]

wow @gitcnd what kind of tinfoil hat are you wearing? :/
The primary reason why there will be column names change is specifically to make it vendor agnostic! Right now there is a preference given to Google Authenticator, Authy and VeriSign VIP. All other solutions are relegated to "Other" category.
Soon we will have just broad categories and you will get more specific details once you go to each service's/site's relevant page.

There is nothing on this page "stifling progress". Nothing here prevents you from making your own 2nd factor authentication solution and convincing sites/services to implement yours.
This site just lists which sites/services support 2FA, regardless of what it is.

This git repo is public, therefore every single commit, merge and pull request are public. So if you claim that some "very wealthy" vendor will be blocking competitors, you can easily see and prove it from repo's history.
Software is generic enough to also include "desktop software". I'm not saying I'm aware of every single desktop solution, but the ones I'm aware of are just reimplementation of "mobile app" as you put it. They are not popular enough to justify a separate column.
Again, you have to click on the relevant site's docs link anyway to enable 2FA on your account, so you will see details of the specific implementation regardless.

[smholloway]

@gitcnd I had similar concerns about impartiality; my solution is PR #208 and PR #333. With a page dedicated to providers, people can quickly get a glimpse of the 2fa landscape--without that information cluttering the main site (the main site simply shows whether 2fa is available on various sites). As @mxxcon said, the site is open source so every PR is public: anyone can freely add sites.

[jdavis]

Nice comments, @smholloway and @mxxcon. ❤️

[jdavis]

Hmm, I'm merging everything now. Would Verisign VIP go under hardware + software? It looks like they have tokens and mobile versions: https://idprotect.verisign.com/mainmenu.v

[smholloway]

Yep. Old school RSA fobs were only hardware, then a number of people came up with "soft tokens" (software). Now, I think most third party 2fa providers have some kind of hardware token option in addition to software. I read the docs and tried to check hardware, software or both.

[jdavis]

Okay, I think I finished the merge. If a few people could take a look, that'd be awesome. @RichJeanes @mxxcon

[jdavis]

@mwww you should take a look as well

[jdavis]

I'd like to make the merge tonight if a few more people look at it =]

cc: @RichJeanes @mxxcon @mwww

[jdavis]

Btw, the branch dev is where it all lives: https://github.com/jdavis/twofactorauth/tree/dev

[konklone]

I'm clearly arriving quite late! But FWIW, I think the empty checkboxes do create an expectation that "they should be checked", even if the background is green. I also think it makes the table look more visually busy and cluttered, since you've already got borders around each table cell. So I suggest removing the background checkbox. That's all!

[jdavis]

Awesome. Thanks for the feedback, @konklone.

[mxxcon]

@jdavis I'd like to help but I don't exactly understand what do you want us to look at?

[jdavis]

If there are any issues or if I missed anything =]

[mxxcon]

@jdavis Is there a need for an explicit tfa: No|Yes field?
If there are no relevant fields present, then assume No.
If any field is present, assume Yes.
I looked through a bunch of files, and to me they look correct, but I'm still not quiet sure what to look for..

[RichJeanes]

The html looks fine to me, but cleaning up the yaml files and I just found Network Solutions (Domains) says tfa:no and verisign:yes with no doc link. Anyone know the right answer? A quick search of their support site doesn't show anything.

[RichJeanes]

I'll open up a new issue for Network Solutions instead of zombie-ing this thread.

[jdavis]

@RichJeanes Cool, good idea.

[smholloway]

Fantastic work, @jdavis. The site looks great!

[jdavis]

It was all you, @smholloway. Haha.

[computmaxer]

I'm just catching up on this stuff. Looks great guys!