Buka konsol

Melakukan Autentikasi Menggunakan Yahoo dengan JavaScript

Anda dapat mengizinkan pengguna untuk melakukan autentikasi dengan Firebase menggunakan penyedia OAuth seperti Yahoo, dengan mengintegrasikan Login OAuth umum ke aplikasi Anda menggunakan Firebase SDK untuk menjalankan alur login secara menyeluruh.

Sebelum memulai

Untuk membuat pengguna login menggunakan akun Yahoo, Anda harus terlebih dahulu mengaktifkan Yahoo sebagai penyedia login untuk project Firebase:

  1. Tambahkan Firebase ke project JavaScript.
  2. Di Firebase console, buka bagian Auth.
  3. Pada tab Metode login, aktifkan penyedia Yahoo.
  4. Tambahkan ID Klien dan Rahasia Klien dari konsol developer penyedia tersebut ke konfigurasi penyedia:
    1. Untuk mendaftarkan klien Oauth Yahoo, ikuti petunjuk Yahoo tentang pendaftaran aplikasi web dengan Yahoo.
    2. Saat mendaftarkan aplikasi dengan penyedia ini, pastikan untuk mendaftarkan domain *.firebaseapp.com untuk project sebagai domain pengalihan untuk aplikasi Anda.
  5. Klik Simpan.

Memproses alur login dengan Firebase SDK

Jika Anda sedang membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Yahoo-nya adalah dengan memproses seluruh alur login melalui Firebase JavaScript SDK.

Untuk memproses alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:

  1. Buat instance OAuthProvider menggunakan ID penyedia yahoo.com.

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    
  2. Opsional: Tentukan parameter OAuth kustom tambahan yang ingin dikirim dengan permintaan OAuth.

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });
    

    Untuk parameter yang didukung Yahoo, lihat dokumentasi OAuth Yahoo. Perlu diperhatikan bahwa Anda tidak dapat meneruskan beberapa parameter yang diperlukan Firebase dengan setCustomParameters(). Beberapa parameter tersebut antara lain client_id, redirect_uri,response_type, scope, dan state.

  3. Opsional: Tentukan cakupan OAuth 2.0 tambahan di luar profil dasar yang ingin diminta dari penyedia autentikasi. Jika aplikasi Anda memerlukan akses ke data pengguna pribadi dari Yahoo API, Anda harus meminta izin ke Yahoo API di bagian Izin API pada konsol developer Yahoo. Cakupan OAuth yang diminta harus sama persis dengan yang sudah dikonfigurasikan sebelumnya dalam izin API aplikasi. Misalnya, jika akses baca/tulis diminta untuk kontak pengguna dan dikonfigurasikan sebelumnya dalam izin API aplikasi, sdct-w harus diteruskan, bukan cakupan OAuth sdct-r dalam versi baca saja. Jika tidak, alur akan gagal dan error akan ditampilkan kepada pengguna akhir.

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');
    

    Untuk mempelajari lebih lanjut, baca dokumentasi cakupan Yahoo.

  4. Lakukan autentikasi dengan Firebase menggunakan objek penyedia OAuth. Anda dapat meminta pengguna untuk login dengan Akun Yahoo, baik dengan menampilkan jendela pop-up atau dengan beralih ke halaman login. Untuk perangkat seluler, sebaiknya menggunakan metode pengalihan.

    • Untuk login dengan jendela pop-up, panggil signInWithPopup:

      firebase.auth().signInWithPopup(provider)
        .then(function(result) {
          // User is signed in.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch(function(error) {
          // Handle error.
        });
      
    • Untuk login dengan beralih ke halaman login, panggil signInWithRedirect:

      firebase.auth().signInWithRedirect(provider);
      

      Setelah pengguna menyelesaikan login dan kembali ke halaman, Anda dapat memperoleh hasil login dengan memanggil getRedirectResult.

      firebase.auth().getRedirectResult()
        .then(function(result) {
          // User is signed in.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch(function(error) {
          // Handle error.
        });
      

    Setelah berhasil diselesaikan, token ID OAuth dan token akses yang terkait dengan penyedia dapat diambil dari objek firebase.auth.UserCredential yang ditampilkan.

    Dengan menggunakan token akses OAuth, Anda dapat memanggil Yahoo API.

    Misalnya, untuk mendapatkan informasi profil dasar, REST API berikut dapat dipanggil:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    Dengan YAHOO_USER_UID adalah ID pengguna Yahoo yang dapat diambil dari kolom firebase.auth().currentUser.providerData[0].uid atau dari result.additionalUserInfo.profile.

  5. Meskipun contoh di atas berfokus pada alur login, Anda juga dapat menautkan penyedia Yahoo ke pengguna yang ada menggunakan linkWithPopup/linkWithRedirect. Misalnya, Anda dapat menautkan beberapa penyedia ke pengguna yang sama, sehingga ia dapat login dengan salah satu penyedia tersebut.

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then(function(result) {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch(function(error) {
          // Handle error.
        });
    
  6. Pola yang sama dapat digunakan dengan reauthenticateWithPopup/reauthenticateWithRedirect, yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then(function(result) {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch(function(error) {
          // Handle error.
        });
    

Melakukan Autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus memberi akses untuk ID ekstensi Chrome:

  1. Buka project Anda di Firebase console.
  2. Di bagian Authentication, buka halaman Metode login.
  3. Tambahkan URI seperti berikut ke daftar Domain yang Diotorisasi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup (signInWithPopup dan linkWithPopup) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip background, bukan dari popup tindakan browser, karena popup autentikasi akan membatalkan popup tindakan browser.

Dalam file manifes ekstensi Chrome, pastikan Anda sudah menambahkan URL https://apis.google.com ke content_security_policy yang diizinkan.

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan dihubungkan ke kredensial, yaitu nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi, yang digunakan pengguna tersebut untuk login. Akun baru ini disimpan sebagai bagian dari project Firebase Anda dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam project Anda, terlepas dari cara pengguna login.

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menyetel observer pada objek Auth. Selanjutnya, Anda dapat memperoleh informasi profil dasar pengguna dari objek User. Lihat Mengelola Pengguna.

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda dapat memperoleh ID unik milik pengguna yang login dari variabel auth dan menggunakannya untuk mengontrol data yang dapat diakses pengguna.

Anda dapat mengizinkan pengguna untuk login ke aplikasi Anda menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Agar pengguna logout, panggil signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});