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

Firebase Authentication with Identity Platform으로 업그레이드한 경우 원하는 SAML ID 공급업체를 사용하여 Firebase에 사용자를 인증할 수 있습니다. 이를 통해 SAML 기반 SSO 솔루션을 사용하여 사용자를 Firebase 앱에 로그인할 수 있습니다.

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

시작하기 전에

SAML ID 공급업체를 통해 사용자를 로그인 처리하려면 먼저 공급업체에서 몇 가지 정보를 수집해야 합니다.

  • 제공업체의 엔티티 ID: ID 공급업체를 식별하는 URI
  • 제공업체의 SAML SSO URL: ID 공급업체의 로그인 페이지 URL
  • 제공업체의 공개 키 인증서: ID 공급업체가 서명한 토큰을 인증하는 데 사용되는 인증서
  • 앱의 엔티티 ID: 앱을 식별하는 URI, 즉 '서비스 제공업체'

위 정보가 확보되었으면 SAML을 Firebase 프로젝트의 로그인 제공업체로 사용 설정합니다.

  1. 자바스크립트 프로젝트에 Firebase를 추가합니다.

  2. Firebase Authentication with Identity Platform으로 업그레이드하지 않은 경우 업그레이드합니다. SAML 인증은 업그레이드된 프로젝트에서만 사용할 수 있습니다.

  3. Firebase Console의 로그인 공급업체 페이지에서 새 제공업체 추가를 클릭한 다음 SAML을 클릭합니다.

  4. 이 제공업체에 이름을 지정합니다. 생성된 제공업체 ID를 기록해 둡니다(예: saml.example-provider). 앱에 로그인 코드를 추가할 때 이 ID가 필요합니다.

  5. ID 공급업체의 엔티티 ID, SSO URL, 공개키 인증서를 지정합니다. 앱의 엔티티 ID(서비스 제공업체)도 지정합니다. 이 값은 제공업체에서 할당한 값과 정확하게 일치해야 합니다.

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

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

Firebase SDK로 로그인 과정 처리

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

  1. Firebase Console에서 가져온 제공업체 ID를 사용하여 SAMLAuthProvider의 인스턴스를 만듭니다.

    Web 

    import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

    Web 

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
``

  1. SAML 제공업체 객체를 사용해 Firebase로 인증합니다.

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

    리디렉션 흐름

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

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    사용자가 로그인을 완료하고 앱으로 돌아간 후에 getRedirectResult()를 호출하여 로그인 결과를 가져올 수 있습니다.

    Web 

    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 

    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 

    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 

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

    ID 토큰과 UserInfo 객체에는 사용자의 이메일 주소가 ID 공급업체의 SAML 어설션의 NameID 속성에 제공된 경우에만 포함됩니다.

    <Subject>
  <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
</Subject>

  2. 위의 예시는 로그인 과정에 중점을 두고 있지만 동일한 패턴으로 linkWithRedirect()와 linkWithPopup()을 사용하여 SAML 제공업체를 기존 사용자에 연결하고 reauthenticateWithRedirect() 및 reauthenticateWithPopup()을 사용하여 사용자를 다시 인증할 수 있습니다. 이는 최신 로그인이 필요한 민감한 작업에서 새로운 사용자 인증 정보를 검색하는 데 사용할 수 있습니다.