Skip to main content
Cover

How to Add OpenLogin to a Vue app

Instruction#

This tutorial will show you how to integrate OpenLogin authentication into one of a Vue.js application.

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

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.

Create your Vue app#

Ignore this step if you're integrating into an existing Vue project.

Use Vue CLI to create a new Vue app:

vue create hello-world

Install OpenLogin SDK#

Install Torus OpenLogin SDK using either npm or yarn:

npm i --save @toruslabs/openlogin

Initialize the SDK on your application's mounted event#

Initialize the SDK on your application mounted lifecycle function:

<script>
export default {
name: "App",
data() {
return {
privKey: "",
verifier: {
loginProvider: "google", // "facebook", "apple", "twitter", "reddit", etc. See full list of supported logins: https://docs.tor.us/direct-auth/supported-authenticators-verifiers
clientId: "YOUR PROJECT ID",
}
};
},
methods: {
async login() {
await this.sdk.login({
loginProvider: verifier.loginProvider,
redirectUrl: "http://localhost:3000/redirect"
});
console.log("private key: ", this.sdk.privKey);
},
},
async mounted() {
if(this.sdk) return;
this.sdk = new OpenLogin({
clientId: this.verifier.clientId,
iframeUrl: "http://beta.openlogin.com" // Beta version of OpenLogin
});
await this.sdk.init();
if (this.sdk.privKey) {
console.log("Private key: ", this.sdk.privKey);
}
}
};
</script>

Use the private key#

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 to sign messages, generate public key to encrypt and decrypt data later, etc.

Generate public key#

You can use @toruslabs/eccrypto to generate public key from the user's private key:

import eccrypto from "@toruslabs/eccrypto";
// Corresponding uncompressed (65-byte) public key.
const publicKey = eccrypto.getPublic(privateKey);

This public key can be shared with everyone who wants to communicate with the user.

Sign data#

The private key can be used to sign data to indicate that a message is sent by the user.

eccrypto.sign(privateKey, msg).then(function(sig) {
console.log("Signature in DER format:", sig);
});

Verify signature#

Everyone with the user's public key can verify if the message is signed by the user. For example, on server side, you can verify a signed message as a way to authenticate the user:

eccrypto.verify(publicKey, msg, sig).then(function() {
console.log("Signature is OK");
}).catch(function() {
console.log("Signature is BAD");
});