Kiges ID SDK

Everything You Need

A complete SSO toolkit designed for developers who demand both simplicity and power.

Get Started in 3 Steps

From zero to working SSO button in under 2 minutes.

<!-- Add before </body> -->
<script
    src="https://id.kiges.cc/js/kiges-id-sdk.js"
    data-kiges-client-id="YOUR_CLIENT_ID"
    data-kiges-redirect-uri="https://yoursite.com/callback"
    data-kiges-auto-prompt="true">
</script>

KigesID.init({
    clientId: 'YOUR_CLIENT_ID',
    redirectUri: 'https://yoursite.com/callback',
    onSuccess: function(data) {
        // data.code = authorization code
        // Send to your server to exchange for token
        fetch('/auth/kiges/callback', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ code: data.code })
        });
    },
    onError: function(error) {
        console.error('Auth failed:', error);
    }
});

// routes/web.php
Route::post('/auth/kiges/callback', function (Request $request) {
    $response = Http::asForm()->post('https://id.kiges.cc/oauth/token', [
        'grant_type'    => 'authorization_code',
        'client_id'     => config('services.kiges.client_id'),
        'client_secret' => config('services.kiges.client_secret'),
        'redirect_uri'  => config('services.kiges.redirect'),
        'code'          => $request->code,
    ]);

    $user = Http::withToken($response['access_token'])
        ->get('https://id.kiges.cc/api/user');

    // Create or update user in your database
    Auth::login(User::updateOrCreate(
        ['kiges_id' => $user['id']],
        ['name' => $user['name'], 'email' => $user['email']]
    ));

    return redirect('/dashboard');
});

Integration Methods

Choose the approach that fits your project. All methods are fully supported.

<script
    src="https://id.kiges.cc/js/kiges-id-sdk.js"
    data-kiges-client-id="YOUR_CLIENT_ID"
    data-kiges-redirect-uri="https://yoursite.com/callback"
    data-kiges-auto-prompt="true"
    data-kiges-theme="dark"
    data-kiges-position="bottom-right"
    data-kiges-button="#login-btn">
</script>

<!-- Button will render here -->
<div id="login-btn"></div>

<script src="https://id.kiges.cc/js/kiges-id-sdk.js"></script>
<script>
    // Initialize with full options
    KigesID.init({
        clientId: 'YOUR_CLIENT_ID',
        redirectUri: 'https://yoursite.com/callback',
        hostedSignInUrl: 'YOUR_HOSTED_SIGN_IN_URL',
        hostedSignUpUrl: 'YOUR_HOSTED_SIGN_UP_URL',
        scope: 'openid profile email',
        autoPrompt: true,
        promptPosition: 'bottom-right',
        promptDelay: 3000,
        theme: 'auto',
        onSuccess: (data) => console.log('Success:', data),
        onError: (err) => console.error('Error:', err),
        onDismiss: () => console.log('Dismissed')
    });

    // Render a styled button
    KigesID.renderButton('#my-button', {
        theme: 'primary',
        size: 'large',
        fullWidth: true,
        showIcon: true,
        mode: 'popup'
    });

    KigesID.renderSignUpButton('#my-register-button', {
        theme: 'outline',
        mode: 'redirect'
    });
</script>

# Coming soon
npm install @kiges/id-sdk

# React
import { KigesIDButton } from '@kiges/id-sdk/react';

# Vue
import { KigesIDButton } from '@kiges/id-sdk/vue';

Configuration Reference

All available options for initialization and button rendering.

Initialization Options

Button Options

API Reference

All public methods available on the KigesID global object.

Framework Examples

Ready-to-use integration examples for popular frameworks.

React

import { useEffect, useRef } from 'react';

function KigesLoginButton({ clientId, onSuccess }) {
    const btnRef = useRef(null);

    useEffect(() => {
        // Load SDK
        const script = document.createElement('script');
        script.src = 'https://id.kiges.cc/js/kiges-id-sdk.js';
        script.onload = () => {
            window.KigesID.init({
                clientId,
                onSuccess,
                onError: (err) => console.error(err)
            });
            window.KigesID.renderButton(btnRef.current, {
                theme: 'primary',
                size: 'large',
                fullWidth: true
            });
        };
        document.body.appendChild(script);
        return () => window.KigesID?.destroy();
    }, [clientId]);

    return <div ref={btnRef} />;
}

export default KigesLoginButton;

Vue 3

<template>
  <div ref="btnContainer" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({ clientId: String });
const emit = defineEmits(['success', 'error']);
const btnContainer = ref(null);

onMounted(() => {
    const script = document.createElement('script');
    script.src = 'https://id.kiges.cc/js/kiges-id-sdk.js';
    script.onload = () => {
        window.KigesID.init({
            clientId: props.clientId,
            onSuccess: (data) => emit('success', data),
            onError: (err) => emit('error', err)
        });
        window.KigesID.renderButton(btnContainer.value, {
            theme: 'primary', size: 'large', fullWidth: true
        });
    };
    document.body.appendChild(script);
});

onUnmounted(() => window.KigesID?.destroy());
</script>

Try It Live

Interact with a live instance of the SDK. Click the buttons below to test different popup positions.