Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

웹 앱에서 SAML을 사용하여 인증

Identity Platform을 사용한 Firebase 인증으로 업그레이드한 경우 선택한 SAML ID 공급업체를 사용하여 Firebase로 사용자를 인증할 수 있습니다. 이렇게 하면 SAML 기반 SSO 솔루션을 사용하여 Firebase 앱에 사용자를 로그인할 수 있습니다.

Firebase 인증은 서비스 제공업체에서 시작한 SAML 흐름만 지원합니다.

시작하기 전에

SAML 자격 증명 공급자를 사용하여 사용자를 로그인하려면 먼저 공급자로부터 일부 정보를 수집해야 합니다.

  • 공급자의 엔터티 ID : ID 공급자를 식별하는 URI입니다.
  • 공급자의 SAML SSO URL : ID 공급자의 로그인 페이지 URL입니다.
  • 공급자의 공개 키 인증서 : ID 공급자가 서명한 토큰의 유효성을 검사하는 데 사용되는 인증서입니다.
  • 앱의 엔터티 ID : "서비스 제공자"인 앱을 식별하는 URI입니다.

위의 정보가 있으면 Firebase 프로젝트의 로그인 공급자로 SAML을 활성화합니다.

  1. JavaScript 프로젝트에 Firebase를 추가합니다 .

  2. Identity Platform을 사용한 Firebase 인증으로 업그레이드하지 않았다면 업그레이드하세요. SAML 인증은 업그레이드된 프로젝트에서만 사용할 수 있습니다.

  3. Firebase 콘솔의 로그인 공급자 페이지에서 새 공급자 추가 를 클릭한 다음 SAML 을 클릭합니다.

  4. 이 공급자에 이름을 지정합니다. 생성된 공급자 ID( saml.example-provider 와 같은 것)를 기록해 두십시오. 앱에 로그인 코드를 추가할 때 이 ID가 필요합니다.

  5. ID 제공자의 엔티티 ID, SSO URL 및 공개 키 인증서를 지정하십시오. 또한 앱(서비스 제공자)의 엔티티 ID를 지정하십시오. 이러한 값은 공급자가 할당한 값과 정확히 일치해야 합니다.

  6. 변경 사항을 저장합니다.

  7. 앱의 도메인을 아직 승인하지 않은 경우 Firebase 콘솔의 인증 > 설정 페이지에서 허용 목록에 추가합니다.

Firebase SDK로 로그인 흐름 처리

Firebase JavaScript SDK로 로그인 흐름을 처리하려면 다음 단계를 따르세요.

  1. Firebase 콘솔에서 얻은 공급자 ID를 사용하여 SAMLAuthProvider 의 인스턴스를 만듭니다.

    Web version 9

    import { SAMLAuthProvider } from "firebase/auth";
    
    const provider = new SAMLAuthProvider('saml.example-provider');
    

    Web version 8

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
    ``
    
  1. SAML 공급자 객체를 사용하여 Firebase에 인증합니다.

    사용자를 공급자의 로그인 페이지로 리디렉션하거나 팝업 브라우저 창에서 로그인 페이지를 열 수 있습니다.

    리디렉션 흐름

    signInWithRedirect() 를 호출하여 공급자 로그인 페이지로 리디렉션합니다.

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

    사용자가 로그인을 완료하고 앱으로 getRedirectResult() 를 호출하여 로그인 결과를 얻을 수 있습니다.

    Web version 9

    import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
    
        // Provider data available using getAdditionalUserInfo()
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().getRedirectResult()
      .then((result) => {
        // User is signed in.
    
        // Provider data available in result.additionalUserInfo.profile,
        // or from the user's ID token obtained from result.user.getIdToken()
        // as an object in the firebase.sign_in_attributes custom claim.
      })
      .catch((error) => {
        // Handle error.
      });
    

    팝업 흐름

    Web version 9

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
    
        // Provider data available in result.additionalUserInfo.profile,
        // or from the user's ID token obtained from result.user.getIdToken()
        // as an object in the firebase.sign_in_attributes custom claim.
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // User is signed in.
    
        // Provider data available in result.additionalUserInfo.profile,
        // or from the user's ID token obtained from result.user.getIdToken()
        // as an object in the firebase.sign_in_attributes custom claim.
      })
      .catch((error) => {
        // Handle error.
      });
    
  2. 위의 예는 로그인 흐름에 중점을 두지만 동일한 패턴을 사용하여 linkWithRedirect()linkWithPopup() ) 을 사용하여 SAML 공급자를 기존 사용자에 연결하고 reauthenticateWithRedirect()reauthenticateWithPopup() ) 을 사용하여 사용자를 재인증할 수 있습니다. 최근 로그인이 필요한 민감한 작업에 대한 새로운 자격 증명을 검색하는 데 사용할 수 있습니다.