Kullanıcıların oturum açmasını sağlamak için tarayıcı şifresinden kimlik bilgilerini alın ve bunları kullanarak otomatik olarak kullanıcıların giriş yapmasını sağlayabilirsiniz. Birden fazla hesabı olan kullanıcılarda Hesap seçiciyi kullanarak tek bir dokunuşla hesabı seçmelerine izin verin.
Otomatik olarak oturum aç
Otomatik oturum açma, web sitenizin herhangi bir yerinde gerçekleşebilir; aynı zamanda üst kısımdaki diğer özellik sayfalarında da yer alır. Bu, kullanıcılar web sitenizdeki çeşitli sayfalara ulaştığında ve bir arama motoruyla.
Otomatik oturum açmayı etkinleştirmek için:
- Kimlik bilgisi bilgilerini alma.
- Kullanıcının kimliğini doğrulayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya geçin.
Kimlik bilgisi bilgilerini alma
Kimlik bilgisi bilgilerini almak için şunu çağırın:
navigator.credentials.get().
İstenecek kimlik bilgisi türünü belirtin
password veya federated vererek.
Otomatik oturum açmalar için her zaman mediation: 'silent' kullanın,
Böylece, kullanıcı aşağıdaki durumlarda işlemi kolayca reddedebilirsiniz:
- Depolanmış kimlik bilgisi yok.
- Depolanmış birden fazla kimlik bilgisi var.
- Oturum kapalıysa.
Yeterlilik Belgesi almadan önce kullanıcının zaten oturum açmış olup olmadığını kontrol etmeyi unutmayın:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
navigator.credentials.get() tarafından verilen söz çözüme ulaştırıldı
kimlik bilgisi nesnesiyle veya null ile değiştirin.
Bunun bir PasswordCredential mi yoksa FederatedCredential mi olduğunu belirlemek için
nesnenin .type özelliğine bakın,
Bu değer password veya federated olacak.
.type, federated ise
.provider özelliği, kimlik sağlayıcıyı temsil eden bir dizedir.
Kullanıcının kimliğini doğrulama
Yeterlilik Belgesi'ni edindikten sonra
Kimlik bilgilerinin türüne bağlı olarak bir kimlik doğrulama akışı çalıştırmak
password veya federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Vaat söz konusu olduğunda bir kimlik bilgisi nesnesi alıp almadığınızı kontrol edin. Bu bilgiler yoksa otomatik oturum açma işlemi gerçekleştirilemez. Otomatik oturum açma işlemini sessiz bir şekilde kapatın.
Kullanıcı arayüzünü güncelle
Kimlik doğrulama başarılı olursa kullanıcı arayüzünü güncelleyin veya kullanıcıyı kişiselleştirilmiş sayfaya yönlendirin:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Kimlik doğrulama hata mesajını göstermeyi unutmayın
Kullanıcıların kafasını karıştırmamak için kullanıcılara, "Oturum açılıyor" yazan mavi bir kısa mesaj gösterilir. kimlik bilgisi nesnesini alma sırasında:
Önemli bir ipucu: Kimlik bilgisi nesnesini başarılı bir şekilde alırsanız ancak kullanıcının kimliğini doğrulayamazsanız bir hata mesajı göstermeniz gerekir:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Tam kod örneği
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
showError('Sign-in Failed');
});
}
}
Hesap seçici aracılığıyla oturum açma
Bir kullanıcının uyumlulaştırmaya ihtiyacı varsa veya birden fazla hesabı varsa kullanıcının oturum açmasına izin vermek için hesap seçiciyi kullanın. oturum açma formunu atlayana kadar, örneğin:
Hesap seçici üzerinden oturum açmak için izlenecek adımlar aşağıda anlatıldığı gibidir: otomatik oturum açma, hesap seçiciyi gösteren ek bir çağrı ile şunları yapabilirsiniz:
- Kimlik bilgisi bilgilerini alın ve hesap seçiciyi gösterin.
- Kullanıcının kimliğini doğrulayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya geçin.
Kimlik bilgisi bilgilerini al ve hesap seçiciyi göster
Tanımlanan kullanıcı işlemine yanıt olarak bir hesap seçici gösterme
Örneğin, kullanıcı "Oturum Aç"a dokunduğunda düğmesini tıklayın. Telefonla arama
navigator.credentials.get(),
ve hesap seçiciyi göstermek için mediation: 'optional' veya mediation: 'required' öğesini ekleyin.
mediation required olduğunda, kullanıcıya oturum açması için her zaman bir hesap seçici gösterilir.
Bu seçenek, birden fazla hesabı olan kullanıcıların bu hesaplar arasında kolayca geçiş yapmasına olanak tanır.
mediation optional olduğunda,
kullanıcıya oturum açması için açık bir şekilde bir hesap seçici gösterilir.
navigator.credentials.preventSilentAccess()
çağrısına bir tıklama URL'si eklemeniz gerekir.
Bu işlem, genellikle otomatik oturum açma işleminin başlatılmadığından emin olmak için yapılır.
Kullanıcı oturumunu kapatmayı veya kaydını iptal etmeyi seçtikten sonra.
mediation: 'optional' gösteren örnek:
var signin = document.querySelector('#signin');
signin.addEventListener('click', e => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials.get({
password: true,
federated: {
providers: [
'https://accounts.google.com'
]
},
mediation: 'optional'
}).then(c => {
Kullanıcı bir hesap seçtiğinde,
yeterlilik belgesiyle birlikte sonuç verilir.
Kullanıcılar hesap seçiciyi iptal ederse
veya depolanmış kimlik bilgisi yoksa
taahhüt null ile gerçekleştirilecek.
Bu durumda, oturum açma formu deneyimine geri dönün.
Oturum açma formuna dönmeyi unutmayın
Aşağıdaki durumlardan biri söz konusu olduğunda oturum açma formu kullanmanız gerekir:
- Depolanan kimlik bilgisi yok.
- Kullanıcı bir hesap seçmeden hesap seçiciyi kapattı.
- API kullanılamıyor.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Tam kod örneği
var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'optional',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
})
.catch((error) => {
location.href = '/signin';
});
}
});
Birleşik Giriş
Birleşik giriş, kullanıcıların tek bir dokunuşla oturum açmasına ve Böylece web sitenizin ek giriş bilgilerini hatırlamak zorunda kalmazsınız.
Birleşik girişi uygulamak için:
- Kullanıcının kimliğini üçüncü taraf kimliğiyle doğrulayın.
- Kimlik bilgilerini depolayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya gidin (otomatik oturum açmayla aynı).
Üçüncü taraf kimliğiyle kullanıcının kimliğini doğrulama
Bir kullanıcı birleşik giriş düğmesine dokunduğunda,
ilgili kimlik sağlayıcı kimlik doğrulama akışını
FederatedCredential.
Örneğin, sağlayıcı Google ise Google ile Oturum Açma JavaScript kitaplığı:
navigator.credentials
.get({
password: true,
mediation: 'optional',
federated: {
providers: ['https://account.google.com'],
},
})
.then(function (cred) {
if (cred) {
// 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() === cred.id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || '',
});
}
});
Google ile Oturum Açma işlevi, kimlik doğrulama kanıtı olarak bir kimlik jetonu sağlar.
Genel olarak, birleşik girişler aşağıdaki gibi standart protokollerin üzerine kurulur: COPPA Connect veya OAuth. Birleşik hesaplarla kimlik doğrulamayı öğrenmek için ilgili birleşik kimlik sağlayıcılarına bakın dokümanlar. Popüler örnekler arasında şunlar yer alır:
Kimlik bilgilerini depola
Kimlik doğrulama tamamlandıktan sonra kimlik bilgilerini saklayabilirsiniz.
Burada depolayacağınız bilgiler, kimlik sağlayıcının id numarasıdır
ve kimlik sağlayıcıyı temsil eden bir sağlayıcı dizesi
(name ve iconURL isteğe bağlıdır).
Bu bilgiler hakkında daha fazla bilgiyi
Kimlik Bilgisi Yönetimi spesifikasyonu.
Birleşik hesap ayrıntılarını depolamak için yeni bir
FederatedCredential
kullanıcının tanımlayıcısını ve sağlayıcının tanımlayıcısını içeren bir nesne kullanmaktır.
Sonra çağır
navigator.credentials.store()
kimlik bilgilerini saklaması gerekir.
Başarılı federasyondan sonra,
eşzamanlı veya eşzamansız olarak FederatedCredential örneği oluşturma:
Eşzamanlı yaklaşım örneği:
// Create credential object synchronously.
var cred = new FederatedCredential({
id: id, // id in IdP
provider: 'https://account.google.com', // A string representing IdP
name: name, // name in IdP
iconURL: iconUrl, // Profile image url
});
Eşzamansız yaklaşıma örnek:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Daha sonra, kimlik bilgisi nesnesini depolayın:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Oturumu kapat
Oturumu kapatma düğmesine dokunulduğunda kullanıcılarınızın oturumunu kapatın. Önce oturumu sonlandırın, ve gelecekteki ziyaretler için otomatik oturum açmayı kapatın. (Oturumlarınızı nasıl sonlandıracağınız tamamen size bağlıdır.)
Gelecekteki ziyaretler için otomatik oturum açmayı kapat
Telefonla arama
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Bu işlem, kullanıcı otomatik oturum açmayı bir sonraki sefer etkinleştirene kadar otomatik oturum açma işleminin gerçekleşmemesini sağlar. Otomatik oturum açmayı sürdürmek için kullanıcı bilinçli olarak oturum açmayı seçebilir hesap seçiciden oturum açmak istedikleri hesabı seçerek. Bu durumda kullanıcı, oturumunu açıkça kapatana kadar her zaman tekrar oturum açmış olur.