Kullanıcıların oturum açmasını sağlama

Eiji Kitamura

Meggin Kearney

Kullanıcıların oturum açması için tarayıcının şifre yöneticisinden kimlik bilgilerini alın ve kullanıcıların otomatik olarak giriş yapması için bu bilgileri kullanın. Birden fazla hesabı olan kullanıcıların, hesap seçiciyi kullanarak tek dokunuşla hesap seçmesine olanak tanıyın.

Otomatik olarak oturum aç

Otomatik oturum açma, web sitenizin herhangi bir yerinde (yalnızca üst sayfada değil, diğer özellik sayfalarında da) gerçekleşebilir. Bu, kullanıcılar web sitenizdeki çeşitli sayfalara bir arama motoru aracılığıyla ulaştığında yararlıdır.

Otomatik oturum açmayı etkinleştirmek için:

1. Kimlik bilgilerini alma
2. Kullanıcının kimliğini doğrulayın.
3. Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya gidin.

Kimlik bilgilerini alma

Browser Support

• 51
• 18
• 60
• 13

Source

Kimlik bilgisi bilgilerini almak için navigator.credentials.get() işlevini çağırın. password veya federated vererek istenecek kimlik bilgilerinin türünü belirtin.

Otomatik oturum açma işlemleri için her zaman mediation: 'silent' kullanın. Böylece, kullanıcı aşağıdaki durumlarda işlemi kolayca iptal edebilir:

• Depolanmış kimlik bilgisi içermez.
• Birden fazla kimlik bilgisi depolanmış.
• Oturum açmamış olan kullanıcılar

Kimlik bilgisi almadan önce kullanıcının oturum açıp açmadığı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 promise, bir kimlik bilgisi nesnesi veya null ile çözümlenir. PasswordCredential mı yoksa FederatedCredential mı olduğunu belirlemek için nesnenin .type özelliğine bakmanız yeterlidir. Bu özellik password veya federated olur.

.type, federated ise .provider özelliği, kimlik sağlayıcıyı temsil eden bir dizedir.

Kullanıcının kimliğini doğrulama

Kimlik bilgisine sahip olduktan sonra, kimlik bilgisi türüne bağlı olarak bir kimlik doğrulama akışı çalıştırın (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();
     }

Promise çözümlendiğinde bir kimlik bilgisi nesnesi alıp almadığınızı kontrol edin. Aksi takdirde, otomatik oturum açma işlemi gerçekleşememiş demektir. Otomatik oturum açma işlemini sessizce kapatın.

Kullanıcı arayüzünü güncelleme

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 hatası mesajını göstermeyi unutmayın.

Kullanıcıların kafasının karışmaması için kimlik bilgisi nesnesini alırken "Oturum açılıyor" yazan mavi bir bildirim görmeleri gerekir:

Önemli bir ipucu: Kimlik bilgisi nesnesini başarıyla elde etmenize 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 aracılığıyla oturum açma

Kullanıcının aracılığa ihtiyacı varsa veya birden fazla hesabı varsa kullanıcının oturum açmasına izin vermek için hesap seçiciyi kullanın, normal oturum açma formunu atlayın, örneğin:

Hesap seçici aracılığıyla oturum açma adımları, otomatik oturum açma ile aynıdır. Kimlik bilgileri alınırken hesap seçiciyi göstermek için ek bir çağrı yapılır:

1. Kimlik bilgilerini alma ve hesap seçiciyi gösterme
2. Kullanıcının kimliğini doğrulayın.
3. Kullanıcı arayüzünü güncelleme veya kişiselleştirilmiş bir sayfaya gitme

Kimlik bilgisi alma ve hesap seçiciyi gösterme

Tanımlanmış bir kullanıcı işlemine (ör. kullanıcının "Oturum Aç" düğmesine dokunması) yanıt olarak bir hesap seçici gösterin. navigator.credentials.get() yöntemini çağırın ve hesap seçiciyi göstermek için mediation: 'optional' veya mediation: 'required' parametresini 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 hesaplar arasında kolayca geçiş yapmasına olanak tanır. mediation, optional olduğunda kullanıcıya, navigator.credentials.preventSilentAccess() çağrısından sonra oturum açması için açıkça bir hesap seçici gösterilir. Bu durum genellikle, kullanıcı oturumu kapatmayı veya kaydı iptal etmeyi seçtikten sonra otomatik oturum açma işleminin gerçekleşmemesini sağlamak için kullanılır.

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çtikten sonra promise, kimlik bilgisiyle çözümlenir. Kullanıcı hesap seçiciyi iptal ederse veya depolanmış kimlik bilgisi yoksa promise null ile çözümlenir. Bu durumda, oturum açma formu deneyimine geri dönün.

Oturum açma formuna geri dönmeyi unutmayın

Aşağıdaki nedenlerden herhangi biri nedeniyle oturum açma formuna geri dönmeniz gerekir:

• Kimlik bilgileri 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 dokunuşla ve web siteniz için ek giriş bilgilerini hatırlamak zorunda kalmadan oturum açmasına olanak tanır.

Birleşik girişi uygulamak için:

1. Kullanıcının kimliğini üçüncü taraf kimliğiyle doğrulama
2. Kimlik bilgilerini saklama
3. Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya gidin (otomatik oturum açma ile aynı).

Üçüncü taraf kimliğiyle kullanıcı kimliğini doğrulama

Kullanıcı bir birleşik giriş düğmesine dokunduğunda FederatedCredential ile belirli kimlik sağlayıcı kimlik doğrulama akışını çalıştırın.

Browser Support

• 51
• 79
• x
• x

Source

Ö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 oluşturur.

Genel olarak birleşik girişler, OpenID Connect veya OAuth gibi standart protokoller üzerine kurulur. Birleştirilmiş hesaplarla kimlik doğrulama hakkında bilgi edinmek için ilgili birleştirilmiş kimlik sağlayıcıların belgelerine bakın. Popüler örnekler şunlardır:

• Google ile Oturum Açma
• Facebook Login
• Twitter'da oturum açma
• GitHub OAuth

Mağaza kimlik bilgileri

Kimlik doğrulama işlemi tamamlandıktan sonra kimlik bilgilerini saklayabilirsiniz. Burada depolayacağınız bilgiler, kimlik sağlayıcıdan alınan id ve kimlik sağlayıcıyı temsil eden bir sağlayıcı dizesidir (name ve iconURL isteğe bağlıdır). Bu bilgiler hakkında daha fazla bilgiyi Credential Management spesifikasyonunda bulabilirsiniz.

Birleşik hesap ayrıntılarını depolamak için kullanıcının tanımlayıcısı ve sağlayıcının tanımlayıcısıyla yeni bir FederatedCredential nesnesi oluşturun. Ardından kimlik bilgilerini depolamak için navigator.credentials.store() öğesini çağırın.

Federasyon işlemi başarıyla tamamlandıktan sonra, eşzamanlı veya eşzamansız olarak bir FederatedCredential örneklendirin:

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şım örneği:

// 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 kapat 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ı devre dışı bırakın. (Oturumlarınızı nasıl sonlandıracağınız tamamen size bağlıdır.)

Gelecekteki ziyaretler için otomatik oturum açmayı devre dışı bırakma

navigator.credentials.preventSilentAccess() numaralı telefonu arayın:

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

Bu sayede, kullanıcı otomatik oturum açma özelliğini tekrar etkinleştirene kadar otomatik oturum açma işlemi gerçekleşmez. Otomatik oturum açma işlemini devam ettirmek için kullanıcı, hesap seçiciden oturum açmak istediği hesabı seçerek oturum açabilir. Ardından, kullanıcı açıkça oturumu kapatana kadar her zaman tekrar oturum açılır.

Geri bildirim