谷歌一键登录（YOLO）+ Firebase认证？

Question

我注意到 Google 重新开放了 Google One-Tap Sign-in and Auto-Signup，此前曾因安全问题而暂停使用。

我一直在尝试理解如何与 Firebase Auth 配合使用，有没有人有什么想法？即使是高层次的工作原理也很好。

到目前为止，我已经创建了这个： https://google-one-tap.brunocrosier.now.sh 它目前所做的事情有：

1. 显示 One-Tap 提示
2. 允许您点击 "Continue as {name}"
3. 向 /api/google 发送 POST 请求并根据 这些说明 验证 ID 令牌
4. 以 JSON 格式输出数据

我的问题是，我该如何将其与 Firebase Auth 配合使用？我能否使用第4步中输出的数据在 Firebase 中创建 Google 用户？

提前感谢！

- Bruno Crosier

Answer 1

一键 Google 登录 (https://developers.google.com/identity/gsi/web)

response 会直接通过 One Tap 脚本 的回调函数传递到您的函数中。

Firebase 8

let credential = firebase.auth.GoogleAuthProvider.credential(response.credential);

firebase.auth().signInWithCredential(credential).then(function(result) {
  let user = result.user
  console.log(user)
});

Firebase 9

import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth"
    
const yourAuth = getAuth(yourApp)
const credential = GoogleAuthProvider.credential(response.credential)
signInWithCredential(yourAuth, credential).then(function (result) {
  const user = result.user
  console.log(user)
})

- jprio

---

谢谢您。在Firebase 9版本中，您需要从auth包中导入GoogleAuthProvider对象和signInWithCredential方法，稍有不同。之后，它可以与Google一键登录完美配合。 - Pking

也许我漏掉了什么或者做了一些愚蠢的事情，但是“response”没有“credential”属性。 - Filipe Esperandio

Answer 2

我看到你在https://github.com/brunocrosier/google-one-tap上开源了你的代码。看起来你已经解决了这个问题。

- Guibin

Answer 3

看起来它被隐藏在这里的文档中https://firebase.google.com/docs/projects/pwa#sign_in_users_across_devices。 TLDR 添加GOOGLE_YOLO凭证助手

var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
}

- saywhatnow

---

谢谢您的回答！实际上那个方法行不通，因为FirebaseUI不再支持YOLO（https://github.com/firebase/firebaseui-web/issues/699）。不过我通过一些（同样是隐藏的）文档修复了这个问题 :) - Bruno Crosier

典型的谷歌......如果你的解决方法对其他人有用，你应该发布它。 - saywhatnow