Sign In with Phone Number

Set Up Digits Authentication

The Digits for Web SDK is hosted at https://cdn.digits.com/1/sdk.js and provides four methods:

  • 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.
  • embed - to embed a login widget right in your page.

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, 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:

  • Verify 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.digits.com, to ensure you are calling a trusted domain
  • Verify the user id in the response, to ensure the provided header matches the current user and the header is valid

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: