This repository contains the source code for the simple website presenting Cannonball and featuring an end-to-end Digits login web demo built in JavaScript and Node.
Cannonball is a canonical sample iOS and Android app to demonstrate how to use Fabric, the tools you need to build the best apps.
Cannonball uses many of the features available in Fabric, including Crashlytics, Answers, Sign In with Phone Number via Digits, embedded Tweet timelines with the Twitter Kit as well as the Tweet Composer to share on Twitter, and finally Native Ads from MoPub.
Cannonball is open source, so feel free to take a look at the code of Cannonball for iOS and Cannonball for Android on GitHub.
If you’re looking for an example of how to use Digits in your web application, there are two files in this project that are particularly interesting:
-
On the client,
public/javascripts/cannonball.jscontains our implementation of the Digits JavaScript SDK for the Cannonball page. It initializes the Digits SDK in the browser with the consumer key, triggers the Digits login flow when the user starts to interact with the “Sign In with Phone” button, performs a request to the backend passing the right OAuth Echo headers and eventually displays the phone number. -
On the server,
routes/index.jsis responsible for verifying the authentication and interacting with the Digits API. When the login is successful, the Digits API will return the user information, and this route file returns a JSON object back to the web page to display the verified phone number.
Note: In this demo, we simply display on the page the phone number returned over JSON — but for your application, you would most likely store the Digits user ID and verified phone number in your database, either for the core user identity or to enrich an existing profile.
- Clone this GitHub repository and make sure you have Node installed.
- Create a set of credentials for Digits by creating an app on Fabric.
- Create a
config.jsonfile usingconfig.sample.jsonas a template. Fill in your Digits app information. - Install the module dependencies from npm and run the application!
npm install
npm start
You can then go to http://localhost:3000 in your browser.
Assuming you have a Heroku account, you can easily deploy this sample online.
- Fill in your Digits app information. The values will be stored in your Heroku instance as environment variables.
- Click on
Viewonce the setup is complete and take note of the URL. - Navigate to your Digits dashboard in Fabric and set the
Websiteto the URL from the previous step.
Copyright 2017 Google, Inc. and contributors.
Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0