Twitter 身份验证的 Firebase cookie 问题
Posted
技术标签:
【中文标题】Twitter 身份验证的 Firebase cookie 问题【英文标题】:Firebase cookie issue for Twitter Authentication 【发布时间】:2020-05-28 09:16:13 【问题描述】:我目前正在尝试允许用户通过 Twitter 身份验证登录到我的 Vue.js application。这基本上是我正在使用的code。每次我点击 Twitter 登录按钮时都会遇到这个问题:
与http://google.com/ 的跨站点资源关联的cookie 设置为没有
SameSite
属性。如果设置了SameSite=None
和Secure
,Chrome 的未来版本将只提供带有跨站点请求的cookie。您可以在开发人员工具中的 Application>Storage>Cookies 下查看 cookie,并在 https://www.chromestatus.com/feature/5088147346030592 和 https://www.chromestatus.com/feature/5633521622188032 上查看更多详细信息。
知道如何解决这个问题吗?任何帮助将不胜感激。我觉得这两段代码可能是问题所在,但我不太确定。
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase/app'
Vue.use(Vuex)
export const store = new Vuex.Store(
state:
user: null
,
getters:
user (state)
return state.user
,
mutations:
SET_USER (state, payload)
state.user = payload
,
LOGOUT (state, payload)
state.user = null
,
actions:
autoSignIn( commit , payload)
const newUser =
userDetails: payload.providerData
commit('SET_USER', newUser)
,
signIn( commit )
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithRedirect(provider);
firebase.auth().getRedirectResult().then(result =>
// The signed-in user info.
var user = result.user;
commit('SET_USER', user)
).catch(error =>
alert(error)
return
)
,
logout( commit )
firebase.auth().signOut().then(function ()
commit('LOGOUT')
).catch(function (error)
alert(error)
return
);
)
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'
import * as firebase from 'firebase/app'
import Vuex from 'vuex'
import config from './firebaseConfig'
// Firebase App (the core Firebase SDK) is always required and must be listed first
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics"
// Add the Firebase products that you want to use
import "firebase/auth"
import "firebase/firestore"
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
firebase.initializeApp(config)
const check = firebase.auth().onAuthStateChanged((user) =>
new Vue(
el: '#app',
router,
components: App ,
template: '<App/>',
store,
created()
if (user)
store.dispatch('autoSignIn', user)
)
check()
)
【问题讨论】:
【参考方案1】:此警告来自google.com
cookie,因此您无法影响它。您可以在https://web.dev/samesite-cookies-explained 上获得有关这些更改的更多信息,但是您无需采取任何措施。如果有任何与您的域相关的警告,那么您应该检查是否在您的 cookie 上设置了适当的 SameSite
值。
为了解释这里发生的情况,即使您使用的是 Twitter 登录,您的网站上也可能有某种由 Google 提供的第三方资源。这可能是在检索 Firebase 库、Google Analytics,或者您可能也在其中加载 Google 登录库。由于您的浏览器中有一些符合条件的 cookie,它们也会根据这些请求发送。它们没有添加SameSite
属性,因此一旦默认强制执行SameSite=Lax
就位,则将不再发送这些cookie。
测试这个的一个好方法是打开一个新的隐身会话,这样你就可以确定你只设置了新的 cookie,然后看看你是否仍然收到警告,这可能只是你当前的 cookie 中有一些旧的 cookie轮廓。但是,警告只是-警告,而不是错误。为了与旧版浏览器兼容,网站和服务可能会继续设置某些不带 SameSite
属性的 cookie。
【讨论】:
【参考方案2】:我的 Twitter 应用中有错误的回调 URL。没有意识到一旦你在 firebase 中插入 API/secret API 密钥,firebase 就会给你一个回调 URL。
【讨论】:
以上是关于Twitter 身份验证的 Firebase cookie 问题的主要内容,如果未能解决你的问题,请参考以下文章
Firebase 身份验证 Twitter API 登录“这里没啥可看的”
通过 Twitter 对用户进行身份验证时出现 ERROR_WEB_USER_INTERACTION_FAILURE (Firebase - Swift)
具有社交媒体身份验证的用户的 Firebase 重置密码问题