Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kimlik bilgisi yönetimi API'sini kullanarak oturum açma akışını kolaylaştırma

Eiji Kitamura

Gelişmiş bir kullanıcı deneyimi sunmak için kullanıcılara yardımcı olmak kimlik doğrulaması yapmak isteyebilir. Kimliği doğrulanmış kullanıcıların etkileşimde bulunabileceği özel bir profil kullanarak birbirleriyle paylaşabilir, cihazlar arasında veri senkronize edebilir veya verileri işleyebilir çevrimdışıyken böyle devam eder. Ancak içerik oluşturmak, hatırlamak ve yazmak Şifreler, özellikle mobil ekranlarda son kullanıcılar için kullanışsızdır. Bu da onları farklı sitelerde aynı şifreleri kullanmaya yönlendiriyor. Bu elbette bir güvenlik riskidir.

Chrome'un en son sürümü (51), Credential Management API'yi destekler. Bu bir W3C'de yer alan ve geliştiricilere, standartlara uygun uygulama teklifi ve kullanıcıların daha kolay oturum açmasına yardımcı olur.

Credential Management API nedir?

Credential Management API, geliştiricilerin şifreleri depolamasına ve almasına olanak tanır kimlik bilgileri ile birleşik kimlik bilgilerini içerir ve 3 işlev sağlar:

navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()

Geliştiriciler bu basit API'leri kullanarak aşağıdakiler gibi güçlü işlemler yapabilir:

Kullanıcılar tek dokunuşla oturum açabilir.
Kullanıcının oturum açmak için kullandığı birleşik hesabı unutmayın.
Bir oturumun süresi dolduğunda kullanıcıların tekrar oturum açmasını sağlayın.

Chrome uygulamasında, kimlik bilgileri Chrome'un şifresinde saklanır üstlenirsiniz. Kullanıcılar Chrome'da oturum açmışsa kullanıcının şifrelerini senkronize edebilirler cihazlarda kullanabilirsiniz. Senkronize edilen bu şifreler Android uygulamalarıyla da paylaşılabilir Android için Şifreler için Smart Lock API'sini entegre eden platformlar arası sorunsuz bir deneyim için.

Credential Management API'yi sitenize entegre etme

Credential Management API'yi web sitenizle kullanma şekliniz çeşitli ürünler sunar. Tek sayfalık bir uygulama mı? Bu bir miras mı? mimariyi nasıl kullanıyorsun? Oturum açma formu yalnızca üst tarafta mı? kullanabilirsiniz. Oturum açma düğmeleri her yerde bulunuyor mu? Kullanıcılar, web sitenize anlamlı bir şekilde başka neler var? Federasyon pop-up pencerelerde çalışıyor mu? Yoksa birden çok sayfada etkileşim gerektirir?

Tüm bu vakaları ele almak neredeyse imkansızdır, ancak şimdi tipik bir tek sayfalık uygulamadır.

Üstteki sayfa bir kayıt formudur.
"Oturum Aç"a dokunarak kullanıcılar bir oturum açma formuna gider.
Hem kayıt hem de oturum açma formlarında tipik kimlik/şifre seçenekleri bulunur kimlik bilgileri ve federasyon, ör. Google ile Oturum Açma ve Facebook'ta Oturum Açma özelliklerini kullanabilirsiniz.

Kimlik Bilgisi Yönetimi API'sini kullanarak şunları ekleyebilirsiniz: ekleyin. Örneğin:

Oturum açarken hesap seçici göster: Yerel hesap seçici kullanıcı arayüzünü gösterir Kullanıcı "Oturum aç"a dokunduğunda.
Mağaza kimlik bilgileri: Başarılı oturum açtıktan sonra, daha sonra kullanılmak üzere tarayıcının şifre yöneticisine kimlik bilgilerini gönderir.
Kullanıcının otomatik olarak tekrar oturum açmasına izin ver: Bir kullanıcının bir oturum açmasını isterse oturumun süresi doldu.
Otomatik oturum açmayı uyumlulaştırma: Bir kullanıcı çıkış yaptıktan sonra için otomatik oturum açmayı devre dışı bırakın. kullanıcının bir sonraki ziyaretinde

Bir demo sitede uygulanmış olan bu özellikleri örnek koduyla deneyimleyebilirsiniz.

Oturum açarken Hesap Seçici'yi göster

Kullanıcı "Oturum Aç" düğmesine dokunduğunda bir oturum açma formuna gitmek için kullanabilir navigator.credentials.get() kimlik bilgisi bilgilerini almak için. Chrome, cihazın ekran görüntüsünde bulunan kullanıcı bir hesap seçebilir.

Kullanıcının oturum açmak üzere bir hesap seçmesi için açılan hesap seçici kullanıcı arayüzü. — Kullanıcının oturum açmak için bir hesap seçmesi için açılan hesap seçici kullanıcı arayüzü

Şifre kimlik bilgisi nesnesi alınıyor

Şifre kimlik bilgilerini hesap seçenekleri olarak göstermek için password: true işlevini kullanın.

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

Oturum açmak için şifre kimlik bilgisi kullanma

Kullanıcı bir hesap seçimi yaptıktan sonra, çözümleme işlevinde Şifre kimlik bilgisi. fetch() dosyasını kullanarak sunucuya gönderebilirsiniz:

    // continued from previous example
}).then(function(cred) {
    if (cred) {
    if (cred.type == 'password') {
        // Construct FormData object
        var form = new FormData();

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

        // You can append additional credential data to `.additionalData`
        cred.additionalData = form;

        // `POST` the credential object as `credentials`.
        // 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
        });
    } else if (cred.type == 'federated') {
        // continuation

Oturum açmak için birleşik kimlik bilgisi kullanma

Bir kullanıcıya birleşik hesapları göstermek için diziyi alacak federated öğesini ekleyin. kimlik sağlayıcıların get() seçeneklerine.

Şifre yöneticisine birden fazla hesap depolandığında. — Şifre yöneticisine birden fazla hesap depolandığında

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
    federated: {
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    }
}).then(function(cred) {
    // continuation
    ...

PasswordCredential olup olmadığını görmek için kimlik bilgisi nesnesinin type özelliğini inceleyebilirsiniz. (type == 'password') veya FederatedCredential (type == 'federated'). Kimlik bilgisi FederatedCredential, uygun API'yi, içerdiği bilgileri kullanarak çağırabilirsiniz.

    });
} else if (cred.type == 'federated') {
    // `provider` contains the identity provider string
    switch (cred.provider) {
    case 'https://accounts.google.com':
        // Federated login using Google Sign-In
        var auth2 = gapi.auth2.getAuthInstance();

        // In Google Sign-In library, you can specify an account.
        // Attempt to sign in with by using `login_hint`.
        return auth2.signIn({
        login_hint: cred.id || ''
        }).then(function(profile) {
        // continuation
        });
        break;

    case 'https://www.facebook.com':
        // Federated login using Facebook Login
        // continuation
        break;

    default:
        // show form
        break;
    }
}
// if the credential is `undefined`
} else {
// show form

Kimlik bilgilerini depola

Bir kullanıcı form kullanarak web sitenizde oturum açtığında navigator.credentials.store() depolamaya çalışın. Kullanıcıdan dosyayı depolaması veya depolamaması istenir. Şuna bağlı olarak: Kimlik bilgisi türünde new PasswordCredential() değerini kullanın veya new FederatedCredential() kimlik bilgisi nesnesini oluşturun.

Chrome, kullanıcılara kimlik bilgilerini (veya bir federasyon sağlayıcıyı) depolamak isteyip istemediklerini sorar. — Chrome, kullanıcılara kimlik bilgilerini (veya bir federasyon sağlayıcıyı) depolamak isteyip istemediklerini sorar

Bir form öğesinden şifre kimlik bilgisi oluşturma ve depolama

Aşağıdaki kod otomatik olarak autocomplete özelliklerini harita PasswordCredential'a gönderilen formların öğelerini nesne parametrelerinden kaçının.

HTML html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>.

JavaScript

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

Birleşik kimlik bilgisi oluşturma ve depolama

// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
    id: id,                                  // The id for the user
    name: name,                              // Optional user name
    provider: 'https://accounts.google.com',  // A string that represents the identity provider
    iconURL: iconUrl                         // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

Kullanıcının otomatik olarak tekrar oturum açmasına izin verme

Bir kullanıcı web sitenizden ayrılıp daha sonra geri geldiğinde, oturumun süresi doldu. Kullanıcı, her oturum açtığında şifresini girmesiyle geri dönebilir. Kullanıcının otomatik olarak tekrar oturum açmasına izin verin.

Kullanıcı otomatik olarak oturum açtığında bir bildirim gösterilir.

Kimlik bilgisi nesnesi alma

navigator.credentials.get({
    password: true, // Obtain password credentials or not
    federated: {    // Obtain federation credentials or not
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    },
    unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
    if (cred) {
    // auto sign-in possible
    ...
    } else {
    // auto sign-in not possible
    ...
    }
});

Kod, "Hesap Seçiciyi Göster" bölümünde gördüğünüz koda benzer olmalıdır Oturum açarken" bölümüne ekleyin. Tek fark, dönüşüm izlemeyi unmediated: true

Bu işlem, işlevi hemen çözer ve size Kullanıcının otomatik olarak oturum açmasını sağlar. Birkaç koşul vardır:

Kullanıcı, otomatik oturum açma özelliğini sıcak bir karşılamayla onaylamıştır.
Kullanıcı, Credential Management API'yi kullanarak web sitesinde daha önce oturum açtı.
Kullanıcının, kaynağınız için depolanan yalnızca bir kimlik bilgisi var.
Kullanıcı, önceki oturumda açıkça çıkış yapmadı.

Bu koşullardan herhangi biri karşılanmazsa işlev reddedilir.

Otomatik oturum açmayı uyumlulaştırma

Bir kullanıcı web sitenizden çıkış yaptığında oturumun otomatik olarak tekrar açılmayacağından emin olun. Emin olmak için Credential Management API, uyumlulaştırma adı verilen bir mekanizma sağlar. Uyumlulaştırma modunu navigator.credentials.requireUserMediation(). Kaynak için kullanıcının uyumlulaştırma durumu etkin olduğu sürece unmediated: true navigator.credentials.get() ile ayarlarsanız bu işlev undefined ile çözün.

Otomatik oturum açmayı uyumlulaştırma

navigator.credentials.requireUserMediation();

SSS

Web sitesindeki JavaScript'in ham verileri alması mümkün mü? şifre nedir? Hayır. Şifreleri yalnızca PasswordCredential kapsamında alabilirsiniz. şekilde açıklığa kavuşturulabilir.

Kimlik bilgisi kullanarak bir kimlik için 3 basamak grubu depolanabilir mi? Management API? Şu anda hayır. Spesifikasyonla ilgili geri bildiriminiz çok teşekkür ederiz.

Credential Management API'yi iframe içinde kullanabilir miyim? API, üst düzey bağlamlarla sınırlıdır. .get() veya .store() numaralı telefona yapılan aramalar etkisi hemen ortadan kalkar.

Şifre yönetimi Chrome uzantımı Kimlik Bilgisi ile entegre edebilir miyim? Management API? navigator.credentials yönergesini geçersiz kılıp Chrome Uzantınıza bağlayabilirsiniz. get() veya store() kimlik bilgileri.

Kaynaklar

Credential Management API hakkında daha fazla bilgi edinmek için Integration Guide (Entegrasyon Kılavuzu) başlıklı makaleyi inceleyin.