[英]Firebase cookie issue for Twitter Authentication
I am currently trying to allow users to login to my Vue.js application via Twitter authentication.我目前正在尝试允许用户通过 Twitter 身份验证登录到我的 Vue.js应用程序。 This is essentially the code I am using.
这基本上是我正在使用的代码。 Every time I click the Twitter sign in button I get this issue:
每次我点击 Twitter 登录按钮时,我都会遇到这个问题:
A cookie associated with a cross-site resource at http://google.com/ was set without the
SameSite
attribute.与http://google.com/上的跨站点资源关联的 cookie 设置为没有
SameSite
属性。 A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=None
andSecure
.如果使用
SameSite=None
和Secure
进行设置,Chrome 的未来版本将仅提供具有跨站点请求的 cookie。 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 .您可以在应用程序>存储>Cookies 下的开发人员工具中查看 cookie,并在https://www.chromestatus.com/feature/5088147346030592和https://www.chromestatus.com/feature/5633521622188032 上查看更多详细信息。
Any idea as to how I can resolve this?关于如何解决这个问题的任何想法? Any help would be greatly appreciated.
任何帮助将不胜感激。 I feel like these two pieces of code could be the issue but I am not so sure.
我觉得这两段代码可能是问题所在,但我不太确定。
store.js商店.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()
})
This warning is coming from a google.com
cookie, so it's not something you can affect.此警告来自
google.com
cookie,因此您无法对其产生影响。 You can get more on the context of these changes over on https://web.dev/samesite-cookies-explained however there's no action you need to take.您可以在https://web.dev/samesite-cookies-explained上获得有关这些更改的更多信息,但是您无需采取任何措施。 If there are any warnings associated with your domain, then you should check to see if there's an appropriate
SameSite
value to set on your cookie.如果有任何与您的域相关的警告,那么您应该检查是否有适当的
SameSite
值设置在您的 cookie 上。
To explain what's happening here, even though you are using Twitter Sign-In, you probably have some kind of Google supplied third-party resource on your site.为了解释这里发生的事情,即使您使用 Twitter 登录,您的站点上也可能有某种 Google 提供的第三方资源。 This may be retrieving the Firebase libraries, Google Analytics, or perhaps you're loading the Google Sign-In library in there too.
这可能是检索 Firebase 库、Google Analytics,或者您也在那里加载了 Google Sign-In 库。 As you have some eligible cookies in your browser, they are also being sent on these requests.
由于您的浏览器中有一些符合条件的 cookie,它们也会根据这些请求发送。 They do not have a
SameSite
attribute added, so as a result once the SameSite=Lax
by default enforcement is in place then these cookies will no longer be sent.它们没有添加
SameSite
属性,因此一旦默认情况下SameSite=Lax
实施到位,则将不再发送这些 cookie。
A good way to test this is to open up a new incognito session so you can be sure you only have new cookies set and then see if you still get the warning, it may simply be you have some older cookies in your current profile.测试这一点的一个好方法是打开一个新的隐身会话,这样您就可以确定您只设置了新的 cookie,然后查看是否仍然收到警告,这可能只是您当前的配置文件中有一些旧的 cookie。 However, the warning is just that - a warning, not an error.
但是,警告仅此而已 - 警告,而不是错误。 For compatibility with older browsers, sites and services may continue to set certain cookies without the
SameSite
attribute.为了与旧浏览器兼容,站点和服务可能会继续设置某些没有
SameSite
属性的 cookie。
I had the wrong callback url in my Twitter app.我的 Twitter 应用中有错误的回调 URL。 Didn't realise firebase gave you a callback URL once you insert the API/secret API key in firebase.
没有意识到一旦您在 firebase 中插入 API/秘密 API 密钥,firebase 就会给您一个回调 URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.