자바스크립트에서 Yahoo를 사용하여 인증

Firebase SDK를 통해 엔드 투 엔드 로그인 과정을 실행하는 앱에 일반 OAuth 로그인을 통합하여 사용자가 Yahoo와 같은 OAuth 제공업체를 통해 Firebase로 인증하도록 할 수 있습니다.

시작하기 전에

사용자가 Yahoo 계정을 통해 로그인하도록 하려면 우선 Firebase 프로젝트에서 Yahoo를 로그인 제공업체로 사용 설정해야 합니다.

1. 자바스크립트 프로젝트에 Firebase를 추가합니다.
2. Firebase 콘솔에서 인증 섹션을 엽니다.
3. 로그인 방법 탭에서 Yahoo 제공업체를 사용 설정합니다.
4. 해당 제공업체의 개발자 콘솔에서 제공되는 클라이언트 ID 및 클라이언트 보안 비밀번호를 제공업체 구성에 추가합니다.

   1. Yahoo OAuth 클라이언트를 등록하려면 Yahoo에 웹 애플리케이션을 등록하는 방법에 대한 Yahoo 개발자 문서를 따릅니다.

      OpenID Connect API 권한 2개(profile 및 email)를 선택해야 합니다.

   2. 이러한 제공업체에 앱을 등록할 때 프로젝트의 *.firebaseapp.com 도메인을 앱의 리디렉션 도메인으로 등록해야 합니다.
5. 저장을 클릭합니다.

Firebase SDK로 로그인 과정 처리

웹 앱을 개발하는 경우 Firebase 자바스크립트 SDK로 전체 로그인 과정을 처리하면 가장 손쉽게 Yahoo 계정을 통해 Firebase로 사용자를 인증할 수 있습니다.

Firebase 자바스크립트 SDK로 로그인 과정을 처리하려면 다음 단계를 따르세요.

1. 제공업체 ID yahoo.com을 사용하여 OAuthProvider의 인스턴스를 생성합니다.

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

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

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. 선택사항: OAuth 요청과 함께 전송하고자 하는 커스텀 OAuth 매개변수를 추가로 지정합니다.

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   auth_yahoo_provider_params.js

   Web

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   yahoo-oauth.js

   Yahoo가 지원하는 매개변수 정보는 Yahoo OAuth 문서를 참조하세요. Firebase에서 요구하는 매개변수는 setCustomParameters()와 함께 전달할 수 없습니다. 이러한 매개변수에는 client_id, redirect_uri, response_type, scope, state가 있습니다.

3. 선택사항: 인증 제공업체에서 요청하고자 하는 profile 및 email 범위를 넘는 OAuth 2.0 범위를 추가로 지정합니다. 애플리케이션에서 Yahoo API의 비공개 사용자 데이터에 대한 액세스가 필요한 경우 Yahoo 개발자 콘솔의 API 권한에서 Yahoo API에 대한 권한을 요청해야 합니다. 요청받은 OAuth 범위는 앱의 API 권한에서 사전 구성된 범위와 정확하게 일치해야 합니다. 예를 들어 사용자 연락처에 읽기/쓰기 액세스 권한이 요청되고 앱의 API 권한에서 사전 구성되었다면 읽기 전용 OAuth 범위 sdct-r 대신 sdct-w를 전달해야 합니다. 그렇지 않으면 과정이 실패하고 최종 사용자에게 오류가 표시됩니다.

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

   // Request access to Yahoo Mail API.
   provider.addScope('mail-r');
   // Request read/write access to user contacts.
   // This must be preconfigured in the app's API permissions.
   provider.addScope('sdct-w');
   auth_yahoo_provider_scopes.js

   Web

   // Request access to Yahoo Mail API.
   provider.addScope('mail-r');
   // Request read/write access to user contacts.
   // This must be preconfigured in the app's API permissions.
   provider.addScope('sdct-w');
   yahoo-oauth.js

   자세한 내용은 Yahoo 범위 문서를 참조하세요.

4. OAuth 제공업체 객체를 사용해 Firebase로 인증합니다. 팝업 창을 띄우거나 로그인 페이지로 리디렉션하여 사용자가 Yahoo 계정에 로그인하도록 유도할 수 있습니다. 휴대기기의 경우 리디렉션을 사용할 것을 권장합니다.

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

     Web

     트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

     import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // IdP data available in result.additionalUserInfo.profile
         // ...
     
         // Yahoo OAuth access token and ID token can be retrieved by calling:
         const credential = OAuthProvider.credentialFromResult(result);
         const accessToken = credential.accessToken;
         const idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
     auth_yahoo_signin_popup.js

     Web

     firebase.auth().signInWithPopup(provider)
       .then((result) => {
         // IdP data available in result.additionalUserInfo.profile
         // ...
     
         /** @type {firebase.auth.OAuthCredential} */
         const credential = result.credential;
     
         // Yahoo OAuth access token and ID token can be retrieved by calling:
         var accessToken = credential.accessToken;
         var idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
     yahoo-oauth.js

   • 로그인 페이지로 리디렉션해서 로그인하려면 다음과 같이 signInWithRedirect를 호출합니다.

     firebase.auth().signInWithRedirect(provider);
     

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

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

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

   Web

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   성공적으로 완료되면 제공업체에 연결된 OAuth ID 토큰 및 액세스 토큰을 반환되는 firebase.auth.UserCredential 객체에서 검색할 수 있습니다.

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

   예를 들어 기본 프로필 정보를 가져오려면 다음 REST API를 호출할 수 있습니다.

   curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

   여기서 YAHOO_USER_UID는 firebase.auth().currentUser.providerData[0].uid 필드 또는 result.additionalUserInfo.profile에서 검색할 수 있는 Yahoo 사용자의 ID입니다.

5. 위의 예시는 로그인 과정에 중점을 두고 있지만 linkWithPopup/linkWithRedirect를 사용하여 Yahoo 제공업체를 기존 사용자에 연결할 수도 있습니다. 예를 들어 여러 제공업체를 동일한 사용자에 연결하여 그 중 하나로 로그인하도록 허용할 수 있습니다.

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

   import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   const auth = getAuth();
   linkWithPopup(auth.currentUser, provider)
       .then((result) => {
         // Yahoo 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.
       });
   auth_yahoo_link_popup.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   firebase.auth().currentUser.linkWithPopup(provider)
       .then((result) => {
         // Yahoo credential is linked to the current user.
         // IdP data available in result.additionalUserInfo.profile.
         // Yahoo OAuth access token can be retrieved by calling:
         // result.credential.accessToken
         // Yahoo OAuth ID token can be retrieved by calling:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   yahoo-oauth.js

6. 최근 로그인한 적이 있어야 진행할 수 있는 중요한 작업에 대해 새로운 사용자 인증 정보를 검색하는 데 사용할 수 있는 reauthenticateWithPopup/reauthenticateWithRedirect와 동일한 패턴을 사용할 수 있습니다.

   Web

   트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

   import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.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.
       });
   auth_yahoo_reauth_popup.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.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.
         // Yahoo OAuth access token can be retrieved by calling:
         // result.credential.accessToken
         // Yahoo OAuth ID token can be retrieved by calling:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   yahoo-oauth.js

account-exists-with-different-credential 오류 처리

Firebase 콘솔에서 이메일 주소당 계정 1개 설정을 사용 설정한 경우 사용자가 이미 이메일을 사용하여 제공업체 (예: Yahoo)에 로그인하려고 할 때 다른 Firebase 사용자 제공업체 (예: Google)에 존재하는 경우 auth/account-exists-with-different-credential가 다음과 함께 발생합니다. AuthCredential 객체 (Yahoo 사용자 인증 정보). 사용자는 먼저 기존 제공업체 (예: Google)에 로그인한 다음 이전 AuthCredential (Yahoo 사용자 인증 정보)

팝업 모드

signInWithPopup을 사용하는 경우 다음 예시와 같은 코드를 사용해 auth/account-exists-with-different-credential 오류를 처리할 수 있습니다.

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

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

리디렉션 모드

리디렉션 모드에서도 오류를 비슷한 방식으로 처리하지만, 페이지 리디렉션 사이에 대기 중인 사용자 인증 정보를 캐시해야 한다는 점이 다릅니다(예: 세션 스토리지 사용).

고급: 수동으로 로그인 과정 처리

OAuth 액세스 토큰 기반의 사용자 인증 정보를 사용하여 직접 로그인할 수 있는 다른 Firebase 지원 OAuth 제공업체(예: Google, Facebook, Twitter)와 달리, Firebase 인증 서버에서 Yahoo OAuth 액세스 토큰의 사용자를 인증할 수 없으므로 Firebase 인증은 Yahoo와 같은 제공업체에 대해 동일한 인증 기능을 지원하지 못합니다. 이는 중요한 보안 요구사항으로, 한 프로젝트(공격자)에서 확보한 Yahoo OAuth 액세스 토큰을 사용하여 다른 프로젝트(피해자)에 로그인할 수 있는 재전송 공격에 애플리케이션과 웹사이트가 노출될 수 있습니다. 대신 Firebase 인증은 Firebase Console에 구성된 OAuth 클라이언트 ID와 보안 비밀을 사용하여 전체 OAuth 과정과 승인 코드 교환을 처리할 수 있는 기능을 제공합니다. 승인 코드는 특정 클라이언트 ID/보안 비밀과 함께 사용되어야 하므로, 한 프로젝트에서 확보한 승인 코드는 다른 프로젝트에 사용할 수 없습니다.

지원되지 않는 환경에서 이러한 제공업체를 사용해야 하는 경우 서드 파티 OAuth 라이브러리 및 Firebase 커스텀 인증을 사용해야 합니다. 서드 파티 라이브러리는 제공업체 인증에 필요하고 Firebase 커스텀 인증은 제공업체의 사용자 인증 정보를 커스텀 토큰으로 교환할 때 필요합니다.

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

Chrome 확장 프로그램 앱을 빌드하는 경우에는 화면 밖 문서 가이드

Yahoo 로그인을 위한 리디렉션 도메인 맞춤설정

프로젝트를 만들 때 Firebase에서는 프로젝트의 고유한 하위 도메인(https://my-app-12345.firebaseapp.com)을 프로비저닝합니다.

이 도메인은 OAuth 로그인을 위한 리디렉션 메커니즘으로도 사용됩니다. 이 도메인은 지원되는 모든 OAuth 제공업체에 대해 허용되어야 합니다. 하지만 이로 인해 사용자는 애플리케이션으로 다시 리디렉션되기 전에 Yahoo에 로그인하는 과정에서 이 도메인을 볼 수 있습니다(예: 다음으로 이동: https://my-app-12345.firebaseapp.com).

하위 도메인이 표시되지 않도록 하려면 Firebase Hosting로 커스텀 도메인을 설정할 수 있습니다.

1. 과정의 1~3단계를 Hosting의 도메인 설정 인증 시 Hosting에서 커스텀 도메인에 대한 SSL 인증서를 프로비저닝합니다.
2. 승인된 도메인 목록에 커스텀 도메인을 추가합니다. Firebase 콘솔: auth.custom.domain.com.
3. Yahoo 개발자 콘솔 또는 OAuth 설정 페이지에서 커스텀 도메인 https://auth.custom.domain.com/__/auth/handler에서 액세스할 수 있는 리디렉션 페이지의 URL을 허용 목록에 추가합니다.
4. 자바스크립트 라이브러리를 초기화할 때는 authDomain 필드를 사용하여 커스텀 도메인을 지정합니다.

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);

다음 단계

사용자가 처음으로 로그인하면 신규 사용자 계정이 생성되고 사용자가 로그인할 때 사용한 사용자 인증 정보(사용자 이름과 비밀번호, 전화번호 또는 인증 제공업체 정보)에 연결됩니다. 이 신규 계정은 Firebase 프로젝트에 저장되며 사용자의 로그인 방법과 무관하게 프로젝트 내의 모든 앱에서 사용자 본인 확인에 사용할 수 있습니다.

• 앱에서 사용자의 인증 상태를 파악할 때 권장하는 방법은 Auth 객체에 관찰자를 설정하는 것입니다. 그러면 User 객체로부터 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리를 참조하세요.

• Firebase Realtime Database 및 Cloud Storage에서 보안 규칙에 따라 다음과 같은 작업을 할 수 있습니다. auth 변수에서 로그인한 사용자의 순 사용자 ID 가져오기 이를 사용하여 사용자가 액세스할 수 있는 데이터를 제어할 수 있습니다.

인증 제공업체의 사용자 인증 정보를 기존 사용자 계정에 연결하면 사용자가 여러 인증 제공업체를 통해 앱에 로그인할 수 있습니다.

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

Web

트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.

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

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

Web

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