如何向 Google Firebase 身份验证 UI 添加“我接受条款和隐私政策”复选框？

Question

欧盟的 GDPR 要求我们为用户在注册时接受的“条款”和“隐私政策”设置一个选择复选框。使用 Firebase 身份验证 UI (FirebaseUI)，默认情况下我不会得到此信息。如何将这样的复选框添加到 FirebaseUI？

澄清一下：FirebaseUI 提供的 tosUrl 不足以实现此目的。 GDPR 要求“明确、明确和肯定的同意”——简而言之：他们需要主动勾选复选框。我们不能只是通过注册来隐式接受条款。 那么我如何获得一个（未选中的）复选框供用户接受条款和隐私政策？或者我真的必须构建自定义用户界面吗？我不敢相信 Google 不会支持 GDPR...

Answer 1

tosUrl

，用于定向到服务条款页面。示例：

var uiConfig = {
    signInSuccessUrl: '<url-to-redirect-to-on-success>',
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      firebase.auth.PhoneAuthProvider.PROVIDER_ID
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

然后登录后，它会告诉用户，单击“登录”按钮即表示您接受条款和条件。

更多信息在这里：

https://github.com/firebase/firebaseui-web

Answer 2

欧盟的 GDPR 要求我们对用户在注册时接受的“条款”和“隐私政策”有一个选择加入复选框。

这不是真的。

仅在处理敏感个人数据时才需要“明确”同意 - 在这种情况下，只要“选择加入”就足够了（第 9(2) 条），

引自此处

：

在依赖同意来处理个人数据时，同意必须明确：错误！这是 GDPR 通过期间备受争议的话题，但最终文本要求同意必须是“明确的”，而不是“明确的”（第 4(11) 条）。仅在处理敏感个人数据时才需要明确同意 - 在这种情况下，只要“选择加入”就足够了（第 9(2) 条）。但对于非敏感数据，“明确”同意就可以了——如果个人的行为足以表明他们同意处理，那么就可以默示同意。

有关 GDPR 背景下明确/明确同意的更多信息，请参见

此处

。

Answer 3

#firebaseui-auth-container

div。当用户接受条款和政策时，就会出现该 div。下面是一个简单的例子。

HTML：

<div id="acceptTermsArea">
   <input id="acceptPolicies" type="checkbox">
   <label for="acceptPolicies">
      I accept the Terms and the Privacy Policy, and I want to sign in.
   </label>
   <button id="showAuthUIbtn" disabled>Sign in</button>
</div>

<div id="firebaseui-auth-container" style="display:none">The FirebaseUI sign-in buttons will appear in this div!</div>

JavaScript：

document.getElementById("acceptPolicies").addEventListener('change', function(){
  document.getElementById("showAuthUIbtn").toggleAttribute('disabled');
});
    
document.getElementById("showAuthUIbtn").addEventListener('click', function(){
  document.getElementById("acceptTermsArea").style.display = 'none';
  document.getElementById("firebaseui-auth-container").style.display = 'block';
});

可以在这里找到使用相同逻辑的更好的示例：

https://codepen.io/dimvai/pen/vYwBJyW