Table of Contents:
Catalyst provides you the code snippet for the sign-in form that enables user authentication for the users. You can directly incorporate the code in your application's login page and embed the sign-in form as an iFrame in your application's login page.
You can also enable Zoho and Google sign-in providers in your application, as mentioned earlier.
To access the sign-in code for your application, click the Sign-in Method tab in Authentication.
This code initializes the Catalyst Web SDK through a script. It refers to an init.js file which will automatically populate the essential details of your project, such as the Project ID which is your project's unique ID and ZAID which is the project's key.
These values are automatically populated based on the environment that you are working on. That is, if this script is called from the Development environment URL of your app, the appropriate ZAID value is populated.
You can build the sign-in form as an iFrame in your application using the Catalyst Web SDK initialization script in the following way:
- Copy the code from the console and add it to your application's login page. This initialization script is necessary, if you incorporate Catalyst Web SDK in the client side of your application.
- The code contains the line: catalyst.auth.signIn("Your elementID here"); . The elementID can be the ID of any HTML element or div element in your application's login page. You should replace this with the elementID of your application's login and implement this in the page that contains the user login.
- You can now create a division in the same page for your iFrame as: <div id="Your elementID here"> </div>. This will span the iFrame for user login in the same page.
For example, if your elementID is "login", your code will look like this:
- In the Web SDK Initialisation script: catalyst.auth.signIn("login");
- In the body of your page: <div id="login"></div>
Catalyst's sign-in form will now be inserted inside the element's scope, and it will be embedded an iFrame in your application's login page.
You can also access the older version of the sign-in script from the Sign-in Method section. Click the drop-down and select v1.
The sign-in code of version 1.0.0 will be available.
The code invokes catalystCredential() and explicitly loads the project variables, like the Project ID and ZAID, as a JSON. The code snippet is automatically populated with these values. You must use the appropriate ZAID based on the environment you are working in. You can implement this sign-in form in the same way as mentioned for the newer version.
If you require the Zoho or the Google sign-in provider option to be available for your application, you can enable them under Sign-in providers. However, before you enable them, you must perform the following actions:
- Zoho Sign-in: To enable Zoho sign-in, you must provide a client name for your application's OAuth client ID. Since your application is already hosted in Catalyst, you need not setup OAuth with Zoho or obtain the client ID and client secret.
- Google Sign-in: To enable Google sign-in in your application, you must provide the client ID and client secret of your Oauth credentials with Google. You can obtain OAuth credentials for your application with Google in the following manner:
- Open the Google API Console Credentials page.
- Click the project drop-down in the console, and then click NEW PROJECT.
If you had already created a project in Google developer console for your application, select your existing project. Skip the next step for an existing project.
- Enter a name for the project in the New Project section. If required, edit the provided project ID. Select a parent folder, if relevant. Click Create.
- After the project has been created, navigate to the Credentials page.
Note: Ensure that you have selected the right project from the drop-down list.
- You will be asked to configure the OAuth consent screen with your application details, if it is a new project. Click Configure consent screen.
Note: If it is not a new project, you must still modify some information about your application. Navigate to the OAuth consent screen page. Click Edit App, and then follow the steps below.
- Choose a user type for your app and click Create.
- Provide the application name, application logo, scopes for Google APIs and other application information in the OAuth Consent Screen.
- Under Authorized Domains, enter this value: zohoportal.com and press Enter to add it.
- Under Application Homepage Link, enter this value: https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback
- Obtain the ZAID of your project from the Environments settings and substitute it here in the URL in place of ZAID.
- Provide other relevant information, if required. Click Save.
- Navigate back to the Credentials page and click Create Credentials. Select OAuth client ID from the drop-down list.
- Select Web application, Android, or iOS as the Application type in the Create OAuth client ID page, based on the type of application that you are creating the OAuth credential for.
- Enter a name for your application's web client. Provide other relevant information in this page, if applicable.
- Click Create.
The API console will open a pop-up window with the Google client ID and client secret for your application. Copy these values. You will need to enter these information for enabling the Google sign-in method for your application in Catalyst.
You can now enable the sign-in providers as follows:
- To enable the Zoho sign-in provider option for your application, click the toggle switch for Zoho in the Sign-in providers section. If you are enabling the sign-in method for the first time, this will open a pop-up window.
Enter a Client Name of your choice for your application and click Save.
- To enable the Google sign-in provider option, click the toggle switch for Google. If you are enabling the sign-in method for the first time, this will open a pop-up window.
Enter the client ID and client secret of your application's OAuth credential with Google and click Save.
The sign-in providers are now enabled for your application's login. You can disable the Zoho or Google sign-in provider in your application's sign-in page any time using the toggle switches.
You can edit the client ID and client secret of your Google sign-in credentials, and the client name of your Zoho sign-in credential.
To edit a sign-in credential of a sign-in provider for your application:
- Click the edit icon for the sign-in provider whose credential you wish to edit in the Sign-in Method section of Authentication.
- Modify the necessary details in the pop-up box and click Save.
You can delete Google sign-in provider's OAuth credentials permanently for your application.
However, you will not be able to delete Zoho sign-in provider credentials, since Zoho sign-in provider's OAuth information is configured by Catalyst internally. You can only disable Zoho sign-in or modify your client name.
To delete Google sign-in provider's OAuth credentials permanently for your application:
- Click the delete icon for the Google sign-in provider in the Sign-in Method section in Authentication..
- Click Yes, Proceed in the confirmation box.
Google sign-in provider will now be removed from your application's sign-in page. To enable it back, you must generate the OAuth credentials if they have expired and enter them in Catalyst again.
- The readily accessible sign-in code snippet saves you the efforts of constructing the logic by your own.
- The availability of Google and Zoho sign-in providers enables the end-users to sign-in to all of your Catalyst applications using a single set of credentials.
- Zoho and Google sign-in provisions enhance and simplify user experience significantly, by preventing them from maintaining multiple application-specific credentials.
- The easy configuration of the sign-in providers from the console also simplifies your tasks of incorporating external sign-in providers in all of your applications on your own.