onymos-logo
access icon

Quickstart Guide: Access Component

Access Component

Select a framework to get started.

Get started

Using Ionic or Cordova? Get the Access component working in your app in four easy steps.

  1. Download the component
  2. Add it to your environment
  3. Using Access
  4. Troubleshooting

1. Download the Onymos Access component

Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!

2. Add it to your environment

Add your components to a folder in your app’s root (e.g., onymos_components).

Add the Onymos Initialize component to your environment.

$ cordova plugin add onymos_components/onymos-component-initialize

Then we can add the Onymos Access component.

$ cordova plugin add onymos_components/onymos-component-access

Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.

3. Using Access

Using the Access component in your app
Want to sign-in users with their Apple, Facebook, or Google accounts or use email and password combinations stored in the Onymos Cloud? Want to use your own database or integrate with other OAuth 2.0 providers like Microsoft Azure? The Onymos Access component is a dynamic tool for authenticating your users in all of these ways!

Before we use Access, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.

Access component settings
In this Quickstart Guide, we’ll use Apple, Facebook, and Google to authenticate your users, but Access has even more functionality—and you’ll need to decide how much of it to use in your app.

Social Sign-in
Access includes support for Apple, Facebook, and Google social sign-in.

Apple: To use Apple Sign-in, you’ll need the IOS_URL_SCHEME value generated in the Onymos Cloud. Make sure to also add “Sign in with Apple” as one of your app’s capabilities inside your XCode.

$ cordova plugin add onymos_components/onymos-component-access --variable IOS_URL_SCHEME

Google: On Android device support for Google Sign-in requires you to provide a SHA1 key. You can find out how to generate your key and add it to your Onymos Cloud account here.

Email and Password System
Access offers a framework for creating and managing your own email and password sign-in system. You’ll need to configure the onymosConnectObject, and in addition to your Customer ID and Onymos Auth Token, you’ll need to add values for optional properties. You can reach out to customersuccess@onymos.com to learn more.

{
  // Your AWS access and secret keys are provided when you use Onymos Hosting.
  awsAccessKey : 'Your AWS access key.', 
  awsSecretKey : 'Your AWS secret key.',
  awsSessionToken : 'Your AWS session token.', 
  // If you're using your own AWS hosting, provide the bucket for your data-store.
  // AWS support is only available for buckets created in the 'US Standard' region.
  // This isn't required when you're using Onymos Hosting.
  awsBucketFolder: 'Your folder in AWS.' 
}

0Auth 2.0
Access can be used as an OAuth 2.0 client. You can authenticate against existing systems like Ping, Auth0, and ActiveDirectory. Contact customersuccess@onymos.com to find out how to integrate with your OAuth 2.0 client.

DataStore
Access needs server-side data storage for an email and password system. As part of the component offering, you’ll receive connectivity to the Onymos Cloud and 200 MB of storage.

All set? Let’s go inside your Cordova app’s index.js file and initialize Access.

var OnymosInitalize
var OnymosAccess

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  const OnymosConnectObject={
    customerId: 'Your customerId goes here', 
    onymosAuthToken: 'Your onymosAuthToken goes here',  
    envType: 'PRD'
  }

  OnymosInitialize.initialize(
    OnymosConnectObject,
      
    function onymosInitializeSuccess(status){
      console.log("Onymos initialized Successfully.", status)
    },

    function onymosInitializeFailure(error){
      console.log("Onymos failed to initialize.", error)
    })
}

Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Access.

Let’s integrate Apple, Facebook, and Google social sign-in with your app. We’ll start by creating a function called socialLogin() inside of your index.js file. It will invoke the login() method, which will require an accessObj with a property called authProvider. We can use its value to identify which platform (“apple”, “facebook”, or “google”) you want to use to authenticate your user.

function socialLogin(authProvider){
  let accessObj = {
	                authProvider: authProvider
		          }

  OnymosAccess.login(
    accessObj, 

  function onymosAccessLoginSuccess(data){
    console.log('A user logged in:', Date.now());
  }, 
		
  function onymosAccessLoginFailure (error){
    console.log(error);
  });

}

Since we’re passing an authProvider as an argument, let’s go to the index.html file and write the front-end code that will support socialLogin().

<div (click)="socialLogin('google')">
  <p> Sign in with Google </p>
</div>
  
<div (click)="socialLogin('apple')">
  <p> Sign in with Apple </p>
</div>

<div (click)="socialLogin('facebook')">
  <p> Sign in with Facebook </p>
</div>

Our click event will pass the authProvider the user chooses to socialLogin() and populate the value in the accessObj!

Now, your app can authenticate a user with Apple, Facebook, and Google. Try adding even more functionality with methods like getAuth() to protect one or more of your app’s pages from unauthorized users.

4. Troubleshooting

How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?

Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.

Dig into our API documentation

Developer support

Got questions? Our support team is here to help.

Think differently about app development

Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.

Get your free white paper