Kullanıcıların oturumunu açmak için tarayıcının şifre yöneticisinden kimlik bilgilerini alın ve kullanıcıların otomatik olarak giriş yapmasını sağlamak için bu bilgileri kullanın. Birden fazla hesabı olan kullanıcıların, hesap seçiciyi kullanarak tek bir dokunuşla hesabı seçmelerine olanak tanıyın.
Otomatik Oturum Aç
Otomatik oturum açma, web sitenizin yalnızca üst sayfasında değil, diğer yaprak sayfalarında da herhangi bir yerde gerçekleşebilir. Bu, kullanıcılar bir arama motoru aracılığıyla web sitenizdeki çeşitli sayfalara ulaştığında yararlıdır.
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 gidin.
Kimlik bilgisi bilgilerini alma
Kimlik bilgisi bilgilerini almak için navigator.credentials.get() yöntemini çağırın.
password veya federated değeri vererek, istenecek kimlik bilgilerinin türünü belirtin.
Otomatik oturum açmalarda her zaman mediation: 'silent' kullanın. Böylece kullanıcı:
- Depolanmış kimlik bilgisi yok.
- Birden çok kimlik bilgisi depolanıyor.
- Oturum kapalıysa.
Kimlik bilgisi almadan önce kullanıcının 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 döndürülen vaat, bir kimlik bilgisi nesnesi veya null ile çözümlenir.
PasswordCredential ve FederatedCredential olup olmadığını belirlemek için nesnenin password veya federated olacak .type özelliğine bakın.
.type değeri federated ise .provider özelliği, kimlik sağlayıcıyı temsil eden bir dizedir.
Kullanıcının kimliğini doğrula
Kimlik bilgisini aldıktan sonra, kimlik bilgisi türüne (password veya federated) bağlı olarak bir kimlik doğrulama akışı çalıştırın:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Vaat çözümlendiğinde, bir kimlik bilgisi nesnesi alıp almadığınızı kontrol edin. Görmüyorsanız otomatik oturum açma gerçekleştirilemiyor demektir. Otomatik oturum açma işlemini sessizce kapatın.
Kullanıcı arayüzünü güncelleyin
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, kimlik bilgisi nesnesini alırken kullanıcılara "Oturum açılıyor" ifadesini içeren mavi bir kısa mesaj görmeleri gerekir:
Önemli bir ipucu: Kimlik bilgisi nesnesi almada başarılı olmanıza rağmen 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 ile oturum açma
Bir kullanıcı uyumlulaştırma gerektiriyorsa veya birden fazla hesabı varsa, kullanıcının oturum açmasına izin vermek için hesap seçiciyi kullanın ve normal oturum açma formunu atlayın. Örneğin:
Hesap seçici aracılığıyla oturum açmaya ilişkin adımlar, otomatik oturum açma işlemindeki adımlarla aynıdır ve kimlik bilgileri almanın bir parçası olarak hesap seçiciyi gösteren ek bir çağrı içerir:
- Kimlik bilgisi bilgilerini alın ve hesap seçiciyi gösterir.
- Kullanıcının kimliğini doğrulayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya gidin.
Kimlik bilgisi bilgilerini alma ve hesap seçiciyi göster
Tanımlanmış bir kullanıcı işlemine (örneğin, kullanıcı "Oturum Aç" düğmesine dokunduğunda) yanıt olarak bir hesap seçici gösterin. navigator.credentials.get() numaralı telefonu arayın ve hesap seçiciyi göstermek için mediation: 'optional' veya mediation: 'required' 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 hesaba sahip kullanıcıların hesaplar arasında kolayca geçiş yapmasına olanak tanır.
mediation, optional olduğunda kullanıcıya navigator.credentials.preventSilentAccess() aramasından sonra oturum açması için açıkça bir hesap seçici gösterilir.
Bu normalde, kullanıcı oturumunu kapatmayı veya kaydını silmeyi seçtikten sonra otomatik oturum açma işleminin gerçekleşmemesini sağlamak içindir.
mediation: 'optional' öğesinin gösterildiği ö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,
kimlik bilgisi kimlik bilgisiyle nihai olarak ortaya çıkar.
Kullanıcılar hesap seçiciyi iptal ederse veya kayıtlı kimlik bilgileri yoksa söz, null ile sonlandırılır.
Bu durumda, oturum açma formu deneyimine geri dönün.
Oturum açma formuna geri dönmeyi unutmayın
Aşağıda belirtilen durumlardan herhangi biri nedeniyle oturum açma formuna geri dönmeniz gerekir:
- Kimlik bilgisi depolanmaz.
- Kullanıcı, 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 web sitenizin ek giriş bilgilerini hatırlamak zorunda kalmadan oturum açmasına olanak tanır.
Birleşik girişi uygulamak için:
- Kullanıcının kimliğini üçüncü taraf kimliğiyle doğrulayın.
- Kimlik bilgilerini saklayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya gidin (otomatik oturum açmada olduğu gibi).
Üçüncü taraf kimliğiyle kullanıcının kimliğini doğrulayın
Kullanıcı, birleşik giriş düğmesine dokunduğunda FederatedCredential ile belirli bir kimlik sağlayıcı kimlik doğrulama akışını çalıştırın.
Örneğin, sağlayıcı Google ise Google ile Oturum Açma JavaScript kitaplığını kullanın:
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, kimlik doğrulama kanıtı olarak bir kimlik jetonu sağlar.
Genel olarak birleşik girişler, OpenID Connect veya OAuth gibi standart protokoller temel alınarak derlenir. Birleştirilmiş hesaplarla nasıl kimlik doğrulama yapacağınızı öğrenmek için ilgili birleşik kimlik sağlayıcıların belgelerine bakın. Popüler örneklerden bazıları şunlardır:
Kimlik bilgilerini depola
Kimlik doğrulama tamamlandıktan sonra kimlik bilgilerini saklayabilirsiniz.
Burada saklayacağınız bilgiler, kimlik sağlayıcıdan gelen id ve kimlik sağlayıcıyı temsil eden bir sağlayıcı dizesidir (name ve iconURL isteğe bağlıdır).
Kimlik Bilgisi Yönetimi spesifikasyonunda bu bilgiler hakkında daha fazla bilgi edinin.
Birleşik hesap ayrıntılarını depolamak için kullanıcı tanımlayıcısı ve sağlayıcı tanımlayıcısıyla yeni bir FederatedCredential nesnesi örnek oluşturun.
Ardından kimlik bilgilerini depolamak için navigator.credentials.store() yöntemini çağırın.
Başarılı federasyondan sonra eşzamanlı veya eşzamansız olarak bir FederatedCredential başlatın:
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,
},
});
Ardından, 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, ardından 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
navigator.credentials.preventSilentAccess() numaralı telefonu arayın:
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Bu işlem, kullanıcının bir dahaki sefere otomatik oturum açmayı etkinleştirene kadar otomatik oturum açma işleminin gerçekleşmemesini sağlar. Otomatik oturum açmayı devam ettirmek için bir kullanıcı, hesap seçiciden oturum açmak istediği hesabı seçerek bilinçli olarak oturum açmayı tercih edebilir. Bu durumda, kullanıcı açık bir şekilde oturumu kapatana kadar bu kullanıcının oturumu her zaman tekrar açık kalır.