Bermigrasi dari Login dengan Google

Panduan ini membantu Anda memahami perubahan dan langkah yang diperlukan untuk berhasil memigrasikan library JavaScript dari skrip Login dengan Google library platform ke library Google Identity Services yang lebih baru untuk autentikasi.

Jika klien Anda menggunakan Library Klien Google API untuk JavaScript atau library sebelumnya untuk otorisasi, lihat Bermigrasi ke Google Identity Layanan untuk mengetahui informasi selengkapnya.

Autentikasi dan otorisasi

Autentikasi menetapkan siapa seseorang, dan biasanya disebut sebagai pendaftaran atau login pengguna. Otorisasi adalah proses pemberian atau menolak akses ke data atau sumber daya. Misalnya, aplikasi Anda meminta izin pengguna untuk mengakses Google Drive pengguna.

Seperti library platform Login dengan Google sebelumnya, Google Identity Library layanan dibuat untuk mendukung autentikasi dan otorisasi proses-proses tersebut.

Namun, library yang lebih baru memisahkan kedua proses tersebut untuk mengurangi kompleksitas developer untuk mengintegrasikan Akun Google dengan aplikasi Anda.

Jika kasus penggunaan Anda hanya terkait dengan autentikasi, lanjutkan membaca halaman ini.

Jika kasus penggunaan Anda mencakup otorisasi, baca Cara kerja otorisasi pengguna dan Migrate to Google Identity Services untuk memastikan aplikasi Anda menggunakan API yang baru dan ditingkatkan kualitasnya.

Yang berubah

Untuk pengguna, library Google Identity Services yang baru menawarkan berbagai peningkatan {i>usability <i}(kegunaan){i>.<i} Sorotan mencakup:

• Alur baru dengan fitur Sekali Ketuk dan Login otomatis yang lebih lancar langkah,
• tombol {i>sign-in<i} yang diperbarui dengan personalisasi pengguna,
• branding yang konsisten dan perilaku login yang seragam di seluruh web pemahaman dan kepercayaan,
• mengakses konten dengan cepat; pengguna dapat langsung mendaftar dan login dari mana saja di situs Anda tanpa terlebih dahulu harus mengunjungi halaman {i>login<i} atau akun.

Bagi developer, fokus kami adalah mengurangi kerumitan, meningkatkan keamanan, dan membuat integrasi Anda secepat mungkin. Beberapa peningkatan ini mencakup:

• Opsi untuk menambahkan login pengguna ke konten statis situs Anda hanya dengan HTML,
• pemisahan otentikasi {i>login<i} dari otorisasi dan berbagi data pengguna, kompleksitas integrasi OAuth 2.0 tidak lagi diperlukan untuk membuat pengguna masuk ke situs Anda,
• mode {i>popup<i} dan pengalihan akan terus didukung, tetapi Infrastruktur 2.0 sekarang mengalihkan ke endpoint login server backend Anda,
• konsolidasi kemampuan dari kedua layanan Google Identity dan library JavaScript Google API ke dalam satu library baru,
• untuk respons masuk, Anda kini harus memutuskan apakah akan menggunakan Promise dan pengalihan melalui fungsi gaya pengambil memiliki dihapus agar lebih praktis.

Contoh migrasi login

Jika Anda bermigrasi dari tombol Login dengan Google yang sudah ada dan hanya tertarik untuk memasukkan pengguna ke situs Anda, perubahan yang paling mudah adalah untuk memperbarui ke tombol baru yang dipersonalisasi. Hal ini dapat dilakukan dengan menukar Library JavaScript dan mengupdate codebase Anda untuk menggunakan objek login baru.

Library dan konfigurasi

Library platform Login dengan Google sebelumnya: apis.google.com/js/platform.js, dan library klien Google API untuk JavaScript: gapi.client, tidak lagi diperlukan untuk otentikasi dan otorisasi pengguna. Mereka telah diganti dengan satu library JavaScript Google Identity Services yang baru: accounts.google.com/gsi/client.

Tiga modul JavaScript sebelumnya: api, client, dan platform digunakan untuk semua proses login dimuat dari apis.google.com. Untuk membantu Anda mengidentifikasi lokasi tempat library sebelumnya mungkin disertakan dalam situs Anda, biasanya:

• tombol login default akan memuat apis.google.com/js/platform.js,
• gambar tombol kustom memuat apis.google.com/js/api:client.js, dan
• penggunaan langsung gapi.client memuat apis.google.com/js/api.js.

Pada umumnya, Anda dapat terus menggunakan Client-ID aplikasi web Anda yang sudah ada memiliki kredensial yang lengkap. Sebagai bagian dari migrasi Anda, sebaiknya tinjau Kebijakan OAuth 2.0 dan gunakan Konsol API Google untuk mengonfirmasi, dan jika perlu, perbarui setelan klien berikut:

• aplikasi pengujian dan produksi Anda menggunakan Project terpisah dan memiliki Client-ID,
• Jenis Client ID OAuth 2.0 adalah "Web application", dan
• HTTPS digunakan untuk origin JavaScript yang Diotorisasi dan URI pengalihan.

Identifikasi kode dan pengujian yang terpengaruh

Cookie debug dapat membantu menemukan kode yang terpengaruh dan menguji pasca-penghentian perilaku model.

Di aplikasi yang besar atau kompleks, mungkin sulit untuk menemukan semua kode yang terpengaruh oleh penghentian penggunaan modul gapi.auth2. Untuk mencatat penggunaan yang ada, kemampuan yang tidak digunakan lagi ke konsol, tetapkan nilai G_AUTH2_MIGRATION cookie ke informational. Opsional, tambahkan titik dua diikuti dengan nilai kunci untuk juga mencatat log ke penyimpanan sesi. Setelah login dan menerima kredensial meninjau atau mengirim log yang dikumpulkan ke {i>backend<i} untuk dianalisis. Sebagai misalnya, informational:showauth2use menyimpan origin dan URL ke penyimpanan sesi kunci bernama showauth2use.

Untuk memverifikasi perilaku aplikasi saat modul gapi.auth2 tidak lagi dimuat, setel cookie G_AUTH2_MIGRATION menjadi enforced. Hal ini memungkinkan pengujian perilaku pasca-penghentian sebelum tanggal penegakan kebijakan.

Nilai cookie G_AUTH2_MIGRATION yang mungkin:

• enforced Jangan muat modul gapi.auth2.
• informational Catat penggunaan kemampuan yang tidak digunakan lagi ke konsol JS. Juga catat ke penyimpanan sesi jika nama kunci opsional ditetapkan: informational:key-name.

Untuk meminimalkan dampak terhadap pengguna, sebaiknya tetapkan cookie ini secara lokal terlebih dahulu selama pengembangan dan pengujian, sebelum menggunakannya di lingkungan produksi.

HTML dan JavaScript

Dalam skenario proses masuk khusus autentikasi ini, contoh kode dan rendering tombol Login dengan Google yang ada akan ditampilkan. Pilih dari Pop-up atau Pengalihan untuk melihat perbedaan dalam cara penanganan respons otentikasi oleh callback JavaScript atau dengan pengalihan aman ke login server backend Anda endpoint.

Cara sebelumnya

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

Cara baru

Untuk menggunakan library baru dalam skenario login khusus autentikasi, pilih dari mode Pop-up atau Pengalihan dan gunakan contoh kode untuk mengganti implementasi yang ada pada halaman {i>login<i} Anda.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Dalam contoh khusus autentikasi ini, accounts.google.com/gsi/client baru library, class g_id_signin, dan objek g_id_onload menggantikan yang sebelumnya library apis.google.com/js/platform.js dan objek g-signin2.

Selain merender tombol baru yang dipersonalisasi, kode contoh juga menampilkan pop-up Sekali Ketuk yang baru. Di mana pun Anda menampilkan tombol yang dipersonalisasi, kami sebaiknya Anda juga menampilkan pop-up Sekali Ketuk untuk meminimalkan hambatan selama mendaftar dan masuk.

Meskipun tidak direkomendasikan karena meningkatnya hambatan saat login, tombol yang dipersonalisasi dapat ditampilkan sendiri, tanpa secara bersamaan menampilkan Dialog Sekali Ketuk. Untuk melakukannya, setel atribut data-auto_prompt ke false.

API HTML dan JavaScript

Contoh sebelumnya menunjukkan cara menggunakan HTML API yang baru untuk menambahkan login ke untuk situs Anda. Atau, Anda dapat menggunakan fungsi ekuivalen JavaScript API, atau memadupadankan API HTML dan JavaScript di seluruh situs Anda.

Untuk melihat opsi penyesuaian tombol secara interaktif seperti, jenis callback dan seperti: warna, ukuran, bentuk, teks dan tema, lihat Kode generator. Tabel ini dapat digunakan untuk membandingkan berbagai opsi dengan cepat dan membuat Cuplikan HTML untuk digunakan di situs Anda.

Login dari halaman mana saja dengan Sekali Ketuk

Sekali Ketuk adalah cara baru yang mudah bagi pengguna untuk mendaftar atau login ke situs Anda. Ini memungkinkan Anda mengaktifkan login pengguna langsung dari halaman mana pun di situs Anda dan sehingga pengguna tidak perlu mengunjungi halaman {i>login<i} khusus. Dengan kata lain, Hal ini akan mengurangi hambatan saat mendaftar dan login dengan memberikan fleksibilitas kepada pengguna untuk mendaftar dan masuk dari laman selain laman {i>login<i} Anda.

Untuk mengaktifkan login dari halaman mana pun, sebaiknya sertakan g_id_onload dalam {i>header<i}, {i>footer<i} bersama, atau objek lainnya yang tercakup di seluruh situs Anda.

Sebaiknya tambahkan juga g_id_signin, yang menampilkan login yang dipersonalisasi hanya di halaman login atau pengelolaan akun pengguna. Memberikan pilihan kepada pengguna untuk mendaftar atau login dengan menampilkan tombol tersebut bersama tombol Penyedia Identitas serta kolom entri nama pengguna dan sandi.

Respons token

Login pengguna tidak lagi mengharuskan Anda memahami atau menggunakan OAuth 2.0 kode otorisasi, token akses, atau token pembaruan. Sebagai gantinya, Token Web JSON (JWT) Token ID digunakan untuk berbagi status login dan profil pengguna. Sebagai seorang penyederhanaan lebih lanjut, Anda tidak perlu lagi menggunakan kata "pengambil" gaya metode pengakses untuk bekerja dengan data profil pengguna.

Kredensial token ID JWT aman yang ditandatangani Google akan ditampilkan:

• ke handler callback JavaScript berbasis browser pengguna dalam mode Pop-up, atau
• ke server backend Anda melalui pengalihan Google ke endpoint login Anda saat tombol Login Dengan Google ux_mode disetel ke redirect.

Pada kedua kasus tersebut, perbarui pengendali callback yang ada dengan menghapus:

• panggilan ke googleUser.getBasicProfile(),
• referensi ke BasicProfile, dan panggilan terkait ke getId(), getName(), getGivenName(), getFamilyName(), getImageUrl(), metode getEmail(), dan
• penggunaan objek AuthResponse.

Sebagai gantinya, gunakan referensi langsung ke sub-kolom credential di JWT baru CredentialResponse agar berfungsi dengan data profil pengguna.

Selain itu, dan hanya untuk mode Pengalihan, pastikan untuk mencegah Permintaan Lintas Situs Pemalsuan (CSRF) dan Verifikasi token ID Google di server backend.

Untuk lebih memahami bagaimana pengguna berinteraksi dengan situs Anda, Kolom select_by di CredentialResponse dapat digunakan untuk menentukan pengguna hasil izin pengguna dan alur login spesifik yang digunakan.

Persetujuan pengguna dan mencabut izin

Saat pengguna pertama kali login ke situs Anda, Google akan meminta izin pengguna untuk membagikan profil akunnya ke aplikasi Anda. Hanya setelah memberikan izin profil pengguna yang dibagikan ke aplikasi Anda dalam payload kredensial token ID. Mencabut akses ke profil ini sama dengan mencabut token akses di {i>login<i} sebelumnya.

Pengguna dapat mencabut izin dan memutuskan koneksi aplikasi Anda dari Akun Google mereka dengan membuka https://myaccount.google.com/permissions. Atau, koneksi dapat terputus langsung dari aplikasi Anda dengan memicu API panggilan yang Anda implementasikan; metode disconnect sebelumnya telah diganti dengan metode revoke yang lebih baru.

Saat pengguna menghapus akunnya di platform Anda, praktik terbaik adalah menggunakan revoke untuk memutuskan koneksi aplikasi Anda dari Akun Google mereka.

Sebelumnya, auth2.signOut() dapat digunakan untuk membantu mengelola logout pengguna dari aplikasi Anda. Semua penggunaan auth2.signOut() harus dihapus, dan aplikasi Anda harus mengelola status sesi dan status login per pengguna secara langsung.

Status sesi dan Pemroses

Library baru tidak mempertahankan status login atau status sesi untuk web Anda .

Status login Akun Google, dan status sesi aplikasi Anda, serta status login adalah konsep yang berbeda dan terpisah.

Status login pengguna ke Akun Google mereka dan aplikasi Anda tidak bergantung pada status login pengguna lainnya, kecuali selama momen masuk itu sendiri ketika Anda tahu bahwa pengguna berhasil diautentikasi dan login ke Akun Google mereka.

Jika Login dengan Google, Sekali Ketuk, atau Login otomatis disertakan di pengguna di situs harus terlebih dahulu login ke Akun Google mereka untuk:

• memberikan persetujuan untuk membagikan profil pengguna mereka saat pertama kali mendaftar atau login ke situs Anda,
• dan log in saat kunjungan kembali ke situs.

Pengguna dapat tetap login, logout, atau beralih ke Akun Google lain sambil mempertahankan sesi login yang aktif di situs Anda.

Anda sekarang bertanggung jawab untuk mengelola langsung status {i>login<i} bagi pengguna aplikasi web Anda. Sebelumnya, Login dengan Google membantu Memantau status sesi.

Hapus semua referensi ke auth2.attachClickHandler() dan referensi yang terdaftar pengendali callback.

Sebelumnya, Pemroses digunakan untuk membagikan perubahan status login untuk Akun Google pengguna. Pemroses tidak lagi didukung.

Hapus semua referensi ke listen(), auth2.currentUser, dan auth2.isSignedIn.

Kukis

Login dengan Google membatasi penggunaan cookie, yang merupakan deskripsi cookie ini mengikuti. Lihat Cara Google menggunakan cookie untuk mengetahui informasi lebih lanjut mengenai jenis cookie lain yang digunakan oleh Google.

Cookie G_ENABLED_IDPS yang ditetapkan oleh Library Platform Login dengan Google sebelumnya tidak digunakan lagi.

Library Google Identity Services yang baru dapat secara opsional menetapkan setelan lintas-domain ini berdasarkan opsi konfigurasi Anda:

• g_state menyimpan status logout pengguna dan disetel saat menggunakan fitur Sekali Ketuk {i>pop-up<i} atau {i>Otomatis sign-in<i},

• g_csrf_token adalah cookie pengiriman ganda yang digunakan untuk mencegah serangan CSRF dan disetel kapan endpoint login Anda dipanggil. Nilai untuk URI login Anda dapat ditetapkan secara eksplisit atau mungkin ditetapkan secara default ke URI halaman saat ini. Nama endpoint login dapat dipanggil dalam kondisi berikut saat menggunakan:

  • HTML API dengan data-ux_mode=redirect atau jika data-login_uri adalah atur, atau

  • JavaScript API dengan ux_mode=redirect dan tempat google.accounts.id.prompt() tidak digunakan untuk menampilkan Sekali Ketuk atau Login otomatis.

Jika Anda memiliki layanan yang mengelola cookie, pastikan untuk menambahkan kedua cookie baru dan menghapus cookie sebelumnya saat migrasi selesai.

Jika Anda mengelola beberapa domain atau subdomain, lihat Display Sekali Ketuk Subdomain untuk mendapatkan petunjuk lebih lanjut tentang cara menggunakan cookie g_state.

Referensi migrasi objek untuk login pengguna