사용자 로그인

메긴 키어니
메긴 키어니

사용자를 로그인 처리하려면 브라우저의 비밀번호 관리자에서 사용자 인증 정보를 검색하여 자동으로 사용자를 로그인시키는 데 사용합니다. 계정이 여러 개인 사용자의 경우 계정 선택기를 사용하여 탭 한 번으로 계정을 선택할 수 있습니다.

자동 로그인

자동 로그인은 최상위 페이지뿐만 아니라 다른 리프 페이지에서도 발생할 수 있습니다. 이 기능은 사용자가 검색엔진을 통해 웹사이트의 다양한 페이지에 도달할 때 유용합니다.

자동 로그인을 사용 설정하려면 다음 안내를 따르세요.

  1. 사용자 인증 정보 정보를 가져옵니다.
  2. 사용자를 인증합니다.
  3. UI를 업데이트하거나 맞춤설정된 페이지로 이동하세요.

사용자 인증 정보 가져오기

브라우저 지원

  • 51
  • 18
  • 60
  • 13

소스

사용자 인증 정보 정보를 가져오려면 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)을 확인하면 됩니다.

.typefederated인 경우 .provider 속성은 ID 공급업체를 나타내는 문자열입니다.

사용자 인증

사용자 인증 정보가 있으면 사용자 인증 정보 유형(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();
     }

프로미스가 확인되면 사용자 인증 정보 객체를 수신했는지 확인합니다. 그렇지 않은 경우 자동 로그인을 실행할 수 없습니다. 자동 로그인 프로세스를 자동으로 닫습니다.

UI 업데이트

인증에 성공하면 UI를 업데이트하거나 사용자를 맞춤설정된 페이지로 전달합니다.

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

계정 선택기를 통해 로그인

사용자에게 미디에이션이 필요하거나 계정이 여러 개 있는 경우 계정 선택기를 사용하여 사용자가 일반 로그인 양식을 건너뛰고 로그인할 수 있도록 합니다. 예를 들면 다음과 같습니다.

여러 계정이 표시된 Google 계정 선택기

계정 선택기를 통해 로그인하는 단계는 자동 로그인과 동일하며 사용자 인증 정보 정보를 가져오는 과정에서 계정 선택기를 표시하는 추가 호출이 있습니다.

  1. 사용자 인증 정보를 가져오고 계정 선택기를 표시합니다.
  2. 사용자를 인증합니다.
  3. UI를 업데이트하거나 맞춤설정된 페이지로 진행합니다.

사용자 인증 정보 가져오기 및 계정 선택기 표시

정의된 사용자 작업(예: 사용자가 '로그인' 버튼을 탭하는 경우)에 대한 응답으로 계정 선택기를 표시합니다. navigator.credentials.get()를 호출하고 mediation: 'optional' 또는 mediation: 'required'를 추가하여 계정 선택기를 표시합니다.

mediationrequired이면 사용자에게 로그인할 수 있는 계정 선택기가 항상 표시됩니다. 이 옵션을 사용하면 여러 계정을 가진 사용자가 계정 간에 쉽게 전환할 수 있습니다. mediationoptional이면 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. 서드 파티 ID로 사용자를 인증합니다.
  2. 신원 정보를 저장합니다.
  3. UI를 업데이트하거나 맞춤설정된 페이지로 진행합니다 (자동 로그인과 동일).

서드 파티 ID로 사용자 인증

사용자가 제휴 로그인 버튼을 탭하면 FederatedCredential를 사용하여 특정 ID 공급업체 인증 흐름을 실행합니다.

브라우저 지원

  • 51
  • 79
  • x
  • x

소스

예를 들어 제공업체가 Google인 경우 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 로그인을 사용하면 인증 증명으로 ID 토큰이 생성됩니다.

일반적으로 제휴 로그인은 OpenID Connect 또는 OAuth와 같은 표준 프로토콜을 기반으로 구축됩니다. 제휴 계정으로 인증하는 방법은 해당 제휴 ID 공급업체의 문서를 참조하세요. 많이 사용되는 예는 다음과 같습니다.

ID 정보 저장

인증이 완료되면 ID 정보를 저장할 수 있습니다. 여기에 저장하는 정보는 ID 공급업체의 id 및 ID 공급업체를 나타내는 제공업체 문자열입니다(nameiconURL는 선택사항임). 이 정보에 관한 자세한 내용은 사용자 인증 정보 관리 사양을 참고하세요.

제휴 계정 세부정보를 저장하려면 사용자의 식별자와 제공업체의 식별자를 사용하여 새 FederatedCredential 객체를 인스턴스화합니다. 그런 다음 navigator.credentials.store()를 호출하여 ID 정보를 저장합니다.

제휴가 완료되면 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();
}

이렇게 하면 사용자가 다음에 자동 로그인을 사용 설정할 때까지 자동 로그인이 발생하지 않습니다. 자동 로그인을 다시 시작하려면 사용자가 계정 선택기에서 로그인하려는 계정을 선택하여 의도적으로 로그인하도록 선택하면 됩니다. 그러면 사용자는 명시적으로 로그아웃할 때까지 항상 다시 로그인 상태로 유지됩니다.

의견