How to integerate Openlogin with an Ethereum dapp.

By April 17, 2021DApps
Click here to view original web page at docs.tor.us
Cover

Introduction

This tutorial will guide you over a basic example to integerate Openlogin authentication with ethereum seamlessly.

We will create an example app where user can login,check wallet address, balance and logout.

You can find the source code of this is example on Github.

Let's get started with code

We will be using plain html and jquery for this example so we just need to create a single html file for this simple example app.

Register your OpenLogin application

In order to use OpenLogin SDK, you'll need to create a project in Developer Dashboard and get your client ID.

App registration is not required for localhost development.

Installing depedencies

To start with using openlogin with a ethereum dapp , you need to install Openlogin and Web3 js sdk. You can fetch SDK files which are hosted over cdn using script tags in html file.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@toruslabs/openlogin@0"></script>

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.js"></script>

Openlogin and web3 libraries are also available on npm and yarn.

Initialize Openlogin sdk

Initialize the SDK after your application is mounted inside $(document).ready callback.

$(document).ready(async function () {

OpenLogin = window.Openlogin;

sdkInstance = new OpenLogin.default({

clientId: "random_id" ,

iframeUrl: "https://beta.openlogin.com"

});

await sdkInstance.init();

if (sdkInstance.privKey) {

await connectWeb3()

} else {

$("#login").show();

The code snippet given above is creating Openlogin Sdk instance with two params ie clientId and iframeUrl and it initializes it using init function. Init

  • clientId: clientId is a public id which is used to to identify your app. You can generate your client id using getting started guide with openlogin. For localhost you can use any static random string as client id.

  • iframeUrl: iframeUrl is the url of openlogin frontend where user will be redirected from app for authentication.

After initializing openlogin sdk, above function checks if sdk instance has private key. If private key is available then it means that user is already authenticated and it renders user account details using web3, we will cover connectWeb3 function in next step. Good news is that openlogin sdk persist user private key even after page reload so better User Experience.

Login user:

Once the sdk is initialized , you can allow user to login. You need to call login function available on sdkInstance created in previous step.

$("#login").click(async function (event) {

if (!sdkInstance.privKey) {

const sig = "";

await sdkInstance.login({

loginProvider: "google",

redirectUrl: `${window.origin}`,

});

}

await connectWeb3();

$("#error").hide();

$("#login").hide();

});

Above code snippet triggers the openlogin sdk login functionality on click of.a button.

It first checks if user is already authenticated by looking for privKey on sdkinstance. If user is not authenticated then it calls login function with following options:-

  • loginProvider :- loginProvider is the authentication method which can be used for authenticating users. You can choose from a list of various login providers.

  • redirectUrl: redirectUrl is the url of the page where user will be redirected after getting autheticated from openlogin frontend.

Use the private key with web3.js

After calling openlogin.login and handling redirect result, your application will have access to the user's private key at openlogin.privKey. You can use this private key with web3 to generate account , to view your balance and to sign blockchain transactions.

We are using infura nodes url in this example to access blockchain with web3 js. However you can use any node url. After intializing the web3 http provider, it creates a eth account using the private key available on sdk instance, retrives the account address and balance.

You can use any web3 function after this from sending ether to calling smart contract functions.

Log out hanlder:-

In order to logout user you needs to call logout function available on sdk instance.Logout function will clears the sdk state and removes any access to private key on frontend. You can redirect user to the exit page after logout function returns.

DONE!!

You can checkout example of this example app here.the source code of this is example on Github.

Leave a Reply