developer tip

Firebase로 여러 소셜 서비스에 로그인하려면 어떻게해야합니까?

optionbox 2020. 12. 31. 08:12
반응형

Firebase로 여러 소셜 서비스에 로그인하려면 어떻게해야합니까?


사용자가 Facebook, Twitter 또는 Github와 같은 여러 인증 공급자를 사용하여 내 Firebase 애플리케이션에 인증 할 수 있기를 바랍니다. 일단 인증되면 사용자가 어떤 인증 방법을 사용하든 동일한 계정에 액세스 할 수 있기를 바랍니다.

즉, 여러 인증 방법을 내 앱 내에서 단일 계정으로 병합하고 싶습니다. Firebase 앱에서 어떻게 할 수 있습니까?



업데이트 (20160521) : Firebase는 Firebase 인증 제품에 대한 주요 업데이트를 출시했습니다. 이제 단일 사용자가 다양한 지원 제공 업체의 계정을 연결할 수 있습니다. 이 기능에 대한 자세한 내용은 iOS , Android 설명서를 참조하십시오 . 아래 답변은 역사적인 이유로 남겨졌습니다.


핵심 Firebase 서비스는 다음과 같은 여러 인증 방법을 제공합니다. https://www.firebase.com/docs/security/authentication.html

기본적으로 Firebase는 인증을 위해 보안 JWT 토큰을 사용합니다. JWT 토큰을 생성하는 모든 것 (예 : 자체 서버에서 JWT 라이브러리 사용)은 Firebase에 사용자를 인증하는 데 작동하므로 인증 프로세스를 완벽하게 제어 할 수 있습니다.

Firebase는 이러한 토큰을 생성하는 한 가지 방법 인 Firebase Simple Login이라는 서비스를 제공합니다 (이는 Facebook, Twitter 등의 인증을 제공함). 서버없이 빠르게 시작하고 실행할 수 있도록 일반적인 인증 시나리오를위한 것이지만 인증하는 유일한 방법은 아니며 포괄적 인 솔루션이 아닙니다. 

Firebase 단순 로그인을 사용하여 여러 제공 업체에 로그인을 허용하는 한 가지 방법은 다음과 같습니다.

  1. 각 사용자에 대해 하나의 정식 사용자 식별자를 저장하고 각 공급자 별 식별자를 해당 하나의 정식 ID에 매핑합니다.
  2. 하나가 아닌 특정 사용자 계정의 자격 증명과 일치하도록 보안 규칙을 업데이트합니다.

실제로 Twitter와 Facebook 인증을 모두 활성화 (또는 사용자가 하나를 사용하여 계정을 만든 다음 나중에 다른 하나를 추가하도록 허용)한다고 가정하면 보안 규칙은 다음과 같을 수 있습니다.

{
  "users": {
    "$userid": {
      // Require the user to be logged in, and make sure their current credentials
      // match at least one of the credentials listed below, unless we're creating
      // a new account from scratch.
      ".write": "auth != null && 
        (data.val() === null || 
        (auth.provider === 'facebook' && auth.id === data.child('facebook/id').val() || 
        (auth.provider === 'twitter' && auth.id === data.child('twitter/id').val()))"
    }
  },
  "user-mappings": {
    // Only allow users to read the user id mapping for their own account.
    "facebook": {
      "$fbuid": {
        ".read": "auth != null && auth.provider === 'facebook' && auth.id === $fbuid",
        ".write": "auth != null && 
          (data.val() == null || 
          root.child('users').child(data.val()).child('facebook-id').val() == auth.id)"
      }
    },
    "twitter": {
      "$twuid": {
        ".read": "auth != null && auth.provider === 'twitter' && auth.id === $twuid",
        ".write": "auth != null && 
          (data.val() == null || 
          root.child('users').child(data.val()).child('twitter-id').val() == auth.id)"
      }
    }
  }
}

이 예에서는 하나의 글로벌 사용자 ID (선택한 항목이 될 수 있음)를 저장하고 Facebook, Twitter 등의 인증 메커니즘과 기본 사용자 레코드 간의 매핑을 유지합니다. 각 사용자에 대해 로그인하면 사용자 매핑에서 기본 사용자 레코드를 가져와 해당 ID를 사용자 데이터 및 작업의 기본 저장소로 사용합니다. 위는 또한 사용자 매핑의 데이터를 제한하고 유효성을 검사하여 / users / $ userid / (facebook-id | twitter에 이미 동일한 Facebook, Twitter 등 사용자 ID를 가지고있는 적절한 사용자 만 쓸 수 있도록합니다. -id | etc-id).

이 방법을 사용하면 빠르게 시작하고 실행할 수 있습니다. 그러나 사용 사례가 복잡하고 인증 경험을 완벽하게 제어하려는 경우 자체 서버에서 자체 인증 코드를 실행할 수 있습니다 . 이를 위해 사용할 수있는 유용한 오픈 소스 라이브러리가 많이 있습니다 (예 : everyauthpassport) .

타사 인증 제공 업체를 사용하여 인증 할 수도 있습니다. 예를 들어, 서버 측 코드를 작성하지 않고도 즉시 사용할 수 있는 다양한 통합 기능을 제공하는 Singly 를 사용할 수 있습니다 .


이 게시물이 몇 달 동안 존재한다는 것을 알고 있지만이 문제에 직면했을 때 코드를 더 유연하게 만드는 데 많은 시간이 걸렸습니다. 위의 Andrew 코드를 기반으로 코드를 약간 수정했습니다.

샘플 데이터 저장소 :

userMappings
|---facebook:777
|   |---user:"123"
|---twitter:888
    |---user:"123"
users
|---123
    |---userMappings
        |---facebook: "facebook:777"
        |---twitter: "twitter:888"

보안 규칙 :

"userMappings": {
  "$login_id": {
    ".read": "$login_id === auth.uid",
    ".write": "auth!== null && (data.val() === null || $login_id === auth.uid)"
  }
},

"users": {
  "$user_id": {
    ".read": "data.child('userMappings/'+auth.provider).val()===auth.uid",
    ".write": "auth!= null && (data.val() === null || data.child('userMappings/'+auth.provider).val()===auth.uid)"
  }
}

So userMappings is still the first information we look up when login by Facebook, Twitter.... the userMappings' user will point to the main account in users. So after login by Facebook or Twitter, we can look up the main user account. In users we keep list of userMapping that can access to its data.

When create new user, we have to create an account in users first. The id for user in users could be anything we want. This is flexible because we can provide more login method like Google, Github without adding more security rule.


I've just created an angularfire decorator to handle this for us: angularfire-multi-auth


I've spent quite some time thinking in a good solution, and IMHO to be able to register from any provider is just confusing. In my front end I always ask for a email registration, so a user logging with facebook and google+, for example, would be logged as the same user when he informs his email.

This way, the Sample Data proposed by Kuma don't need to duplicate the userMappings.

Sample Data Store:

userMappings
|---facebook:777
|   |---user:"123"
|---twitter:888
    |---user:"123"
users
|---123
    |---user data

ReferenceURL : https://stackoverflow.com/questions/15148089/how-can-i-login-with-multiple-social-services-with-firebase

반응형