Oturum Açma Kullanıcılar

Eiji Kitamura

Meggin Kearney

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:

1. Kimlik bilgisi 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 geçin.

Kimlik bilgisi bilgilerini alma

Tarayıcı Desteği

• . 51)
• . 18
• . 60
• . 13

Kaynak

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:

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 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 sonuçlandırılır. 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:

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ç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.

Tarayıcı Desteği

• . 51)
• . 79
• . kat
• . kat

Kaynak

Ö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:

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

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şı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,
  },
});

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.

Geri bildirim