Lompat ke Konten
Capgo - Update Langsung untuk Aplikasi Capacitor Capgo

Integrasi Autentikasi yang Lebih Baik

GitHub

Pendahuluan

Bab berjudul “Pendahuluan”

Auth yang Lebih Baik berfungsi dengan baik ketika @capgo/capacitor-social-login Anda ingin masuk native pada perangkat tetapi masih ingin Auth yang Lebih Baik untuk membuat dan mengelola sesi pada backend Anda.

Halaman ini berfokus pada dua pola integrasi yang paling sesuai:

  • Pindah Token Asli untuk Google, Apple, dan Facebook
  • Auth yang Lebih Baik Generic OAuth untuk penyedia seperti Auth0, Okta, Keycloak, dan server OIDC kustom

Pola mana yang harus digunakan

Bagian berjudul “Pilih pola mana”

Gunakan pengalihan token asli

Bagian berjudul “Gunakan pengalihan token asli”

Gunakan SocialLogin.login() Pertama, kemudian kirimkan token yang dikembalikan ke Better Auth dengan authClient.signIn.social() ketika Anda menggunakan:

  • Google
  • Apple
  • Facebook

Gunakan Better Auth Generic OAuth

Bagian berjudul “Gunakan Better Auth Generic OAuth”

Biarkan Better Auth mengelola alur pengalihan OAuth penuh ketika Anda menggunakan:

  • Bahasa target: Indonesia
  • Auth0
  • Okta
  • GitHub
  • __CAPGO_KEEP_0__
  • OneLogin

Jenis penyedia OAuth2 atau OIDC apa pun yang disesuaikan

Fungsi ini menjaga pertukaran sesi di sisi Better Auth dan menghindari duplikasi logika redirect antara dua sistem.

Konfigurasi server Better Auth

Judul bagian “Konfigurasi server Better Auth”

import { betterAuth } from 'better-auth';


export const auth = betterAuth({
  baseURL: process.env.BETTER_AUTH_URL,
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    },
    apple: {
      clientId: process.env.APPLE_CLIENT_ID as string,
      clientSecret: process.env.APPLE_CLIENT_SECRET as string,
      appBundleIdentifier: process.env.APPLE_APP_BUNDLE_IDENTIFIER as string,
    },
    facebook: {
      clientId: process.env.FACEBOOK_CLIENT_ID as string,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET as string,
    },
  },
  trustedOrigins: ['https://appleid.apple.com'],
});

Pengaturan Klien Better Auth

Judul Bagian “Pengaturan Klien Better Auth”
import { createAuthClient } from 'better-auth/client';


export const authClient = createAuthClient({
  baseURL: 'https://auth.example.com',
});

Jika Anda menggunakan React, gunakan paket klien Better Auth React yang digunakan oleh aplikasi Anda. Pola penyerahan token tetap sama.

Contoh Google

Judul Bagian “Contoh Google”

Integrasi ini adalah jalur yang paling bersih untuk sign-in Google native mobile:

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const googleResult = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['profile', 'email'],
  },
});


if (googleResult.result.responseType !== 'online' || !googleResult.result.idToken) {
  throw new Error('Google online mode with idToken is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'google',
  idToken: {
    token: googleResult.result.idToken,
    accessToken: googleResult.result.accessToken?.token,
  },
  callbackURL: '/dashboard',
});

Contoh Apple

Bagian berjudul “Contoh Apple”

Untuk Apple, kirim nonce yang sama ke kedua permintaan login native dan Better Auth:

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const nonce = crypto.randomUUID();


const appleResult = await SocialLogin.login({
  provider: 'apple',
  options: {
    scopes: ['email', 'name'],
    nonce,
  },
});


if (!appleResult.result.idToken) {
  throw new Error('Apple idToken is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'apple',
  idToken: {
    token: appleResult.result.idToken,
    nonce,
    accessToken: appleResult.result.accessToken?.token,
  },
  callbackURL: '/dashboard',
});

Contoh Facebook

Bagian berjudul “Contoh Facebook”

Dokumen Better Auth menjelaskan dua mode pengalihan Facebook:

  • iOS Login Terbatas: kirim idToken
  • Aliran Token Akses: kirim token akses sebagai token dan accessToken

Ini berfungsi dengan bentuk respons dari @capgo/capacitor-social-login:

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const facebookResult = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: ['email', 'public_profile'],
  },
});


const betterAuthToken = facebookResult.result.idToken
  ? {
      token: facebookResult.result.idToken,
    }
  : facebookResult.result.accessToken?.token
    ? {
        token: facebookResult.result.accessToken.token,
        accessToken: facebookResult.result.accessToken.token,
      }
    : null;


if (!betterAuthToken) {
  throw new Error('Facebook idToken or access token is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'facebook',
  idToken: betterAuthToken,
  callbackURL: '/dashboard',
});

Pemasok OAuth umum dengan Better Auth

Pemasok OAuth Generic dengan Better Auth

Untuk Auth0, Okta, Keycloak, GitHub, Microsoft Entra ID, dan pemasok lainnya yang mirip, plugin OAuth Generic Better Auth biasanya lebih cocok daripada melewati token dari SocialLogin.login({ provider: 'oauth2' }).

Server Better Auth

Pilih Salin ke Klipbord
import { betterAuth } from 'better-auth';
import { genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        {
          providerId: 'keycloak',
          discoveryUrl: 'https://sso.example.com/realms/mobile/.well-known/openid-configuration',
          clientId: process.env.KEYCLOAK_CLIENT_ID as string,
          clientSecret: process.env.KEYCLOAK_CLIENT_SECRET as string,
        },
      ],
    }),
  ],
});

Pilih Salin ke Klipbord

Contoh Pemasok untuk Better Auth Generic OAuth
import { createAuthClient } from 'better-auth/client';
import { genericOAuthClient } from 'better-auth/client/plugins';


export const authClient = createAuthClient({
  baseURL: 'https://auth.example.com',
  plugins: [genericOAuthClient()],
});


await authClient.signIn.oauth2({
  providerId: 'keycloak',
  callbackURL: '/dashboard',
});

Better Auth mengirimkan bantuan yang sudah dikonfigurasi untuk beberapa pemasok. Ini adalah yang paling dekat dengan contoh pemasok tambahan yang Anda lihat di dokumen plugin social-login.

Auth0

Contoh Pemasok untuk Better Auth Generic OAuth

Contoh Pemasok untuk Better Auth Generic OAuth

Bagian berjudul “Auth0”
import { betterAuth } from 'better-auth';
import { auth0, genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        auth0({
          providerId: 'auth0',
          domain: 'dev-example.eu.auth0.com',
          clientId: process.env.AUTH0_CLIENT_ID as string,
          clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'auth0',
  callbackURL: '/dashboard',
});

Microsoft Entra ID

Bagian berjudul “Microsoft Entra ID”
import { betterAuth } from 'better-auth';
import { genericOAuth, microsoftEntraId } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        microsoftEntraId({
          providerId: 'entra',
          tenantId: 'common',
          clientId: process.env.AZURE_CLIENT_ID as string,
          clientSecret: process.env.AZURE_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'User.Read'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'entra',
  callbackURL: '/dashboard',
});

Okta

Bagian berjudul “Okta”
import { betterAuth } from 'better-auth';
import { genericOAuth, okta } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        okta({
          providerId: 'okta',
          issuer: 'https://dev-12345.okta.com/oauth2/default',
          clientId: process.env.OKTA_CLIENT_ID as string,
          clientSecret: process.env.OKTA_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'okta',
  callbackURL: '/dashboard',
});

Keycloak

Bagian berjudul “Keycloak”
import { betterAuth } from 'better-auth';
import { genericOAuth, keycloak } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        keycloak({
          providerId: 'keycloak',
          issuer: 'https://sso.example.com/realms/mobile',
          clientId: process.env.KEYCLOAK_CLIENT_ID as string,
          clientSecret: process.env.KEYCLOAK_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'keycloak',
  callbackURL: '/dashboard',
});

GitHub dengan konfigurasi OAuth Generic manual

Bagian berjudul “GitHub dengan konfigurasi OAuth Generic manual”

GitHub tidak memiliki bantuan Better Auth di halaman OAuth Generic, jadi gunakan konfigurasi manual:

import { betterAuth } from 'better-auth';
import { genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        {
          providerId: 'github',
          clientId: process.env.GITHUB_CLIENT_ID as string,
          clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
          authorizationUrl: 'https://github.com/login/oauth/authorize',
          tokenUrl: 'https://github.com/login/oauth/access_token',
          userInfoUrl: 'https://api.github.com/user',
          scopes: ['read:user', 'user:email'],
          pkce: true,
        },
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'github',
  callbackURL: '/dashboard',
});

Catatan dan peringatan

Bagian berjudul “Catatan dan peringatan”

  1. Gunakan mode online Google Better Auth memerlukan idTokenJadi, ini bukan alur tangan-ke-tangan yang tepat. google.mode: 'offline' Ulangi nonce Apple

  2. Generate saja, kirim ke login native Apple, kemudian kirim nilai yang sama ke Better Auth. Handle Facebook secara berbeda berdasarkan platform.

  3. Login Terbatas di iOS memberikan Anda token ID. Alur-alur lain mungkin hanya memberikan token akses. Jangan campur aduk alur OAuth Generic kecuali Anda memiliki alasan.

  4. Jika Better Auth mengelola konfigurasi provider OAuth, biarkan Better Auth mengelola alur redirect juga. Baca lebih lanjut

Bab berjudul “Baca lebih lanjut”

Dokumen penyedia Google Better Auth

Teruskan dari Integrasi yang Lebih Baik

Judul Bagian “Teruskan dari Integrasi yang Lebih Baik”

Jika Anda menggunakan Integrasi yang Lebih Baik untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli di Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.