Чтобы войти в систему, получите учетные данные из диспетчера паролей браузера и используйте их для автоматического входа в систему. Пользователи с несколькими учетными записями могут выбрать учетную запись одним касанием с помощью средства выбора учетной записи.
Автоматический вход
Автоматический вход может произойти в любом месте вашего сайта; не только верхняя страница, но и другие листовые страницы. Это полезно, когда пользователи попадают на различные страницы вашего сайта через поисковую систему.
Чтобы включить автоматический вход:
- Получите учетную информацию.
- Аутентифицируйте пользователя.
- Обновите пользовательский интерфейс или перейдите на персонализированную страницу.
Получить учетную информацию
Чтобы получить информацию об учетных данных, вызовите 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',
});
// ...
}
}
Промис, возвращаемый 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');
});
}
}
Вход в систему через выбор учетной записи
Если пользователю требуется посредничество или он имеет несколько учетных записей, используйте средство выбора учетной записи, чтобы разрешить пользователю войти в систему, пропуская обычную форму входа, например:
Шаги для входа в систему с помощью средства выбора учетной записи такие же, как и при автоматическом входе , с дополнительным вызовом для отображения средства выбора учетной записи в рамках получения учетных данных:
- Получите учетные данные и покажите их пользователю, выбирающему учетную запись.
- Аутентифицировать пользователя .
- Обновите пользовательский интерфейс или перейдите на персонализированную страницу .
Получите учетную информацию и покажите выбор учетной записи
Показывать средство выбора учетной записи в ответ на определенное действие пользователя, например, когда пользователь нажимает кнопку «Войти». Вызовите navigator.credentials.get() и добавьте mediation: 'optional' или mediation: 'required' чтобы отобразить средство выбора учетной записи.
Если required mediation , пользователю всегда предлагается выбрать учетную запись для входа. Этот параметр позволяет пользователям с несколькими учетными записями легко переключаться между ними. Если 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';
});
}
});
Федеративный вход
Федеративный вход позволяет пользователям входить в систему одним касанием и без необходимости запоминать дополнительные данные для входа на ваш веб-сайт.
Чтобы реализовать федеративный вход:
- Аутентифицируйте пользователя с помощью стороннего удостоверения.
- Сохраните идентификационную информацию.
- Обновите пользовательский интерфейс или перейдите на персонализированную страницу (так же, как при автоматическом входе).
Аутентификация пользователя с помощью стороннего удостоверения
Когда пользователь нажимает кнопку федеративного входа, запускается поток аутентификации конкретного поставщика удостоверений с помощью FederatedCredential .
Например, если поставщиком является 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 . Чтобы узнать, как пройти аутентификацию с помощью федеративных учетных записей, обратитесь к документации соответствующих федеративных поставщиков удостоверений. Популярные примеры включают в себя:
Хранить идентификационную информацию
После завершения аутентификации вы можете сохранить идентификационную информацию. Информация, которую вы сохраните здесь, — это id поставщика удостоверений и строка поставщика, представляющая поставщика удостоверений ( name и iconURL не являются обязательными). Подробнее об этой информации читайте в спецификации Credential Management .
Чтобы сохранить сведения о федеративной учетной записи, создайте экземпляр нового объекта 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();
}
Это гарантирует, что автоматический вход не произойдет до тех пор, пока пользователь в следующий раз не включит автоматический вход. Чтобы возобновить автоматический вход, пользователь может намеренно войти в систему, выбрав учетную запись, с которой он хочет войти, в средстве выбора учетной записи. Затем пользователь всегда снова входит в систему, пока он явно не выйдет из системы.