Ambil Kredensial

Developer Advocate in Tokyo

Meggin is a Tech Writer

Untuk memasukkan pengguna, ambil kredensial dari pengelola sandi di browser dan gunakan untuk memproses masuknya pengguna.

Untuk mengambil kredensial pengguna, gunakan navigator.credentials.get(), yang mengembalikan sebuah promise yang akan memproses dengan objek kredensial sebagai argumen. Objek kredensial yang diperoleh bisa berupa PasswordCredential atau FederatedCredential. Jika tidak ada informasi kredensial, null akan dikembalikan.

navigator.credentials.get({
  password: true,
  unmediated: false,
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
}).then(function(cred) {
  if (cred) {
    // Use provided credential to sign user in  
  }
});

Parameter `navigator.credentials.get`

Parameter
`password`	`Boolean` Setel ke `true` untuk mengambil `PasswordCredentials`. Default-nya adalah `false`.
`federated`	`Object` Objek yang menerima `provider` atau `protocol` sebagai kunci, yang memiliki larik parameter. Object `provider` menerima larik string yang mengidentifikasi penyedia. Saat ini, tidak ada browser yang mengimplementasikan `protocol`.
`unmediated`	`Boolean` Setel ke `true` agar tidak menampilkan UI pemilih akun.

Dapatkan kredensial

Dapatkan kredensial secara otomatis

Untuk memasukkan pengguna secara otomatis, minta objek kredensial dengan unmediated: true, segera setelah pengguna mendarat di situs web Anda, misalnya:

navigator.credentials.get({
  password: true,
  unmediated: true, // request a credential without user mediation
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
})

Notifikasi untuk pengguna yang masuk otomatis

Permintaan ini segera diproses dengan objek kredensial dan tidak akan menampilkan pemilih akun. Bila browser memperoleh informasi kredensial, notifikasi akan muncul:

Dapatkan kredensial melalui pemilih akun

Jika pengguna memerlukan mediasi, atau memiliki beberapa akun, gunakan pemilih akun agar pengguna bisa masuk, dan melewati formulir masuk biasa.

Pemilih akun biasanya dipanggil bila pengguna mengetuk tombol "Sign-In". Pengguna bisa memilih akun untuk masuk, misalnya:

Untuk mengaktifkan pemilih akun, setel properti unmediated ke false:

navigator.credentials.get({
  password: true,
  unmediated: false, // request a credential with user mediation
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
});

Setelah pengguna memilih akun yang ingin digunakan, promise akan memproses baik dengan PasswordCredential atau FederatedCredential berdasarkan pilihan mereka. Kemudian, tentukan tipe kredensial dan autentikasi pengguna dengan kredensial yang disediakan.

Jika pengguna membatalkan pemilih akun atau tidak ada kredensial yang tersimpan, promise memproses dengan nilai undefined. Dalam hal ini, mundur ke pengalaman formulir masuk.

Tentukan tipe kredensial

Bila navigator.credentials.get() diproses, maka akan mengembalikan undefined atau objek Credential. Untuk menentukan apakah ini PasswordCredential atau FederatedCredential, cukup lihat ke properti .type objek tersebut, yang akan berupa password atau federated.

Jika .type adalah federated, properti .provider adalah string yang menyatakan penyedia identitas.

Misalnya:

if (cred) {
  switch (cred.type) {
    case 'password':
      // authenticate with a server
      break;
    case 'federated':
      switch (cred.provider) {
        case 'https://accounts.google.com':
          // run google identity authentication flow
          break;
        case 'https://www.facebook.com':
          // run facebook identity authentication flow
          break;
      }
      break;
  }
} else {
  // auto sign-in not possible
}

Dalam hal nilai undefined, lanjutkan dengan pengguna dalam keadaan telah dikeluarkan.

Nilai undefined akan diteruskan bila:

Pengguna belum mengakui fitur proses masuk otomatis (sekali per instance browser).
Pengguna tidak memiliki kredensial atau lebih dari dua objek kredensial telah disimpan di asalnya.
Pengguna telah meminta untuk mengharuskan mediasi pengguna ke asalnya.

Autentikasi pengguna

Autentikasi dengan nama pengguna dan sandi

Untuk mengautentikasi pengguna dengan server Anda, POST PasswordCredential yang disediakan ke server dengan menggunakan fetch().

Bila telah di-POST-kan, fetch secara otomatis mengonversi objek PasswordCredential ke objek FormData yang dienkodekan sebagai multipart/form-data:

------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="id"

chromedemojp@gmail.com
------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="password"

testtest
------WebKitFormBoundaryOkstjzGAv8zab97W--

Parameter `PasswordCredential`

Objek PasswordCredential yang diperoleh menyertakan parameter berikut:

Parameter
`id`	`String` String identifier pengguna.
`password`	`String` Sandi transparan yang tidak bisa Anda peroleh menggunakan JavaScript.
`name`	`String` String nama pengguna.
`iconURL`	`String` String URL gambar ikon pengguna.

Ubah parameter

Dalam beberapa kasus, mungkin perlu menambahkan data tambahan ke POST autentikasi.

Ubah kunci param dengan menetapkan string ke .idName atau .passwordName.

Anda juga bisa menambahkan parameter ekstra seperti token cross-site request forgery (CSRF) dengan menetapkan .additionalData ke FormData dan menambahkan nilai-kunci padanya.

Setelah Anda mendapatkan objek kredensial:

if (cred) {
  if (cred.type == 'password') {
    // Use `email` instead of `id` for the id
    cred.idName = 'email';

    // Append CSRF Token
    var csrf_token = document.querySelector('#csrf_token').value;
    var form = new FormData();
    form.append('csrf_token', csrf_token);

    // Append additional credential data to `.additionalData`
    cred.additionalData = form;

    // `POST` the credential object.
    // id, password and the additional data will be encoded and
    // sent to the url as the HTTP body.
    fetch(url, {           // Make sure the URL is HTTPS
      method: 'POST',      // Use POST
      credentials: cred    // Add the password credential object
    }).then(function() {
      // continuation
    });
  }
}

Anda bisa melakukan hal serupa dengan menetapkan objek URLSearchParams sebagai ganti FormData ke .additionalData. Dalam hal ini, keseluruhan objek kredensial dienkodekan menggunakan application/x-www-form-urlencoded.

Autentikasi dengan penyedia identitas

Untuk mengautentikasi pengguna dengan penyedia identitas, cukup gunakan aliran autentikasi spesifik bersama FederatedCredential.

Misalnya, jika penyedianya adalah Google, gunakan pustaka JavaScript Google Sign-In:

// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();

// Is this user already signed in?
if (auth2.isSignedIn.get()) {
  var googleUser = auth2.currentUser.get();

  // Same user as in the credential object?
  if (googleUser.getBasicProfile().getEmail() === id) {
    // Continue with the signed-in user.
    return Promise.resolve(googleUser);
  }
}

// Otherwise, run a new authentication flow.
return auth2.signIn({
  login_hint: id || ''
});

Google Sign-In menghasilkan token ID sebagai bukti autentikasi yang Anda kirimkan ke server untuk membuat sesi.

Untuk penyedia identitas tambahan, lihat dokumentasinya masing-masing:

Keluar

Bila pengguna keluar dari situs web, Anda bertanggung jawab untuk memastikan pengguna tidak secara otomatis dimasukkan pada kunjungan berikutnya. Untuk menonaktifkan masuk otomatis, panggil navigator.credentials.requireUserMediation():

// After a user signing out...
navigator.credentials.requireUserMediation();

Kemudian, jika navigator.credentials.get() dipanggil bersama unmediated: true, maka akan mengembalikan undefined dan pengguna tidak akan dimasukkan. Ini hanya akan diingat untuk instance browser saat ini bagi asal ini.

Untuk melanjutkan masuk otomatis, pengguna bisa sengaja memilih masuk, dengan memilih akun yang ingin digunakan untuk masuk, dari pemilih akun. Maka, pengguna akan selalu dimasukkan kembali, hingga mereka secara eksplisit keluar.