yandex oauth

src/app/providers/router/routes.ts

@@ -121,4 +121,12 @@ export const routes: RouteRecordRaw[] = [
             },
         },
     },
+    {
+        path: '/login/yandex/processing',
+        name: Routes.YANDEX_PROCESSING,
+        component: () => import('@/pages/callback/ui/CallBack/AuthCallBack.vue'),
+        meta: {
+            middleware: [guest]
+        },
+    }
 ]

src/features/auth/api/index.ts

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { fetchUser } from '@/entities'
-import { type AuthData, baseApi } from '@/shared'
+import { type AuthData, baseApi, baseURL } from '@/shared'
 import type { RegistrationData } from '../model'
 
 export const tokenValidate = async () => {
@@ -14,6 +14,10 @@ export const login = (
     data: AuthAPI.POST.Login.Params,
 ): Promise<AuthAPI.POST.Login.Response> => baseApi.post('login', data)
 
+export const loginYandex = (): Promise<YandexAPI.GET.loginYandex.Response> => baseURL.get('/login/yandex/')
+
+export const YandexCallBack = (token : String): Promise<YandexAPI.GET.YandexCallBack.Response> => baseURL.get(`/login/yandex/callback?access_token=${token}`)
+
 export const registration = (
     data: AuthAPI.POST.Registration.Params,
 ): Promise<AuthAPI.POST.Registration.Response> => baseApi.post('register', data)
@@ -46,3 +50,24 @@ export namespace AuthAPI {
         }
     }
 }
+
+export namespace YandexAPI {
+
+    export namespace GET {
+        export namespace YandexCallBack {
+            export type Params = { token: string }
+            export type Response = AxiosResponse<{
+                access_token: string,
+                success: boolean,
+                token_type: string,
+                message: string | null
+            }>
+        }
+    }
+    
+    export namespace GET {
+        export namespace loginYandex {
+            export type Response = AxiosResponse<string>
+        }
+    }
+}

src/features/auth/model/module/index.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue3-toastify'
 import { type AuthData, Routes, Stores, useJWT } from '@/shared'
-import { login, logout, registration } from '../../api'
+import { login, loginYandex, logout, registration } from '../../api'
 
 enum MedicType {
     DOCTOR = 'doctor',
@@ -44,6 +44,18 @@ export const useAuthStore = defineStore(Stores.AUTH, () => {
         }
     }
 
+    const onYandex = async () => {
+        try {
+            loading.value = true
+            const res = await loginYandex()
+            await router.push({ name: Routes.INDEX })
+        } catch (e: any) {
+            console.log(e.response.data.message)
+        } finally {
+            loading.value = false
+        }
+    }
+
     const onRegistration = async (data: NonNullable<RegistrationData>) => {
         try {
             loading.value = true
@@ -78,6 +90,7 @@ export const useAuthStore = defineStore(Stores.AUTH, () => {
 
     return {
         onLogin,
+        onYandex,
         onRegistration,
         onLogout,
         loading,

src/features/auth/ui/LogIn/LogIn.vue

@@ -4,6 +4,7 @@
             :loading="auth.loading"
             title="Вход"
             @submit="login"
+            @login-yandex="loginYandex"
             @set-registration="setRegistration"
         />
     </div>
@@ -20,6 +21,9 @@ const emit = defineEmits(['setRegistration'])
 const login = async (data: AuthData) => {
     await auth.onLogin(data)
 }
+const loginYandex = async () => {
+    await auth.onYandex()
+}
 const setRegistration = (value: boolean) => {
     emit('setRegistration', value)
 }

src/features/callback/index.ts

@@ -0,0 +1 @@
+export * from './model'

src/features/callback/model/index.ts

@@ -0,0 +1,19 @@
+import { type AuthData, Routes, Stores, useJWT } from '@/shared';
+import { useRoute, useRouter } from 'vue-router';
+import { YandexCallBack } from '@/features';
+import { QueryParamsValidator } from '@/shared';
+
+
+export const callBack = async () => {
+    const router = useRouter();
+    const { setJWT } = useJWT();
+
+    const url = QueryParamsValidator();
+    const params = new URL(url).searchParams;
+    const token =  params.get('access_token') as string;
+
+    const data = await YandexCallBack(token);
+    setJWT(data.data.data.access_token);
+
+    router.push({ name : Routes.INDEX });
+};

src/features/index.ts

@@ -1,3 +1,4 @@
 export * from './auth'
 export * from './patient'
 export * from './medical'
+export * from './callback'

src/pages/callback/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/pages/callback/ui/CallBack/AuthCallBack.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>void</div>
+</template>
+  
+<script setup lang="ts">
+    import { callBack } from '@/features';
+    callBack();
+</script>

src/pages/callback/ui/CallBack/index.ts

@@ -0,0 +1,3 @@
+import AuthCallBack from './AuthCallBack.vue'
+
+export { AuthCallBack }

src/pages/callback/ui/index.ts

@@ -0,0 +1 @@
+export * from './CallBack'

src/shared/api/index.ts

@@ -10,6 +10,10 @@ const baseApi = axios.create({
     },
 })
 
+const baseURL = axios.create({
+    baseURL: config.mainHost
+})
+
 const medicalApi = axios.create({
     baseURL: config.medicalURL,
     headers: {
@@ -17,4 +21,4 @@ const medicalApi = axios.create({
     },
 })
 
-export { baseApi, medicalApi }
+export { baseApi, medicalApi, baseURL }

src/shared/lib/hooks/QueryParamsValidator.ts

@@ -0,0 +1,5 @@
+export const QueryParamsValidator = () => {
+    let url = window.location.href;
+    url = url.replace('#', '?');
+    return url
+}

src/shared/lib/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './usePageTitle'
 export * from './useJWT'
+export * from './QueryParamsValidator'

src/shared/ui/AuthForm/AuthForm.vue

@@ -15,7 +15,7 @@
             />
             <span :class="bem('divider')">Или</span>
             <div :class="bem('socials')">
-                <button-social-component type="yandex" />
+                <button-social-component type="yandex" @click="onYandex" />
                 <button-social-component type="google" />
                 <button-social-component type="vk" />
             </div>
@@ -44,7 +44,7 @@ export type AuthFormProps = {
 }
 
 const props = defineProps<AuthFormProps>()
-const emit = defineEmits(['submit', 'setRegistration'])
+const emit = defineEmits(['submit', 'loginYandex', 'setRegistration'])
 
 const data = ref<AuthData>({
     email: '',
@@ -70,6 +70,11 @@ const onClick = () => {
     }
 }
 
+const onYandex = () => {
+    emit('loginYandex')
+
+}
+
 const onChangeType = () => {
     emit('setRegistration', !props.isRegistration)
 }