错误：Ошибка 400：invalid_request 缺少必需参数：client_id Vue+php

Question

尝试在 Google 中注册时出现错误

Ошибка 400: invalid_request Missing required parameter: client_id

也不适用于 facebook

The provided app ID does not look like a valid app ID.

<template>
  <div class="social-auth-wrapper">
    <social-button driver="google" title="Google" @process="process" />
    <social-button driver="facebook" title="Facebook" @process="process" />
    <social-button driver="linkedin" title="LinkedIn" @process="process" />    
  </div>
</template>

<script>
import SocialButton from './SocialButton';
import { processSocialAuthorization } from './SocialAuthorization';

export default {
  name: 'SocialAuth',
  components: { SocialButton },
  props: {
    authorizationType: {
      type: String,
      required: true,
      validator: function (value) {
        return ['login', 'register'].indexOf(value) !== -1;
      },
    },
    advancedData: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  mounted() {
    window.addEventListener('message', this.handle, false);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handle);
  },
  methods: {
    process(driver) {        
        this.$loading();               
        const popup =  processSocialAuthorization(          
         this.authorizationType,
         driver,
         this.advancedData,
      );
      setTimeout(popup, 1000)
    },
    handle(event) {      
        if (
        event.origin !== window.origin ||
        !event.data.event_type ||
        !event.data.event_type === 'social_authorization'
      )
        return; 

      if (event.data.error) {
        this.$notify('', 'error', event.data.error);
        this.$loadingClose();
        return;
      }
      this.$store.commit('auth/SET_AUTH_TOKEN', event.data.token);
      this.$store.dispatch('account/downloadAccount').then(() => {
        this.$loadingClose();
        this.$router.push('booking');
      });
    },
  },
};
</script>

感谢任何帮助！

这是我的 js 文件

import {get} from "../../plugins/api";

export const processSocialAuthorization = (type, driver, advancedData = {}) => {

    get(`/api/social/${type}/${driver}`, advancedData)
        .then(({data: {link}}) => {

            openWindow(link, 'message');

        });

}

const openWindow = (url, title, options = {}) => {
    if (typeof url === 'object') {
        options = url
        url = ''
    }

    options = { url, title, width: 600, height: 720, ...options }

    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top
    const width = window.innerWidth || document.documentElement.clientWidth || window.screen.width
    const height = window.innerHeight || document.documentElement.clientHeight || window.screen.height

    options.left = ((width / 2) - (options.width / 2)) + dualScreenLeft
    options.top = ((height / 2) - (options.height / 2)) + dualScreenTop

    const optionsStr = Object.keys(options).reduce((acc, key) => {
        acc.push(`${key}=${options[key]}`)
        return acc
    }, []).join(',')

    const newWindow = window.open(url, title, optionsStr)

    if (window.focus) {
        newWindow.focus()
    }

    return newWindow
}

应用程序

import {get} from "../../plugins/api";

export const processSocialAuthorization = (type, driver, advancedData = {}) => {
    console.log(type, driver, advancedData);


    get(`/api/social/${type}/${driver}`, advancedData)
        .then(({data: {link}}) => {

            openWindow(link, 'message');

        });

}

const openWindow = (url, title, options = {}) => {
    if (typeof url === 'object') {
        options = url
        url = ''
    }

    options = { url, title, width: 600, height: 720, ...options }

    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top
    const width = window.innerWidth || document.documentElement.clientWidth || window.screen.width
    const height = window.innerHeight || document.documentElement.clientHeight || window.screen.height

    options.left = ((width / 2) - (options.width / 2)) + dualScreenLeft
    options.top = ((height / 2) - (options.height / 2)) + dualScreenTop

    const optionsStr = Object.keys(options).reduce((acc, key) => {
        acc.push(`${key}=${options[key]}`)
        return acc
    }, []).join(',')

    const newWindow = window.open(url, title, optionsStr)

    if (window.focus) {
        newWindow.focus()
    }

    return newWindow
}