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=NoneSecure,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 重置密码问题

使用 Strava 提供程序进行 Firebase 身份验证

将 Firebase 身份验证与自定义提供程序一起使用

如何使用 Firebase 登录多个社交服务?