1

我目前正在尝试允许用户通过 Twitter 身份验证登录到我的 Vue.js应用程序。这基本上是我正在使用的代码。每次单击 Twitter 登录按钮时，我都会遇到此问题：

与http://google.com/上的跨站点资源关联的 cookie设置为没有该SameSite属性。未来版本的 Chrome 将仅提供带有跨站点请求的 cookie，前提是它们使用SameSite=None和设置Secure。您可以在应用程序>存储>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()
})
4

2 回答 2

0

此警告来自google.comcookie，因此您无法影响它。您可以在https://web.dev/samesite-cookies-explained上了解有关这些更改的更多信息，但是您无需采取任何措施。如果有任何与您的域相关的警告，那么您应该检查是否SameSite在您的 cookie 上设置了适当的值。

为了解释这里发生了什么，即使您使用的是 Twitter 登录，您的网站上也可能有某种由 Google 提供的第三方资源。这可能是在检索 Firebase 库、Google Analytics，或者您可能也在其中加载 Google 登录库。由于您的浏览器中有一些符合条件的 cookie，它们也会根据这些请求发送。它们没有SameSite添加属性，因此一旦SameSite=Lax默认强制实施到位，这些 cookie 将不再发送。

一个很好的测试方法是打开一个新的隐身会话，这样你就可以确定你只设置了新的 cookie，然后看看你是否仍然收到警告，这可能只是你当前的配置文件中有一些旧的 cookie。但是，警告只是-警告，而不是错误。为了与旧版浏览器兼容，网站和服务可能会继续设置某些不带该SameSite属性的 cookie。

于 2020-02-13T11:52:27.890 回答
0

我的 Twitter 应用程序中有错误的回调 URL。没有意识到一旦您在 firebase 中插入 API/秘密 API 密钥，firebase 就会给您一个回调 URL。

于 2020-02-19T16:16:36.077 回答