Making the Web work for users
Sign-in and Web Payments
@cwilso
Chris Wilson
The web is better than ever
The web is about reducing friction
…and building relationships
how many of you work on sites with user logins?
Passwords.
Use short & simple passwords.
Typical users...
Use short & simple passwords.
Typical users...
Use short & simple passwords.
Reuse passwords across sites.
Typical users...
Use short & simple passwords.
Reuse passwords across sites.
Do not enable 2nd factor auth.
Typical users...
Identity should be a first class citizen of the web platform
Federated login should be supported by automated login.
Help password managers do their jobs
9B forms and passwords filled per month
(just in Chrome)
Top 3 issues...
making life hard for password managers
Markup and annotations
Use <form> tags to group belongs together.
Do not use empty or duplicate name and id attributes.
Provide autocomplete annotations
<input
name="..."
type="text|password"
autocomplete="username|current-password|new-password">�
Unnoticed form submissions
Use
old-school form HTTP posts or
XHRs/fetch() followed by form removal and history.pushState()
to help detect form submission.
We ♥ HTTPS�Use it everywhere
<form action=”https://example.com/signin”>� ...�</form>
http://example.com
goo.gl/6e0mKk
We ♥ HTTPS�Use it everywhere
goo.gl/6e0mKk
<form action=”https://example.com/signin”>� ...�</form>
http://example.com
<iframe src=”https://example.com/signin”>� ...�</iframe>
http://example.com
45% success rate for a well-designed phishing page!
http://services.google.com/fh/files/blogs/google_hijacking_study_2014.pdf
Or you can do half screen if you have text
A user who doesn’t know their password is hard to phish.
The Credential Management API
By showing account chooser dialog, users can sign in just by selecting an account to sign-in with.
One tap sign-in
Provides seamless login account selection experience between id/password and federated logins.
Remembers federated login
Helps websites with short session duration and also cross device access.
Enables auto sign-in
41%� higher sign-in rate
85% fewer sign-in failures
11% better conversion rate
Getting a credential
navigator.credentials.get({� password: true,� federated: {� providers: ['https://accounts.google.com']� }���}).then(credential => {� ...�});
No credentials: Returns `undefined`
1 credential: Returns a credential immediately
2+ credentials: Shows account chooser dialog
Getting a credential
navigator.credentials.get({� password: true,� federated: {� providers: ['https://accounts.google.com']� },� unmediated: true,��}).then(credential => {� ...�});
No credentials: Returns `undefined`
1 credential: Returns a credential immediately
2+ credentials: Shows account chooser dialog
Getting a credential
navigator.credentials.get({� password: true,� federated: {� providers: ['https://accounts.google.com']� },� unmediated: true,� mediation: 'silent'�}).then(credential => {� ...�});
No credentials: Returns `undefined`
1 credential: Returns a credential immediately
2+ credentials: Shows account chooser dialog
New! Starting in Chrome 60
Turning off auto sign-in
// Turn off auto sign-in.�navigator.credentials.requireUserMediation();
Enforces to show account chooser dialog
� return fetch('/signin', {� method: 'POST',� credentials: credential� }).then(response => {� // handle auth response� });����
� return fetch('/signin', {� method: 'POST',� credentials: credential� }).then(response => {� // handle auth response� });�� let password = credential.password;� // Use your easiest way to authenticate�
New! Starting in Chrome 60
if (credential.password === undefined) {� return fetch('/signin', {� method: 'POST',� credentials: credential� }).then(response => {� // handle auth response� });�} else {� let password = credential.password;� // Use your easiest way to authenticate�}
Store a credential
<form id="signin" method="post">� <input name="email" type="text"
autocomplete="username">� <input name="password" type="password"
autocomplete="current-password">� <input type="submit" value="Sign Up!">�</form>
var form = document.querySelector('form#signin');
var credential = new PasswordCredential(form);�navigator.credentials.store(credential);
Store federated login account
var credential = new FederatedCredential({� provider: 'https://accounts.google.com',� id: 'cwilso@gmail.com',� name: ‘Chris Wilson',� iconURL: 'https://lh3.googleusercontent.com/***'�});�navigator.credentials.store(credential);
id token (OpenID Connect)
access token (OAuth)
Between same subdomains
Sharing credentials
Between same subdomains
Between different domains
Sharing credentials
Planned for Chrome 61
Sharing credentials between different domains
http://digitalassetlinks.org
// https://www.example.com/.well-known/assetlinks.json�// Content-Type: application/json��[{� "relation": [
"delegate_permission/common.get_login_creds"
],� "target": {� "namespace": "web",� "site": "https://www.example.jp"� }�}]��
Learn more
Paying for stuff is still hard.
This is still how we buy things online.
Or you can do half screen if you have text
Long checkouts are one of the leading causes of abandonment
US mobile commerce sales will be over $150 billion this year
Source: eMarketer
The web needs a better answer for payments.
Good news: It exists
PaymentRequest is an
open-standard,
cross-browser,
ready-to-be-used-today
API for transacting on the web.
Not a processor.
Demo
https://polykart-credential-payment.appspot.com/
PaymentRequest
A primer
Define how you can get paid
var methodData = [{� supportedMethods: ['basic-card']�}, {
supportedMethods: ['https://google.com/pay']
}];
Define how you can get paid
var methodData = [{� supportedMethods: ['basic-card']�}, {
supportedMethods: ['https://google.com/pay']
}];
Define details of the transaction
var txDetails = {� total: {� label: "Purchase Amount",� amount: { currency: "GBP", value: "24.99" },� },
displayItems: [{� label: 'Subtotal',� amount: { currency: 'GBP', value: '10.00' },� }, { … }]�};
Define details of the transaction
var txDetails = {� total: {� label: "Purchase Amount",� amount: { currency: "GBP", value: "24.99" },� },
displayItems: [{� label: 'Subtotal',� amount: { currency: 'GBP', value: '10.00' },� }, { … }]�};
Request additional information
var options = {� requestShipping: true,� requestPayerEmail: true,� requestPayerPhone: true,� requestPayerName: true�}
Request additional information
var options = {� requestShipping: true,� requestPayerEmail: true,� requestPayerPhone: true,� requestPayerName: true�}
Fully dynamic, paired with shipping options
Construct the request
var pr = new PaymentRequest(methodData, transactionDetails, options);��pr.show().then(function(paymentResponse) {� // Send paymentResponse to server or gateway� paymentResponse.complete('success').then(function() {� // UI has been closed down� });�});
Show the sheet, get paid
var pr = new PaymentRequest(methodData, transactionDetails, options);��pr.show().then(function(paymentResponse) {� // Send paymentResponse to server or gateway� paymentResponse.complete('success').then(function() {� // UI has been closed down� });�});
Close the sheet
var pr = new PaymentRequest(methodData, transactionDetails, options);��pr.show().then(function(paymentResponse) {� // Send paymentResponse to server or gateway� paymentResponse.complete('success').then(function() {� // UI has been closed down� });�});
Know ahead of time if a user can pay
request.canMakePayment().then(function(result) {� if (result) {� // User has way to pay� } else {� // User doesn't have a way to pay� }�}).catch(function(err) {� console.log("Uh oh...")�});
Works cross-browser
Or you can do half screen if you have text
COMING SOON
A challenge
What percentage of your transactions, especially on mobile, have one item in the cart at checkout?
Up to 80% of checkouts only contain a single product
Add a “Buy now” button directly on product pages
Or you can do half screen if you have text
Conditionally show with canMakePayment
Enabling users around the globe to pay with any form of payment
Third party payment types
Early partners we’re working with
Or you can do half screen if you have text
Integrating your app
Three simple steps
1. Define an identifying URL
2. Update your application
3. Set up your manifests
Web app support up next
No installation. Immediate availability. Global reach.
Or you can do half screen if you have text
Get started
PaymentRequest integration guide
g.co/PaymentRequestGuide
Android 3P Integration Guide
g.co/PayAppIntegration
PaymentRequest codelab
g.co/PaymentRequestCodeLab
Thank you!
@cwilso
This deck: goo.gl/F9PGxY