Talk to usSign up

LEARNING

Creating a Login Button

Table of Contents

Before you Start

If you don't have your project files you can follow this guide for how to get everything started:

Authenticating your Token

Creating your Application

To get started we will need to register your application to work with the Circle Service. To do so you can follow this guide:

https://circlesecurity.ai/learning/circle-access-360/how-to-add-applications-to-circle-access/

Adding Userless/Passwordless login to your page

We will first start by adding the one click login button to the web page. In your index.html file add the following to the <body> </body> tags.

<div id="circleAccess">

    </div>

This will be where the button is displayed on your webpage:

Inside the following segment of code - 

if (iniResult && iniResult.Status.Result) {
  // CircleService is running and token is authorized

  
}

add the following segments of code:

    const btn = Circle.getLoginButton();

    console.log(btn);

    document.getElementById("circleAccess").innerHTML = btn;

Testing

to verify that your login button is working, first open Command Prompt (Terminal for MacOS) and using the CD command navigate to the location of your index.html file.

Enter the following command to start your Python server.

python -m http.server [<portNo>]

In your IDE (Visual Studio Code is used for this example) open your Index.js file.

Open Terminal and enter the following:

npm start

open your index.html file in a web browser and you should see your login button -

Click on the button and you should be redirected to the site specified in your project on Circle Console.

What are your Feelings