Sign in with Phone Number

Digits for Web makes it easy for you to integrate phone number login to your website, to complement your mobile apps on iOS and Android. Digits will verify the user’s phone number with the same global, reliable infrastructure Twitter uses and easily integrate into your site.

Digits lets people create an account or sign into your app using nothing but their phone number on iOS and Android. Built using the same global, reliable infrastructure Twitter uses, Digits will verify the user’s phone number with a simple customizable user interface that easily integrates into your app.

Set up Digits Authentication

The Digits for Web SDK is hosted at https://cdn.digits.com/1/sdk.js This script is tiny, cached and self-contained; you do not have to include any other third-party libraries. It will auto-update when we have new features, but will never break your site.

There are three methods provided:

  • init - to set up the SDK with your public consumer key.
  • getLoginStatus - to discover if the user is already logged into Digits and has or has not authorized your app
  • logIn - to start a login flow

To get started, include Digits for Web in your page source:

<head>
  <script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>
</head>

Then, initialize Digits for Web using the consumer key that Fabric generated for your application. You can find it in your Fabric web dashboard under the Digits tab (Digits does not work with keys created from apps.twitter.com).

/* Initialize Digits for Web using your application's consumer key that Fabric generated */
document.getElementById('digits-sdk').onload = function() {
  Digits.init({ consumerKey: 'yourConsumerKey' });
};

Finally, attach the logIn function to your login button:

/* Launch the Login to Digits flow. */
function onLoginButtonClick(event){
  Digits.logIn()
    .done(onLogin) /*handle the response*/
    .fail(onLoginFailure);
}

Tapping your login button will trigger the Digits for Web popup, where users can complete the Digits flow.

../_images/digits_web_login.png

Note

Digits authentication workflow screens are translated into the user’s web browser language settings.

If the user already is logged into Digits for Web, Digits will intelligently omit SMS confirmation the next time the user logs into any other sites that are also powered by Digits, asking the user to confirm with one tap:

../_images/digits_sso.png

On success, the Digits Web SDK will provide an OAuth Echo response.

/* Validate and log use in. */
function onLogin(loginResponse){
  // Send headers to your server and validate user by calling Digits’ API
  var oAuthHeaders = loginResponse.oauth_echo_headers;
  var verifyData = {
    authHeader: oAuthHeaders['X-Verify-Credentials-Authorization'],
    apiUrl: oAuthHeaders['X-Auth-Service-Provider']
  };

  $.post('/verify', verifyData)
    .done(function(){ window.reload(); });
}

From your web server, over SSL, you can use this response to securely request the userID, phone number, and oAuth tokens of the Digits user. With this approach there is no need to configure OAuth signing, or configure and host a callback url for Digits.

As additional security measures, you will want to on your webhost:

  • Validate the oauth_consumer_key header value matches your oauth consumer key, to ensure the user is logging into your site
  • Verify the X-Auth-Service-Provider header, by parsing the uri and asserting the domain is api.twitter.com or www.digits.com, to ensure you call Twitter.
  • Validate the response from the verify_credentials call to ensure the user is successfully logged in

Digits for Web Demo

Here’s a quick demo app using Cannonball that you can use as a template to integrate Digits into your websites today: