Dokumentasi API

Integrasi React / Vue (SPA)

1. Install Library Client

Disarankan menggunakan library yang menangani PKCE secara otomatis, contohnya react-oauth2-code-pkce.

npm install react-oauth2-code-pkce

2. Konfigurasi AuthProvider

import { AuthProvider } from 'react-oauth2-code-pkce';

const authConfig = {
  clientId: 'your-client-id',
  authorizationEndpoint: 'https://sso.dpupr.com/oauth/authorize',
  tokenEndpoint: 'https://sso.dpupr.com/oauth/token',
  redirectUri: 'http://localhost:3000/callback',
  scope: 'read-profile bina-marga',
  onRefreshTokenExpire: (event) => window.confirm('Session expired. Login again?'),
};

function App() {
  return (
    <AuthProvider authConfig={authConfig}>
       <YourApp />
    </AuthProvider>
  );
}

3. Menggunakan Token untuk API Request

import { useContext } from 'react';
import { AuthContext } from 'react-oauth2-code-pkce';

const UserProfile = () => {
  const { token } = useContext(AuthContext);

  const fetchProfile = async () => {
    const response = await fetch('https://sso.dpupr.com/api/user', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    const data = await response.json();
    console.log(data);
  };
  
  // ...
}

Integrasi Node.js (Express)

Untuk aplikasi backend Node.js, Anda bisa menggunakan flow Authorization Code standar dengan client_secret.

1. Setup Route Login

const axios = require('axios');
const express = require('express');
const app = express();

const SSO_CONFIG = {
  client_id: 'your-id',
  client_secret: 'your-secret',
  redirect_uri: 'http://localhost:3000/callback'
};

// 1. Redirect ke SSO
app.get('/login/sso', (req, res) => {
  const url = `https://sso.dpupr.com/oauth/authorize?client_id=${SSO_CONFIG.client_id}&redirect_uri=${SSO_CONFIG.redirect_uri}&response_type=code&scope=read-profile`;
  res.redirect(url);
});

2. Handle Callback

// 2. Callback untuk tukar code jadi token
app.get('/callback', async (req, res) => {
  const { code } = req.query;

  try {
    // Request Token
    const tokenParams = {
      grant_type: 'authorization_code',
      client_id: SSO_CONFIG.client_id,
      client_secret: SSO_CONFIG.client_secret,
      redirect_uri: SSO_CONFIG.redirect_uri,
      code: code
    };

    const { data: tokenData } = await axios.post('https://sso.dpupr.com/oauth/token', tokenParams);
    const accessToken = tokenData.access_token;

    // Ambil User Info
    const { data: userData } = await axios.get('https://sso.dpupr.com/api/user', {
      headers: { Authorization: `Bearer ${accessToken}` }
    });

    res.json({ user: userData, token: accessToken });

  } catch (error) {
    res.status(500).json({ error: 'Login failed' });
  }
});

Integrasi PHP Native

Contoh implementasi tanpa framework menggunakan cURL standard.

1. Konfigurasi (files: config.php)

<?php
define('SSO_CLIENT_ID', 'your-client-id');
define('SSO_CLIENT_SECRET', 'your-client-secret');
define('SSO_REDIRECT_URI', 'http://localhost/app/callback.php');
define('SSO_HOST', 'https://sso.dpupr.com'); // URL SSO Server
?>

2. Redirect ke Login (files: login.php)

<?php
require 'config.php';

$query = http_build_query([
    'client_id' => SSO_CLIENT_ID,
    'redirect_uri' => SSO_REDIRECT_URI,
    'response_type' => 'code',
    'scope' => 'read-profile',
    'state' => bin2hex(random_bytes(16)) // CSRF Protection
]);

header("Location: " . SSO_HOST . "/oauth/authorize?" . $query);
exit;
?>

3. Handle Callback (files: callback.php)

<?php
require 'config.php';
session_start();

if (!isset($_GET['code'])) {
    die("Error: Authorization code not found");
}

// 1. Tukar Code jadi Token via cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, SSO_HOST . "/oauth/token");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, [
    'grant_type' => 'authorization_code',
    'client_id' => SSO_CLIENT_ID,
    'client_secret' => SSO_CLIENT_SECRET,
    'redirect_uri' => SSO_REDIRECT_URI,
    'code' => $_GET['code'],
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($httpCode !== 200) {
    die("Error exchanging token: " . $response);
}

$tokenData = json_decode($response, true);
$accessToken = $tokenData['access_token'];

// 2. Ambil Profil User
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, SSO_HOST . "/api/user");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "Authorization: Bearer $accessToken",
    "Accept: application/json"
]);

$userResponse = curl_exec($ch);
curl_close($ch);

$userProfile = json_decode($userResponse, true);

// 3. Simpan di Session Login
$_SESSION['user'] = $userProfile;
$_SESSION['token'] = $accessToken;

header("Location: dashboard.php");
exit;
?>

Integrasi Mobile App (Flutter/React Native)

Aplikasi Mobile menggunakan PKCE Flow dan Deep Linking (Custom URL Scheme).

Contoh Flow (React Native - Expo AuthSession)

import * as AuthSession from 'expo-auth-session';

const discovery = {
  authorizationEndpoint: 'https://sso.dpupr.com/oauth/authorize',
  tokenEndpoint: 'https://sso.dpupr.com/oauth/token',
};

// ... inside component
const [request, response, promptAsync] = AuthSession.useAuthRequest(
  {
    clientId: 'your-mobile-client-id',
    redirectUri: 'exp://localhost:19000/--/callback', // Expo Dev Client
    scopes: ['read-profile'],
    usePKCE: true, // Wajib ON
  },
  discovery
);

React.useEffect(() => {
  if (response?.type === 'success') {
    const { code } = response.params;
    // Exchange code for token...
  }
}, [response]);