IT이야기

vuejs spa 및 laravel api 구글 사인인

cyworld 2022. 5. 28. 10:13
반응형

vuejs spa 및 laravel api 구글 사인인

한 페이지짜리 지원서를 가지고 있습니다.vue.js는 를 사용합니다.Laravel 5.5API로 사용합니다.구글 사인인을 추가하고 싶은데 어디서부터 시작해야 할지 모르겠어요.사용한 적이 있다laravel socialite이전에 구글 사인인을 추가했지만 그것은 순수한 라라벨 어플리케이션용이었고 라라벨 API가 아니었다.

내가 읽을 수 있는 자료들을 누가 지목할 수 있나요?socialite와 같은 패키지가 있나요? 이 경우에도 socialite를 사용할 수 있는 방법이 있나요?

helloj를 봐주세요

Hellojs는 쉽게 할 수 있습니다.소셜 프로바이더 로그인을 위한 팝업을 열고 액세스 토큰을 반환합니다.그런 다음 백엔드의 액세스 토큰을 사용하여 사용자를 가져옵니다.

js는 이렇게 생겼을 거예요

 hello
  .login(network)
  .then(
    () => {
      const authRes = hello(network).getAuthResponse();
      axios
        .get('api/link/to/sociak/callback',{
            params:{
              access_token : authRes.access_token, 
              provider: network
            }
         })
        .then((response) => {console.log(response.data.token)})})
        .catch((error) => {console.log(error.response.data)})
    },
    (e) => {
      console.log(e)
    }
  )

컨트롤러에서는 다음과 같이 처리됩니다.

public function handleProviderCallback(Request $request)
{
    $s_user = Socialite::with($request->provider)->stateless()->userFromToken($request->access_token);
    //your logic here...
}

더 명확해졌으면 좋겠어요.난 그저 이것과 싸우고 있었고 안녕 Js는 내 삶을 단순하게 만들었다.

앞서 말한 답변과 마찬가지로 vue-hellojs를 사용하여 goolgle 인증창을 추가하고 토큰('email, profile' 스코프 포함)을 취득했습니다.

그런 다음 larabel 백엔드(Google 소셜 사이트 프로바이더 및 CORS가 설치되어 있음)로 전송합니다.이 백엔드는 해당 이메일을 가진 사용자가 있는지 확인하고 로그인 시처럼 larabel jwt-token으로 vue SPA에 응답합니다.

언급URL : https://stackoverflow.com/questions/46924564/google-sign-in-in-vuejs-spa-and-laravel-api

반응형