Kana Labs
  • Getting Started
    • Welcome to Kana Labs
  • CROSS CHAIN SWAPS
    • AMM DEX Aggregator
  • INTEGRATE KANA WIDGET
    • Kana Widget
      • Install Widget
      • Configure Widget
      • Configure Aptos Keyless
  • Web3 Aggregator SDK
    • Web3 Aggregator SDK
      • Installation
      • SameChain
      • Cross Chain Swap
      • Aggregator API's
  • SPOT TRADING PLATFORM
    • Kana Trade
      • API Docs
  • PERPETUAL FUTURES
    • Kana Perps
      • Getting Started
        • Mint Tokens on Testnet
      • Breaking Down Kana Perps
        • Assets Supported
        • Order Types
        • Orderbook
        • Funding Rate
        • Leverage
        • Margin and Liquidation
        • Hedge Mode
          • Hedging a Short-Term 2-3% Price Decline
          • Dual Positioning for Flexible Profit-Taking
        • Trading Fees
      • API Docs
        • Installation Setup
        • Kana Perps Typescript REST API
        • Kana Perps Python Websocket API
        • Kana Perps Python REST API
        • Steps to place an order
        • Perps Contract Error Codes
        • Websocket Connection
        • Supported Markets
  • SPOT & PERP APIs
    • Trading APIs
      • Kana Trade API
      • Kana Perps API
        • Installation Setup
        • Example setup functions
        • Kana Perps Typescript REST API
        • Kana Perps Websocket API
        • Kana Perps Python Websocket API
        • Kana Perps Python REST API
        • Steps to place an order
  • PAYMASTER SERVICE
    • Kana Paymaster For Aptos and Supra
      • How it works?
      • How to Register?
      • Deposit Allowance
      • Manage Users
      • Paymaster SDK Tutorial (Typescript)
      • Paymaster API
      • Module & Function Whitelist
      • Subscription - Coming soon
      • FAQS
  • PERPETUAL OPTIONS
    • OPerps
  • Tokenomics & Governance
    • Kana Labs Tokenomics
  • REWARDS & REFERRAL PROGRAM
    • Rewards Program
      • Reward Program Season 1
      • Reward Program Season 2
      • How to Keep Track of Your Points?
      • Where to find the Missions Dashboard?
  • Referral Program
    • How to Generate Referral Link? (For the Referrer)
    • How to map your wallet to the invite IDs? (For the invited users)
Powered by GitBook
On this page
  1. INTEGRATE KANA WIDGET
  2. Kana Widget

Configure Aptos Keyless

Kana Widget Configuration for Aptos Keyless

PreviousConfigure WidgetNextWeb3 Aggregator SDK

Last updated 5 months ago

To enable Aptos keyless functionality in the Kana Widget, follow the steps below:

  1. Registering your dApp with Google

    Step 1: Sign in to Google Developer Console

    1. Navigate to the .

      1. Sign in with your Google account credentials.

    Step 2: Create a New Project

    1. If you don’t have an existing project, click on the “Select a project” dropdown menu at the top of the page and choose “New Project.”

    2. Enter a name for your project and click “Create.” Detailed instructions can be found .

    Step 3: Configure Consent Screen

    1. In the left sidebar, navigate to “APIs & Services” > “OAuth consent screen.”

    2. Choose “External” user type and click “Create.”

    3. Enter the required details such as the application name, user support email, and developer contact information.

    4. Optionally, add additional details like the application logo and privacy policy URL.

    5. Click “Save and continue.” Detailed steps are available .

    Step 4: Register Your Application

    1. In the left sidebar, navigate to “APIs & Services” > “Credentials.”

    2. 2.Click on “Create Credentials” and select “OAuth client ID.”

    3. Choose the application type (e.g., Web application, Desktop app, or Mobile app).

    4. Enter the necessary details such as the name of your application and the authorized redirect URIs. For OIDC, the redirect URIs should follow the format .

    5. Click “Create.”

    Step 5: Obtain Client ID and Client Secret

    1. After creating the OAuth client ID, Google will provide you with a client ID and client secret. These credentials are essential for authenticating your application.

    2. Note down the client ID and client secret securely. Do not expose them publicly.

    Step 6: Configure OIDC Integration in Your Application

    1. Integrate OIDC authentication into your application using a suitable OIDC library or framework (e.g., Passport.js for Node.js, Spring Security for Java, or Auth0 for various platforms).

    2. Use the client ID and client secret obtained from Google to configure OIDC authentication in your application settings.

    3. Set up the appropriate callback URL () for handling authentication responses from Google.

  2. Example Implementaion

    Once you have obtained the Client ID and added the appropriate callback URL, you can use the Google CLIENT_ID in your WidgetConfig

note

import { KanaWidget, AptosDexsFilter, BridgeOption, Chain, WidgetConfig } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
  // Required: The unique SDK key provided by the development team. This key is essential for the widget to function properly.
  // If you haven't received a key yet, please contact the development team to obtain one.
  sdkKey: "Your dApp/company SDK key",
  
  //Optional: The name of your dApp or company using this widget.
  integrator:"Your dApp/company name",
  
  // Optional: Configure custom blockchain network providers if you wish to use your own instead of default settings.
  Provider: {
    aptosProvider: `https://aptos-mainnet.nodereal.io/v1/${NODEREAL_KEY}/v1`,
    solanaProvider: `https://greatest-frequent-owl.solana-mainnet.quiknode.pro/${SOLANA_QUICKNODE_KEY}`,
    polygonProvider: `https://polygon-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    binanceProvider: `https://bsc-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    ethereumProvider: `https://eth-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    arbitrumProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/arbitrum-nitro/`,
    avalancheProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/avalanche-c/ext/bc/C/rpc`,
    zkSyncProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/zksync`,
    suiProvider: "https://sui-mainnet-rpc.nodereal.io", 
  },
  
  // paymaster api key to enable paymaster 
  paymasterApikey: "Your Paymaster API key",
  
  // google client_id to enable Aptos Keyless 
  googleClientId: "your Google client_id',
  
  integratorFee:{
    // Fee range is 0.01% to 5%
    // Input should be between 1 to 500
    Fee: 1, 
    Address:"Your Integrator Address"
  }
};

export const WidgetPage = () => {
  return <KanaWidget config={widgetConfig} />;
};
Google Cloud Console
here
here
https://your-app-domain.com
https://your-app-domain.com