Вход пользователей

Eiji Kitamura

Meggin Kearney

Чтобы выполнить вход, извлеките учетные данные из менеджера паролей браузера и используйте их для автоматического входа пользователей. Если у пользователя несколько аккаунтов, он может выбрать нужный одним нажатием.

Автоматический вход

Автоматический вход может выполняться на любой странице сайта, а не только на главной. Это полезно, когда пользователи переходят на разные страницы вашего сайта через поисковую систему.

Чтобы включить автоматический вход, выполните следующие действия:

1. Получить информацию об учетных данных.
2. Выполните аутентификацию пользователя.
3. Обновите интерфейс или перейдите на персонализированную страницу.

Получить информацию об учетных данных

Browser Support

• 51
• 18
• 60
• 13

Source

Чтобы получить информацию об учетных данных, вызовите navigator.credentials.get(). Укажите тип запрашиваемых учетных данных, задав для него значение password или federated.

Всегда используйте mediation: 'silent' для автоматического входа, чтобы вы могли легко отменить процесс, если пользователь:

• В нем не хранятся учетные данные.
• Сохранено несколько наборов учетных данных.
• Вы вышли из аккаунта.

Прежде чем получить учетные данные, не забудьте проверить, вошел ли пользователь в систему:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

Объект Promise, возвращенный методом navigator.credentials.get(), разрешается с помощью объекта учетных данных или null. Чтобы определить, является ли объект PasswordCredential или FederatedCredential, просто посмотрите на свойство .type объекта, которое будет либо password, либо federated.

Если свойство .type имеет значение federated, то свойство .provider представляет собой строку, которая обозначает поставщика идентификационной информации.

Аутентификация пользователя

Получив учетные данные, запустите процесс аутентификации в зависимости от типа учетных данных (password или federated):

    }).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');
        });
      }
    }

Полный пример кода

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

Вход через окно выбора аккаунта

Если пользователю требуется посредничество или у него несколько аккаунтов, используйте средство выбора аккаунта, чтобы пользователь мог войти в систему, пропустив обычную форму входа, например:

Шаги для входа через окно выбора аккаунта такие же, как и для автоматического входа, но с дополнительным вызовом для показа окна выбора аккаунта в рамках получения учетных данных:

1. Получите информацию об учетных данных и покажите окно выбора аккаунта.
2. Выполните аутентификацию пользователя.
3. Обновите интерфейс или перейдите на персонализированную страницу.

Получение учетных данных и показ окна выбора аккаунта

Показывать окно выбора аккаунта в ответ на определенное действие пользователя, например нажатие кнопки "Войти". Вызовите navigator.credentials.get() и добавьте mediation: 'optional' или mediation: 'required', чтобы показать окно выбора аккаунта.

Если для параметра mediation задано значение required, пользователю всегда показывается окно выбора аккаунта для входа. Эта функция позволяет пользователям с несколькими аккаунтами легко переключаться между ними. Если для свойства mediation задано значение optional, то после вызова navigator.credentials.preventSilentAccess() пользователю будет показано окно выбора аккаунта для входа. Обычно это делается для того, чтобы автоматический вход не выполнялся после того, как пользователь вышел из аккаунта или отменил регистрацию.

Пример с mediation: 'optional':

    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 => {

Когда пользователь выбирает аккаунт, промис разрешается с учетными данными. Если пользователь отменит выбор аккаунта или в хранилище учетных данных не будет учетных данных, промис вернет null. В этом случае вернитесь к форме входа.

Не забудьте предусмотреть резервную форму входа

Вам следует вернуться к форме входа по любой из следующих причин:

• Учетные данные не сохраняются.
• Пользователь закрыл окно выбора аккаунта, не выбрав аккаунт.
• API недоступен.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Полный пример кода

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

Интегрированный вход

Интегрированное решение для входа позволяет пользователям входить в аккаунт одним нажатием, не запоминая дополнительные учетные данные для вашего сайта.

Чтобы реализовать интегрированный вход:

1. Выполните аутентификацию пользователя с помощью стороннего поставщика идентификационной информации.
2. Сохраните идентификационную информацию.
3. Обновите интерфейс или перейдите на персонализированную страницу (как при автоматическом входе).

Аутентификация пользователя с помощью стороннего идентификатора

Когда пользователь нажимает кнопку входа через федеративную систему, запустите процесс аутентификации поставщика идентификационной информации с помощью FederatedCredential.

Browser Support

• 51
• 79
• x
• x

Source

Например, если поставщиком является Google, используйте библиотеку JavaScript для входа с аккаунтом Google:

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 создается токен идентификации, подтверждающий аутентификацию.

Как правило, федеративные входы создаются на основе стандартных протоколов, таких как OpenID Connect или OAuth. Чтобы узнать, как выполнить аутентификацию с помощью федеративных аккаунтов, ознакомьтесь с документацией соответствующих поставщиков федеративной идентификационной информации. Примеры:

• Вход с аккаунтом Google
• Facebook Login
• Вход через Твиттер
• GitHub OAuth

Хранить информацию, удостоверяющую личность

После аутентификации вы можете сохранить информацию о личности. Вам нужно будет сохранить id от поставщика идентификационной информации и строку, которая его представляет. name и iconURL указывать необязательно. Подробнее об этом рассказывается в спецификации Credential Management API.

Чтобы сохранить данные интегрированного аккаунта, создайте экземпляр нового объекта FederatedCredential с идентификатором пользователя и идентификатором поставщика. Затем вызовите navigator.credentials.store(), чтобы сохранить идентификационные данные.

После успешного объединения создайте экземпляр FederatedCredential синхронно или асинхронно:

Пример синхронного подхода:

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

Пример асинхронного подхода:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

Затем сохраните объект учетных данных:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Выйти

Выполняйте выход из аккаунта пользователя, когда он нажимает кнопку выхода. Сначала завершите сеанс, а затем отключите автоматический вход для будущих посещений. (Как вы будете завершать сеансы, зависит только от вас.)

Как отключить автоматический вход для будущих посещений

Позвонить navigator.credentials.preventSilentAccess():

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

В этом случае автоматический вход не будет выполняться, пока пользователь снова не включит его. Чтобы возобновить автоматический вход, пользователю нужно выбрать аккаунт в окне выбора аккаунта. После этого пользователь будет автоматически входить в аккаунт, пока не выйдет из него.

Как оставить отзыв