With just a few minor modifications to your Firebase project and a little front-end development, a website using Firebase as its identity platform can implement OwnID to simplify and streamline the login experience for its users. Integrating OwnID with a website that leverages Firebase involves three basic steps:
- Use the OwnID Console to create an OwnID application
- Use the Firebase Console to configure an existing Firebase project
- Use the OwnID Web SDK to add the OwnID widget to your client-side pages
#Step 1: Create OwnID Application
An OwnID application connects your website's identity platform with the OwnID widget in the front end. First, you integrate with Firebase when creating the application. This OwnID application is assigned a unique
appId that is then added to the website's front end. To create an OwnID application:
- Open the OwnID Console and create an account or log in to an existing account.
- Select Create Application.
- Define the details of the OwnID application, and select Next.
- If you are ready to configure Firebase and modify your front end, select the Firebase Authentication card and proceed to Step 2: Configure Firebase. If you would like to complete these steps later, select Skip for Now.
#Step 2: Configure Firebase
The OwnID-Firebase integration assumes you have already created a Firebase project and added the Firebase SDK to your website. If you created an OwnID application without starting the Firebase integration, open the application in the OwnID Console and select the Integration tab before taking the following steps.
#Generate Private Key for the Firebase Admin SDK Service Account
An Own ID application needs a private key for the Firebase Admin SDK service account in order to integrate itself with the Firebase project. Private keys associated with a service account provide the credentials needed to access Firebase services.
- In the Firebase Console, go to > Project Settings > Service accounts. If you do not see the Service accounts tab, make sure you are an owner of the Firebase project.
- With Firebase Admin SDK highlighted, select Generate new private key, and then confirm by selecting Generate key. You are prompted to save the key as a JSON file.
- Use the OwnID console to choose or drag-and-drop the JSON file with the generated key.
#Step 3: Add OwnID to Your Frontend
#Installing the OwnID SDK
If a website uses a framework like Angular or ReactJS, it must install the OwnID SDK before adding the OwnID widget to its registration and login flows. To install the OwnID SDK for a framework, use the CLI to run:
#Initializing the OwnID SDK
appId of the website's OwnID application. This unique
appId can be obtained by opening the application in the OwnID Console.
Import the OwnIDInit component to your App component and configure it with the
appId assigned to the application you are creating
Copy and paste the following code into the head of the pages where you want to add OwnID to your Login and Registration flows
Then, initialize OwnID
The following code demonstrates how to use the OwnID SDK with a login page. It includes the OwnID SDK, initializes the SDK with the
appId of an OwnID application, and creates the OwnID widget.
Add references to elements and define an
onLogin function. The
onLogin function is executed when the user logs in with OwnID.
Add the ownid component to the HTML template of the login page
Now, define the
onLogin function that is executed when the user logs in with OwnID
Copy and paste the following code into the body of your Login page (bellow your input tags), then change the loginId field, password field and submit button to reference your form elements.
The following code demonstrates how to use the OwnID SDK with a registration page.
Add references to required elements, and modify the function that is called when the form is submitted
Add the ownid component to the HTML template your page
Then, add OwnID enrollDevice function right after calling your existing registration function.
Define OwnID register function bellow your input tags
Then, call OwnID enrollDevice right after your firebase register function
#Customizing the UI
The default code added to initialize the OwnID SDK has a single parameter:
appId. In addition to this required parameter, there are optional parameters that can be added to the initialization code to modify the look of the OwnID button. Each parameter is added to the
ownid function of the initialization code as a key/value pair of the JSON object. See how to customize the OwnID widget in this page.