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

웹 앱에서 OpenID Connect를 사용하여 인증

Identity Platform을 사용한 Firebase 인증으로 업그레이드한 경우 선택한 OpenID Connect(OIDC) 호환 제공업체를 사용하여 Firebase로 사용자를 인증할 수 있습니다. 이를 통해 Firebase에서 기본적으로 지원하지 않는 ID 공급자를 사용할 수 있습니다.

시작하기 전에

OIDC 공급자를 사용하여 사용자를 로그인하려면 먼저 공급자로부터 몇 가지 정보를 수집해야 합니다.

  • 클라이언트 ID : 앱을 식별하는 공급자 고유의 문자열입니다. 공급자는 지원하는 각 플랫폼에 대해 다른 클라이언트 ID를 할당할 수 있습니다. 이것은 공급자가 발급한 ID 토큰의 aud 클레임 값 중 하나입니다.

  • 클라이언트 비밀 : 공급자가 클라이언트 ID의 소유권을 확인하는 데 사용하는 비밀 문자열입니다. 모든 클라이언트 ID에 대해 일치하는 클라이언트 암호가 필요합니다. (이 값은 인증 코드 흐름 을 사용하는 경우에만 필요하며 이는 강력히 권장됩니다.)

  • 발급자 : 공급자를 식별하는 문자열입니다. 이 값은 /.well-known/openid-configuration 과 함께 추가될 때 공급자의 OIDC 검색 문서의 위치인 URL이어야 합니다. 예를 들어 발급자가 https://auth.example.com 인 경우 검색 문서는 https://auth.example.com/.well-known/openid-configuration 에서 사용할 수 있어야 합니다.

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

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

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

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

  4. 인증 코드 흐름 을 사용할지 또는 암시적 권한 부여 흐름 을 사용할지 선택합니다.

    공급자가 지원하는 경우 항상 코드 흐름을 사용해야 합니다 . 암시적 흐름은 덜 안전하므로 사용하지 않는 것이 좋습니다.

  5. 이 공급자에 이름을 지정합니다. oidc.example-provider 와 같은 생성된 제공자 ID를 확인하세요. 앱에 로그인 코드를 추가할 때 이 ID가 필요합니다.

  6. 클라이언트 ID와 클라이언트 암호, 공급자의 발급자 문자열을 지정합니다. 이러한 값은 공급자가 할당한 값과 정확히 일치해야 합니다.

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

Firebase SDK로 로그인 흐름 처리

OIDC 공급자를 사용하여 Firebase로 사용자를 인증하는 가장 쉬운 방법은 Firebase SDK로 전체 로그인 흐름을 처리하는 것입니다.

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. 선택 사항 : OAuth 요청과 함께 보낼 추가 사용자 지정 OAuth 매개변수를 지정합니다.

    Web version 9

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Web version 8

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    지원하는 매개변수는 공급자에게 문의하십시오. setCustomParameters 를 사용하여 Firebase 필수 매개변수를 전달할 수 없습니다. 이러한 매개변수는 client_id , response_type , redirect_uri , state , scoperesponse_mode 입니다.

  3. 선택 사항 : 인증 제공자에게 요청하고자 하는 기본 프로필 외에 추가 OAuth 2.0 범위를 지정합니다.

    Web version 9

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Web version 8

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    지원하는 범위에 대해서는 공급자에게 문의하십시오.

  4. OAuth 공급자 개체를 사용하여 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, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .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.
        // IdP data available using getAdditionalUserInfo(result)
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    
  5. 위의 예는 로그인 흐름에 중점을 두고 있지만 동일한 패턴을 사용하여 linkWithRedirect()linkWithPopup() ) 을 사용하여 OIDC 공급자를 기존 사용자에 연결하고 reauthenticateWithRedirect()reauthenticateWithPopup() ) 을 사용하여 사용자를 재인증할 수 있습니다. 최근 로그인이 필요한 민감한 작업에 대한 새로운 자격 증명을 검색하는 데 사용할 수 있습니다.

수동으로 로그인 흐름 처리

앱에서 이미 OpenID Connect 로그인 흐름을 구현한 경우 ID 토큰을 직접 사용하여 Firebase에 인증할 수 있습니다.

Web version 9

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web version 8

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });