Embeddable Widget

The Digits Widgets makes it easy to add phone number sign in into your web application.

../_images/digits_widget.png

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).

Note

Make sure that the Digits SDK is used from the app’s registered “Website” URL which should set in the Fabric dashboard under the Digits tab; only the top domains must match.

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

Finally, embed the Digits Widget:

/* Embed the Digits widget. */
Digits.embed({
  container: '.my-digits-container'
})
  .done(onLogin) /*handle the response*/
  .fail(onLoginFailure);
}

Note

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

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

Theming your widget

You can provide different optional colors to blend the Digits widget as much as possible to your page’s look and feel.

/* Theme the Digits widget. */
Digits.embed({
  container: '.my-digits-container',
  theme: {
    accent: '315B7F',       /* Buttons & Links */
    background: '002747',   /* Transparent by defaul */
    label: 'FFF',           /* Titles and text */
    border: '324F67'        /* Input fields borders */
  }
})

Additional Options

As with logIn, you can access the Digits user’s email address and prefill the phone number or country selection, see Sign In Options