Postingan di Blogger wajib memakai REFRESHTOKEN - Code Blogger Firebase (Database)

hi kali ini admin akan menjelaskan apa itu REFRESHTOKEN:
dialam mengontrol postingan blogger dari luar kita membutuhkan Blogger API.
Kode ini bertujuan untuk mengelola proses otorisasi OAuth 2.0 dengan Google API, khususnya untuk mendapatkan dan menyimpan refresh token ke Firebase Firestore.

Berikut adalah penjelasan langkah demi langkah mengenai setiap bagian dari kode tersebut: Fungsi exchangeAuthCodeForTokens ini mengirim permintaan POST ke endpoint token Google untuk menukar kode otorisasi dengan token akses dan refresh token. Jika refresh token diterima, fungsi ini akan menyimpannya dengan memanggil saveRefreshToken.

Kode ini mengatur alur otorisasi OAuth 2.0 dengan Google, mulai dari mengarahkan pengguna untuk mendapatkan kode otorisasi, menukar kode tersebut dengan token akses dan refresh token, hingga menyimpan refresh token ke Firebase Firestore. Kode ini penting untuk mengelola akses berkelanjutan ke Google API (seperti Blogger API) tanpa perlu meminta otorisasi ulang dari pengguna.

Intinya REFRESHTOKEN adalah kode token spesial dimana anda harus menyimpanya dengan sangat rahasia karena postingan anda dapat ditampilkan ataupun (CRUD) jika mempunyai kode token ini. spesialnya adalah

1. Anda tidak perlu lagi meminta akses token setiap kali ingin posting di blogger
2. Tidak ada masa kadaluarsa untuk Refresh Token, sedangkan untuk akses token maksimal 1 jam saja
3. Anda mempunyai kekuasan penuh untuk CRUD dari luar Blogger, karena menggunakan Blogger API

<script>
// Ganti dengan informasi aplikasi OAuth 2.0 Anda
var clientId = &#Ganti dengan Client ID anda di google console';
var clientSecret = 'Ganti dengan Client Secreet anda di google console';
var redirectUri = 'https://domainANDA.com/p/....';
var scope = 'https://www.googleapis.com/auth/blogger';

// Fungsi untuk memperoleh kode otorisasi
function authorize() {
    var authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&access_type=offline&prompt=consent`;
    window.location.href = authUrl;
}

// Fungsi untuk menukar kode otorisasi dengan token akses dan refresh token
function exchangeAuthCodeForTokens(authCode) {
    fetch('https://oauth2.googleapis.com/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            code: authCode,
            client_id: clientId,
            client_secret: clientSecret,
            redirect_uri: redirectUri,
            grant_type: 'authorization_code'
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Response from token endpoint:', data); // Log entire response
        if (data.refresh_token) {
            console.log('Refresh token diterima:', data.refresh_token);
            // Panggil fungsi saveRefreshToken untuk menyimpan refresh token
            saveRefreshToken(data.refresh_token);
        } else {
            console.error('tidak ada response refresh token ditemukan', data);
        }
    })
    .catch(error => {
        console.error('Kesalahan exchanging auth code for tokens', error);
    });
}

// Fungsi untuk menyimpan refresh token ke Firebase Firestore
async function saveRefreshToken(refreshToken) {
    try {
        // Pastikan Anda telah menginisialisasi Firebase sebelumnya
        var db = firebase.firestore(); // Menggunakan Firestore dari Firebase

        // Simpan refresh token ke dokumen 'tokens' di Firestore
        await db.collection('tokens').doc('refreshToken').set({
            token: refreshToken
        });

        console.log('Refresh token saved to Firebase:', refreshToken);
      alert('Refresh token saved to Firebase: ' + refreshToken);
    } catch (error) {
        console.error('Error saving refresh token: ', error);
    }
}

// Setelah pengguna diarahkan kembali dengan kode otorisasi
const urlParams = new URLSearchParams(window.location.search);
const authCode = urlParams.get('code');

if (authCode) {
    // Tukarkan kode otorisasi dengan token akses dan refresh token
    exchangeAuthCodeForTokens(authCode);
}

// Mengekstrak token akses dari fragmen URL (jika ada)
const accessToken = window.location.hash.substring(1)
    .split('&')
    .find(param => param.startsWith('access_token='))
    ?.split('=')[1];

if (accessToken) {
    console.log('Access token dong:', accessToken);
}

</script>

<h1>Blogger API Integration</h1>
<button onclick="authorize()">Simpan Refresh Token</button>
<br>