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

JavaScript로 Microsoft를 사용하여 인증

Firebase SDK를 사용하여 일반 OAuth 로그인을 앱에 통합하여 엔드투엔드 로그인 흐름을 수행함으로써 사용자가 Microsoft Azure Active Directory와 같은 OAuth 공급자를 사용하여 Firebase에 인증하도록 할 수 있습니다.

시작하기 전에

Microsoft 계정(Azure Active Directory 및 개인 Microsoft 계정)을 사용하여 사용자를 로그인하려면 먼저 Microsoft를 Firebase 프로젝트의 로그인 공급자로 활성화해야 합니다.

  1. 자바스크립트 프로젝트에 Firebase를 추가합니다 .
  2. Firebase 콘솔 에서 인증 섹션을 엽니다.
  3. 로그인 방법 탭에서 Microsoft 공급자를 활성화합니다.
  4. 해당 공급자의 개발자 콘솔에서 공급자 구성에 클라이언트 ID클라이언트 암호 를 추가합니다.
    1. Microsoft OAuth 클라이언트를 등록하려면 빠른 시작: Azure Active Directory v2.0 엔드포인트에 앱 등록 의 지침을 따르세요. 이 엔드포인트는 Microsoft 개인 계정과 Azure Active Directory 계정을 사용한 로그인을 지원합니다. Azure Active Directory v2.0에 대해 자세히 알아보세요 .
    2. 이러한 제공업체에 앱을 등록할 때 프로젝트의 *.firebaseapp.com 도메인을 앱의 리디렉션 도메인으로 등록해야 합니다.
  5. 저장 을 클릭합니다.

Firebase SDK로 로그인 흐름 처리

웹 앱을 빌드하는 경우 Microsoft 계정을 사용하여 Firebase에서 사용자를 인증하는 가장 쉬운 방법은 Firebase JavaScript SDK로 전체 로그인 흐름을 처리하는 것입니다.

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

  1. 공급자 ID microsoft.com 을 사용하여 OAuthProvider 인스턴스를 만듭니다.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. 선택사항 : OAuth 요청과 함께 전송하려는 추가 사용자 정의 OAuth 매개변수를 지정하십시오.

    Web version 9

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Web version 8

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Microsoft에서 지원하는 매개변수는 Microsoft OAuth 설명서 를 참조하십시오. Firebase 필수 매개변수는 setCustomParameters() 로 전달할 수 없습니다. 이러한 매개변수는 client_id , response_type , redirect_uri , state , scoperesponse_mode 입니다.

    특정 Azure AD 테넌트의 사용자만 애플리케이션에 로그인하도록 허용하려면 Azure AD 테넌트의 친숙한 도메인 이름이나 테넌트의 GUID 식별자를 사용할 수 있습니다. 이는 사용자 정의 매개변수 개체에 "테넌트" 필드를 지정하여 수행할 수 있습니다.

    Web version 9

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });

    Web version 8

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. 선택 사항 : 인증 공급자에게 요청하려는 기본 프로필 외에 추가 OAuth 2.0 범위를 지정합니다.

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

    자세한 내용은 Microsoft 권한 및 동의 문서 를 참조하십시오.

  4. OAuth 공급자 개체를 사용하여 Firebase에 인증합니다. 팝업 창을 열거나 로그인 페이지로 리디렉션하여 사용자에게 Microsoft 계정으로 로그인하라는 메시지를 표시할 수 있습니다. 모바일 장치에서는 리디렉션 방법이 선호됩니다.

    • 팝업 창으로 로그인하려면 signInWithPopup 을 호출합니다.

    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 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().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.
      });
    • 로그인 페이지로 리디렉션하여 로그인하려면 signInWithRedirect 를 호출합니다.

    signInWithRedirect , linkWithRedirect 또는 reauthenticateWithRedirect 를 사용할 때 모범 사례 를 따르십시오.

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

    성공적으로 완료되면 반환된 firebase.auth.UserCredential 개체에서 공급자와 연결된 OAuth 액세스 토큰을 검색할 수 있습니다.

    OAuth 액세스 토큰을 사용하여 Microsoft Graph API 를 호출할 수 있습니다.

    예를 들어 기본 프로필 정보를 얻기 위해 다음 REST API를 호출할 수 있습니다.

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
    

    Firebase 인증이 지원하는 다른 공급자와 달리 Microsoft는 사진 URL을 제공하지 않으며 대신 Microsoft Graph API 를 통해 프로필 사진에 대한 이진 데이터를 요청해야 합니다.

    OAuth 액세스 토큰 외에도 firebase.auth.UserCredential 개체에서 사용자의 OAuth ID 토큰 을 검색할 수도 있습니다. ID 토큰의 sub 클레임은 앱별로 다르며 Firebase 인증에서 사용하고 user.providerData[0].uid 를 통해 액세스할 수 있는 연합 사용자 식별자와 일치하지 않습니다. 대신 oid 클레임 필드를 사용해야 합니다. Azure AD 테넌트를 사용하여 로그인하는 경우 oid 클레임이 정확히 일치합니다. 그러나 비 테넌트의 경우 oid 필드가 채워집니다. 연합 ID 4b2eabcdefghijkl 의 경우 oid00000000-0000-0000-4b2e-abcdefghijkl 형식을 갖습니다.

  5. 위의 예는 로그인 흐름에 중점을 linkWithPopup / linkWithRedirect 를 사용하여 Microsoft 공급자를 기존 사용자에 연결할 수도 있습니다. 예를 들어 동일한 사용자에게 여러 공급자를 연결하여 둘 중 하나로 로그인할 수 있습니다.

    Web version 9

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // 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

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. 동일한 패턴을 reauthenticateWithPopup / reauthenticateWithRedirect 와 함께 사용할 수 있습니다. 이 패턴은 최근 로그인이 필요한 중요한 작업에 대한 새로운 자격 증명을 검색하는 데 사용할 수 있습니다.

    Web version 9

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // 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

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Chrome 확장 프로그램에서 Firebase로 인증

Chrome 확장 프로그램 앱을 빌드하는 경우 Chrome 확장 프로그램 ID를 추가해야 합니다.

  1. Firebase 콘솔 에서 프로젝트를 엽니다.
  2. 인증 섹션에서 로그인 방법 페이지를 엽니다.
  3. 승인된 도메인 목록에 다음과 같은 URI를 추가합니다.
    chrome-extension://CHROME_EXTENSION_ID

Chrome 확장 프로그램은 HTTP 리디렉션을 사용할 수 없으므로 팝업 작업( signInWithPopup , linkWithPopupreauthenticateWithPopup )만 Chrome 확장 프로그램에서 사용할 수 있습니다. 인증 팝업이 브라우저 작업 팝업을 취소하므로 브라우저 작업 팝업이 아닌 백그라운드 페이지 스크립트에서 이러한 메서드를 호출해야 합니다. 팝업 메서드는 Manifest V2 를 사용하는 확장에서만 사용할 수 있습니다. 최신 Manifest V3 에서는 팝업 작업을 전혀 수행할 수 없는 서비스 작업자 형태의 백그라운드 스크립트만 허용합니다.

Chrome 확장 프로그램의 매니페스트 파일에서 https://apis.google.com URL을 content_security_policy 허용 목록에 추가해야 합니다.

다음 단계

사용자가 처음으로 로그인하면 새 사용자 계정이 생성되고 사용자가 로그인할 때 사용한 자격 증명(즉, 사용자 이름과 암호, 전화 번호 또는 인증 공급자 정보)에 연결됩니다. 이 새 계정은 Firebase 프로젝트의 일부로 저장되며 사용자 로그인 방법에 관계없이 프로젝트의 모든 앱에서 사용자를 식별하는 데 사용할 수 있습니다.

  • 앱에서 사용자의 인증 상태를 알 수 있는 권장 방법은 Auth 개체에 관찰자를 설정하는 것입니다. 그런 다음 User 개체에서 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리 를 참조하십시오.

  • Firebase 실시간 데이터베이스 및 Cloud Storage 보안 규칙 에서 auth 변수에서 로그인한 사용자의 고유한 사용자 ID를 가져와 사용자가 액세스할 수 있는 데이터를 제어하는 ​​데 사용할 수 있습니다.

인증 공급자 자격 증명을 기존 사용자 계정에 연결하여 사용자가 여러 인증 공급자를 사용하여 앱에 로그인하도록 허용할 수 있습니다.

사용자를 로그아웃하려면 signOut 을 호출합니다.

Web version 9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});