DEV Community

Cover image for Tutorial OpenID Connect: Panduan Lengkap Langkah demi Langkah
Walse
Walse

Posted on • Originally published at apidog.com

Tutorial OpenID Connect: Panduan Lengkap Langkah demi Langkah

OpenID Connect telah menjadi standar industri untuk otentikasi dan single sign-on (SSO) yang modern dan aman. Jika Anda mencari tutorial OpenID Connect yang jelas, praktis, dan komprehensif, Anda berada di tempat yang tepat. Panduan ini akan memandu Anda memahami apa itu OpenID Connect, mengapa penting, konsep inti, alur otentikasi, implementasi langsung, dan contoh praktis untuk skenario dunia nyata.

Coba Apidog hari ini

Apa itu OpenID Connect? (Dasar-dasar Tutorial OpenID Connect)

OpenID Connect adalah protokol otentikasi yang dibangun di atas kerangka kerja OAuth 2.0. Sementara OAuth 2.0 dirancang untuk otorisasi (memberikan akses ke sumber daya), OpenID Connect dibangun untuk otentikasi—memverifikasi identitas pengguna dan menyediakan informasi profil dasar secara aman.

  • Otentikasi Aman: Hindari sistem login buatan sendiri yang rawan celah keamanan.
  • Single Sign-On (SSO): Satu login untuk banyak aplikasi, satu penyedia identitas.
  • Interoperabilitas: Dukungan lintas klien web, mobile, dan API.
  • Informasi Profil: Mendapatkan data identitas terstandardisasi (token ID JWT).

Tutorial ini akan mengupas seluruh manfaat tersebut secara teknis dan terstruktur.

Konsep Kunci untuk Tutorial OpenID Connect ini

  • Penyedia Identitas (IdP): Layanan otentikasi (Google, Auth0, Okta).
  • Klien: Aplikasi/web/API yang meminta otentikasi.
  • Pengguna Akhir: User yang melakukan login.
  • Server Otorisasi: Server yang mengeluarkan token (umumnya sama dengan IdP).
  • Token ID: JWT berisi data identitas pengguna.
  • Token Akses: (OAuth 2.0) Untuk akses API setelah otentikasi.
  • Discovery Document: Endpoint metadata dan URL otentikasi IdP.

Tutorial OpenID Connect: Penjelasan Alur Otentikasi

Implementasi OpenID Connect umumnya mengikuti langkah berikut:

1. Pengguna Memulai Login

Pengguna klik "Login dengan OpenID Connect" di aplikasi Anda.

2. Klien Mengarahkan ke Server Otorisasi

Aplikasi mengarahkan browser ke authorization endpoint IdP, beserta parameter:

  • client_id
  • redirect_uri
  • scope (wajib openid)
  • state
  • response_type (umumnya code)

Contoh URL:

https://idp.example.com/authorize?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourapp.com/callback
  &scope=openid%20profile%20email
  &response_type=code
  &state=randomState123
Enter fullscreen mode Exit fullscreen mode

3. Pengguna Mengotentikasi

IdP menampilkan form login, user memasukkan kredensial dan menyetujui akses profil.

4. Server Otorisasi Redirect ke Aplikasi

Setelah sukses, IdP redirect ke redirect_uri dengan kode otorisasi dan state.

https://yourapp.com/callback?code=AUTH_CODE&state=randomState123
Enter fullscreen mode Exit fullscreen mode

5. Klien Menukar Kode untuk Token

Backend menukar kode otorisasi ke endpoint token IdP via HTTP POST.

POST /token
Host: idp.example.com
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code
&code=AUTH_CODE
&redirect_uri=https://yourapp.com/callback
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
Enter fullscreen mode Exit fullscreen mode

6. Token Dikembalikan

Respons akan berupa:

  • id_token (JWT user info)
  • access_token (akses API)
  • refresh_token (opsional)

Contoh Response JSON:

{
  "access_token": "eyJ...abc",
  "id_token": "eyJ...xyz",
  "expires_in": 3600,
  "token_type": "Bearer"
}
Enter fullscreen mode Exit fullscreen mode

7. Klien Memvalidasi dan Menggunakan Token

Aplikasi memvalidasi id_token (signature, aud, exp), lalu login user. access_token digunakan untuk akses API protected.

Tutorial OpenID Connect: Memahami Alur

Fokus pada Authorization Code Flow (standar untuk web apps):

  • Paling aman (token tidak terekspos di browser)
  • Validasi sisi server
  • Cocok untuk aplikasi dengan backend

Jangan gunakan Implicit Flow: Tidak direkomendasikan (token terekspos di URL). Untuk SPA/mobile, gunakan Authorization Code Flow dengan PKCE.

Tutorial OpenID Connect: Mendekode Token ID

id_token adalah JWT, bisa didecode untuk info user.

Contoh payload id_token:

{
  "iss": "https://idp.example.com",
  "sub": "1234567890",
  "aud": "YOUR_CLIENT_ID",
  "exp": 1712345678,
  "iat": 1712341678,
  "email": "user@example.com",
  "name": "Jane Doe"
}
Enter fullscreen mode Exit fullscreen mode
  • iss: Issuer (IdP)
  • sub: Subject (user ID)
  • aud: Audience (ID aplikasi)
  • exp: Expired at
  • email, name: Data user

Tips: Validasi signature dan claims sebelum menerima login.

Tutorial OpenID Connect: Contoh Praktis (Python)

Berikut langkah implementasi OpenID Connect secara manual di Python (tanpa SDK eksternal):

Langkah 1: Buat URL Otorisasi

import urllib.parse

params = {
    "client_id": "YOUR_CLIENT_ID",
    "redirect_uri": "https://yourapp.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "state": "randomState123"
}
auth_url = "https://idp.example.com/authorize?" + urllib.parse.urlencode(params)
print(auth_url)
Enter fullscreen mode Exit fullscreen mode

Langkah 2: Tukar Kode Otorisasi untuk Token

import requests

token_data = {
    "grant_type": "authorization_code",
    "code": "AUTH_CODE",
    "redirect_uri": "https://yourapp.com/callback",
    "client_id": "YOUR_CLIENT_ID",
    "client_secret": "YOUR_CLIENT_SECRET"
}
resp = requests.post("https://idp.example.com/token", data=token_data)
tokens = resp.json()
print(tokens)
Enter fullscreen mode Exit fullscreen mode

Langkah 3: Dekode dan Validasi Token ID

import jwt

id_token = tokens['id_token']
decoded = jwt.decode(id_token, options={"verify_signature": False})
print(decoded)
Enter fullscreen mode Exit fullscreen mode

Catatan: Di produksi, SELALU verifikasi signature JWT dengan public key IdP!

Tutorial OpenID Connect: Skenario Aplikasi Praktis

1. Single Sign-On (SSO) Multi-Aplikasi

User hanya perlu login sekali (misal via Google) lalu bisa akses seluruh aplikasi Anda. OpenID Connect ideal untuk SSO level perusahaan.

2. Otentikasi API yang Aman

Autentikasi konsumen API dengan validasi id_token di backend. Tools seperti Apidog mempercepat desain dan uji endpoint API protected.

3. Integrasi Login Sosial

Ingin "Login dengan Google" atau Microsoft? Ikuti tutorial ini untuk integrasi cepat penyedia sosial via OpenID Connect.

4. Otentikasi Aplikasi Mobile

Gunakan flow yang sama untuk aplikasi mobile, baik via deep link atau in-app browser.

Tutorial OpenID Connect: Menguji dan Debugging dengan Apidog

Development dan testing API OpenID Connect sangat krusial. Apidog menawarkan platform spesifikasi API yang mendukung:

  • Pengujian API: Simulasikan permintaan token, validasi respons.
  • Mock Endpoint: Buat IdP palsu untuk uji autentikasi tanpa IdP asli.
  • Dokumentasi: Dokumentasikan API OpenID Connect Anda untuk tim frontend/devops/security.

Integrasi Apidog ke workflow OpenID Connect Anda mempercepat pengembangan, meminimalisir error, dan memastikan autentikasi solid.

Tutorial OpenID Connect: Praktik Terbaik

  • Selalu validasi token ID: Signature, issuer, audience, expiry.
  • Wajib HTTPS: Jangan transmit token di channel insecure.
  • Amankan rahasia: Simpan client_secret dan token dengan aman.
  • Error handling: Tangani login gagal, token expired, revoke session.
  • Update library dan pengetahuan: Standar terus berkembang.

Kesimpulan: Langkah Selanjutnya Setelah Tutorial OpenID Connect ini

Anda telah mengikuti tutorial OpenID Connect yang komprehensif—dari konsep, alur, implementasi, hingga contoh nyata. OpenID Connect adalah standar modern untuk autentikasi aplikasi. Kuasai dan tingkatkan keamanan serta experience user Anda!

Langkah lanjut:

  1. Daftarkan aplikasi ke IdP terpercaya (Google, Auth0, Okta, dsb).
  2. Implementasikan Authorization Code Flow sesuai panduan ini.
  3. Uji flow Anda dengan Apidog untuk memastikan keamanan dan reliabilitas.
  4. Upgrade skill dengan eksplorasi Discovery, dynamic client registration, federated identity.

Dengan tutorial ini, Anda siap membangun autentikasi modern berbasis OpenID Connect. Selamat ngoding!

Top comments (0)