저장된 브라우저 자격 증명을 사용하는 자동 로그인 사용자
경고: 이 게시물 작성 시점을 기준으로 모든 브라우저가 Web API를 지원하지 않습니다
PasswordCredential
. 지원되는 브라우저 및 브라우저 버전here을 확인할 수 있습니다.브라우저에 자격 증명을 수동으로 저장합니다.
const PC = globalThis.PasswordCredential
export const storeCred = async (creds: {
id: string
password: string
}): Promise<Credential | null> => {
// check if PasswordCredential is supported by this browser.
if (PC) {
const cred = new PC(creds)
return navigator.credentials.store(cred)
} else {
return null
}
}
사용자
registers
, change password
및 reset password
다음에 이 함수를 호출하여 브라우저에서 자격 증명을 저장/업데이트해야 합니다. id
필드는 사용자가 로그인하는 데 사용하는 고유 ID를 나타내며 애플리케이션 및 로그인/가입 프로세스에 따라 이메일, 전화번호 또는 사용자 이름이 될 수 있습니다.사용자가 사이트를 방문하면 자동 로그인됩니다.
사용자를 자동 로그인하려면 먼저 브라우저에서 저장된 자격 증명을 검색한 다음 자격 증명을 사용하여 서버에서 로그인 API를 호출하여 사용자를 로그인해야 합니다.
...
export const fetchCred = async (): Promise<Credential | null> => {
// check if PasswordCredential is supported by this browser.
if (PC) {
return navigator.credentials.get({
password: true,
} as any)
} else {
return null
}
}
용법
...
const cred = await fetchCred()
console.log(cred)
// { id: 'savedUserId', password: '**********'}
// call the sign-in api, with cred.
...
로그아웃 후 자동 로그인 방지
사용자가 스스로 로그아웃하면 사용자가 다시 자동 로그인하지 않도록 하여 사용자가 스스로 로그아웃할 수 없도록 잠급니다. 이 단계는 사용자가 안전하게 로그아웃하고, 다른 계정으로 로그인하고, 새 계정을 등록할 수 있도록 하므로 매우 중요합니다.
export const preventSilentAccess = async (): Promise<void | null> => {
// check if PasswordCredential is supported by this browser.
if (PC) {
return navigator.credentials.preventSilentAccess()
} else {
return null
}
}
로그아웃 시 함수를 호출한 후 사용자가 로그인을 시도하면 브라우저는 자동으로 웹 사이트에 자격 증명을 제공하는 대신 사용자에게 자격 증명에 대한 액세스를 허용하라는 메시지를 표시합니다.
그리고 그게 다야. :)
질문에 댓글을 달고 React에서 참조 구현을 보고 싶다면.
Reference
이 문제에 관하여(저장된 브라우저 자격 증명을 사용하는 자동 로그인 사용자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/vibhanshu909/auto-sign-in-user-using-saved-browser-credentials-2idi
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
...
const cred = await fetchCred()
console.log(cred)
// { id: 'savedUserId', password: '**********'}
// call the sign-in api, with cred.
...
사용자가 스스로 로그아웃하면 사용자가 다시 자동 로그인하지 않도록 하여 사용자가 스스로 로그아웃할 수 없도록 잠급니다. 이 단계는 사용자가 안전하게 로그아웃하고, 다른 계정으로 로그인하고, 새 계정을 등록할 수 있도록 하므로 매우 중요합니다.
export const preventSilentAccess = async (): Promise<void | null> => {
// check if PasswordCredential is supported by this browser.
if (PC) {
return navigator.credentials.preventSilentAccess()
} else {
return null
}
}
로그아웃 시 함수를 호출한 후 사용자가 로그인을 시도하면 브라우저는 자동으로 웹 사이트에 자격 증명을 제공하는 대신 사용자에게 자격 증명에 대한 액세스를 허용하라는 메시지를 표시합니다.
그리고 그게 다야. :)
질문에 댓글을 달고 React에서 참조 구현을 보고 싶다면.
Reference
이 문제에 관하여(저장된 브라우저 자격 증명을 사용하는 자동 로그인 사용자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vibhanshu909/auto-sign-in-user-using-saved-browser-credentials-2idi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)