Twitter 身份验证的 Firebase cookie 问题
Firebase cookie issue for Twitter Authentication
我目前正在尝试让用户登录我正在使用的 Vue.js application via Twitter authentication. This is essentially the code。每次我点击 Twitter 登录按钮时,我都会遇到这个问题:
A cookie associated with a cross-site resource at http://google.com/ was set without the SameSite
attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None
and Secure
. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and 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()
})
此警告来自 google.com
cookie,因此您无法影响它。您可以在 https://web.dev/samesite-cookies-explained 上获得有关这些更改的更多信息,但您无需采取任何行动。如果有任何与您的域相关的警告,那么您应该检查是否有适当的 SameSite
值设置在您的 cookie 上。
为了解释这里发生的事情,即使您使用的是 Twitter 登录,您的网站上也可能有某种 Google 提供的第三方资源。这可能正在检索 Firebase 库、Google Analytics,或者您可能也在其中加载 Google 登录库。由于您的浏览器中有一些符合条件的 cookie,它们也会根据这些请求发送。它们没有添加 SameSite
属性,因此一旦 SameSite=Lax
默认执行到位,这些 cookie 将不再发送。
测试这个的一个好方法是打开一个新的隐身会话,这样你就可以确定你只设置了新的 cookie,然后看看你是否仍然收到警告,这可能只是你有一些旧的 cookie您当前的个人资料。但是,警告只是 - 警告,而不是错误。为了与旧版浏览器兼容,网站和服务可能会继续设置某些没有 SameSite
属性的 cookie。
我的 Twitter 应用程序回调 url 错误。没有意识到一旦你在 firebase 中插入 API/secret API 键,firebase 就会给你一个回调 URL。
我目前正在尝试让用户登录我正在使用的 Vue.js application via Twitter authentication. This is essentially the code。每次我点击 Twitter 登录按钮时,我都会遇到这个问题:
A cookie associated with a cross-site resource at http://google.com/ was set without the
SameSite
attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=None
andSecure
. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and 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()
})
此警告来自 google.com
cookie,因此您无法影响它。您可以在 https://web.dev/samesite-cookies-explained 上获得有关这些更改的更多信息,但您无需采取任何行动。如果有任何与您的域相关的警告,那么您应该检查是否有适当的 SameSite
值设置在您的 cookie 上。
为了解释这里发生的事情,即使您使用的是 Twitter 登录,您的网站上也可能有某种 Google 提供的第三方资源。这可能正在检索 Firebase 库、Google Analytics,或者您可能也在其中加载 Google 登录库。由于您的浏览器中有一些符合条件的 cookie,它们也会根据这些请求发送。它们没有添加 SameSite
属性,因此一旦 SameSite=Lax
默认执行到位,这些 cookie 将不再发送。
测试这个的一个好方法是打开一个新的隐身会话,这样你就可以确定你只设置了新的 cookie,然后看看你是否仍然收到警告,这可能只是你有一些旧的 cookie您当前的个人资料。但是,警告只是 - 警告,而不是错误。为了与旧版浏览器兼容,网站和服务可能会继续设置某些没有 SameSite
属性的 cookie。
我的 Twitter 应用程序回调 url 错误。没有意识到一旦你在 firebase 中插入 API/secret API 键,firebase 就会给你一个回调 URL。