이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용자 로그인

Eiji Kitamura

Meggin Kearney

사용자를 로그인시키려면 브라우저 비밀번호에서 사용자 인증 정보를 가져오세요. 이를 사용하여 사용자가 자동으로 로그인할 수 있습니다. 여러 계정을 가진 사용자의 경우 계정 선택기를 사용하여 탭 한 번으로 계정을 선택하도록 하세요.

자동 로그인

웹사이트의 어느 위치에서든 자동 로그인이 가능합니다. 최상위 페이지뿐만 아니라 다른 리프 페이지도 포함됩니다. 이는 사용자가 웹사이트의 여러 페이지에 도달할 때 유용합니다. 광고를 게재할 수 있습니다.

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

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

사용자 인증 정보 가져오기

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

사용자 인증 정보를 가져오려면 다음을 호출합니다. 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 속성은 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');
      });
  }
}

계정 선택기를 통해 로그인

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

계정 선택기를 통해 로그인하는 단계는 자동 로그인 계정 선택기를 표시하는 추가 호출 포함 인증 정보를 가져오는 과정에서 다음 단계를 따릅니다.

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

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

정의된 사용자 액션에 대한 응답으로 계정 선택기 표시 예를 들어 사용자가 '로그인' 버튼을 탭할 때 버튼을 클릭합니다. 전화걸기 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';
      });
  }
});

제휴 로그인

제휴 로그인을 사용하면 사용자는 탭 한 번으로 로그인할 수 있으며 이 기능을 사용하면 웹사이트의 추가 로그인 세부정보를 기억할 필요가 없습니다.

제휴 로그인을 구현하려면 다음 안내를 따르세요.

서드 파티 ID로 사용자를 인증합니다.
신원 정보를 저장합니다.
UI를 업데이트하거나 맞춤설정된 페이지로 이동합니다 (자동 로그인과 동일).

서드 파티 ID로 사용자 인증

사용자가 제휴 로그인 버튼을 탭하면 특정 ID 공급업체 인증 흐름을 FederatedCredential

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

예를 들어 제공업체가 Google인 경우 Google 로그인 JavaScript 라이브러리:

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 공급업체를 나타내는 공급업체 문자열 (name 및 iconURL는 선택사항입니다.) 이 정보에 대한 자세한 내용은 사용자 인증 정보 관리 사양.

제휴 계정 세부정보를 저장하려면 새 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();
}

이렇게 하면 사용자가 다음에 자동 로그인을 사용 설정할 때까지 자동 로그인이 실행되지 않습니다. 자동 로그인을 재개하려면 사용자가 의도적으로 로그인하도록 선택할 수 있습니다. 계정 선택기에서 로그인하려는 계정을 선택합니다. 그러면 사용자는 명시적으로 로그아웃할 때까지 항상 다시 로그인됩니다.

사용자 로그인

자동 로그인

사용자 인증 정보 가져오기

사용자 인증

UI 업데이트

인증 오류 메시지를 표시하는 것을 잊지 마세요.

전체 코드 예

계정 선택기를 통해 로그인

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

로그인 양식으로 돌아가는 것을 잊지 마세요.

전체 코드 예

제휴 로그인

서드 파티 ID로 사용자 인증

매장 ID 정보

로그아웃

향후 방문 시 자동 로그인 사용 중지하기

의견