Как авторизовать пользователя в nuxtjs по соц. сетям?

Для авторизации пользователей в Nuxt.js по социальным сетям вы можете использовать пакеты nuxt/auth и nuxtjs/social-auth.

Первым шагом является установка необходимых пакетов:

npm install @nuxtjs/auth @nuxtjs/social-auth

После установки вы должны настроить модули в файле nuxt.config.js. В разделе modules добавьте @nuxtjs/auth и @nuxtjs/social-auth:

modules: [
  '@nuxtjs/auth',
  '@nuxtjs/social-auth',
],

Далее необходимо добавить настройки для модулей:

auth: {
  strategies: {
    social: {
      _scheme: 'oauth2',
      authorization_endpoint: 'https://www.example.com/oauth2/authorize',
      token_endpoint: 'https://www.example.com/oauth2/token',
      userinfo_endpoint: 'https://www.example.com/oauth2/userinfo',
      client_id: 'your-client-id',
      client_secret: 'your-client-secret',
      redirect_uri: 'http://localhost:3000/callback',
      scope: ['profile', 'email'], // необходимые области для авторизации
    },
  },
},

socialAuth: {
  strategies: {
    google: {
      // Настройки авторизации через Google
      client_id: 'your-google-client-id',
      redirect_uri: 'http://localhost:3000/callback',
    },
  },
},

Вышеуказанные настройки являются примером и вам нужно заменить URL-адреса конечной точки, идентификаторы клиентов и секретные ключи на свои собственные.

После настройки модулей вы можете использовать их в ваших компонентах. Вам потребуется создать кнопку авторизации для социальной сети. В примере ниже кнопка авторизации Google:

<template>
  <div>
    <button @click="loginWithGoogle">Авторизоваться через Google</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGoogle() {
      this.$auth.loginWith('social', { service: 'google' })
        .then(() => {
          // Действия после успешной авторизации
        })
        .catch((error) => {
          // Обработка ошибок авторизации
        });
    },
  },
}
</script>

После успешной авторизации пользователь будет перенаправлен на страницу обратного вызова callback. Вам нужно создать эту страницу и добавить следующий код:

<template>
  <div>
    <h1>Обратный вызов авторизации</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$auth.loginWith('social', { state: this.$route.fullPath })
      .then(() => {
        // Действия после успешной авторизации
      })
      .catch((error) => {
        // Обработка ошибок авторизации
      });
  },
}
</script>

В этом примере мы используем доступный метод $route.fullPath для сохранения текущего пути, чтобы вернуться на него после успешной авторизации.

Использование nuxt/auth и nuxtjs/social-auth позволяет вам легко авторизовывать пользователей в Nuxt.js по социальным сетям. Вы можете настроить различные стратегии для разных социальных сетей и легко интегрировать их в ваши компоненты.