Oturum Açma Kullanıcılar

Eiji Kitamura

Meggin Kearney

Kullanıcıların oturum açması için kimlik bilgilerini tarayıcıdaki şifre yöneticisinden alın ve kullanıcıların otomatik olarak giriş yapması için bunları kullanın. Birden fazla hesabı olan kullanıcıların hesap seçiciyi kullanarak tek bir dokunuşla hesap seçmesine izin verin.

Otomatik olarak oturum aç

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

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

1. Kimlik bilgisi bilgilerini alın.
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 bilgisi bilgilerini alma

Kimlik bilgisi bilgilerini almak için navigator.credentials.get() çağrısını kullanın. İstenecek kimlik bilgisi türünü bir password veya federated vererek belirtin.

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

• Depolanmış kimlik bilgisi yoktur.
• Birden fazla kimlik bilgisi depolanmışsa
• Oturumunuz kapalıysa

Kimlik bilgisini 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 taahhüt, bir kimlik bilgisi nesnesi veya null ile çözümlenir. PasswordCredential mi yoksa FederatedCredential mi olduğunu belirlemek için nesnenin .type özelliğine bakın. Bu özellik password veya federated olacaktır.

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

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

Kimlik bilgisini aldıktan sonra, kimlik bilgisi türüne bağlı olarak password veya federated 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();
     }

Sözleşme çözüldüğünde, 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 sessizce reddedebilirsiniz.

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

Kimlik doğrulama başarılıysa 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 kafa karışıklığı yaşamaması için kimlik bilgisi nesnesini alırlarken "Oturum açılıyor" yazan mavi bir pop-up görmelidirler:

Önemli bir ipucu: Kimlik bilgisi nesnesi elde etmeyi başardıysanız ancak kullanıcının kimliğini doğrulayamadıysanı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 arabuluculuk yapması gerekiyorsa veya birden fazla hesabı varsa kullanıcının oturum açmasına izin vermek için hesap seçiciyi kullanarak normal oturum açma formunu atlayabilirsiniz. Örneğin:

Hesap seçici aracılığıyla oturum açma adımları, kimlik bilgisi bilgilerini alma kapsamında hesap seçiciyi göstermek için ek bir çağrıyla birlikte otomatik oturum açma ile aynıdır:

1. Kimlik bilgisi bilgilerini alın ve hesap seçiciyi gösterin.
2. Kullanıcının kimliğini doğrulayın.
3. Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş bir sayfaya gidin.

Kimlik bilgisi bilgilerini alma ve hesap seçiciyi gösterme

Tanımlı bir kullanıcı işlemine yanıt olarak bir hesap seçici gösterin (örneğin, kullanıcı "Oturum Aç" düğmesine dokunduğunda). navigator.credentials.get() işlevini çağırın ve hesap seçiciyi göstermek için mediation: 'optional' veya mediation: 'required' ekleyin.

mediation required olduğunda kullanıcıya her zaman oturum açmak için 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 değeri optional olduğunda, kullanıcıya bir navigator.credentials.preventSilentAccess() çağrısından sonra oturum açması için hesap seçici gösterilir. Bu durum genellikle kullanıcı oturumu kapatmayı veya kaydını silmeyi seçtikten sonra otomatik oturum açılmamasının sağlanması içindir.

mediation: 'optional' değerini 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, kimlik bilgileri ile birlikte taahhütler çözümlenir. Kullanıcılar hesap seçiciyi iptal ederse veya depolanmış kimlik bilgisi yoksa söz null ile çözülür. Bu durumda, oturum açma formu deneyimine geri dönün.

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

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

• Kimlik bilgisi saklanmaz.
• 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 web siteniz için ek giriş ayrıntılarını hatırlamak zorunda kalmadan tek dokunuşla oturum açmasına olanak tanır.

Federe girişi uygulamak için:

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

Kullanıcının kimliğini üçüncü taraf kimliğiyle doğrulama

Kullanıcı bir 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ğrulamanın kanıtı olarak bir kimlik jetonu oluşturur.

Genel olarak birleşik girişler, OpenID Connect veya OAuth gibi standart protokoller üzerine kuruludur. Federasyon hesaplarıyla kimlik doğrulamayı öğrenmek için ilgili federasyon kimlik sağlayıcıların belgelerine bakın. Popüler örnekler arasında şunlar yer alır:

• Google ile Oturum Açma
• Facebook Giriş
• Twitter oturumu açma
• GitHub OAuth

Mağaza kimlik bilgileri

Kimlik doğrulama 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 Kimlik Bilgisi Yönetimi spesifikasyonunda bulabilirsiniz.

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

Başarılı bir federasyondan sonra, FederatedCredential nesnesi senkronize veya asenkron olarak oluşturun:

Senkron 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
});

Zaman uyumsuz 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

Oturum 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çma özelliğini 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ı kapat

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

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

Bu işlem, kullanıcı otomatik oturum açma özelliğini bir sonraki sefer etkinleştirene kadar otomatik oturum açma işleminin gerçekleşmeyeceğini sağlar. Kullanıcılar, otomatik oturum açma özelliğini devam ettirmek için hesap seçiciden oturum açmak istedikleri hesabı seçerek oturum açmayı tercih edebilir. Ardından kullanıcı, açıkça oturumu kapatana kadar her zaman tekrar oturum açar.

Geri bildirim