Google OAuth2.0 API 를 통한 구글 소셜 로그인 구현

사요·2022년 2월 23일
2

2022 GDSC KR WINTER HACK

목록 보기
2/3
post-thumbnail

Google OAuthAPI

: 구글 소셜로그인을 구현하기 위해서는 우선, OAuth 클라이언트 ID 를 만들어야한다.
과정은 아래 링크에 잘 나와있으니 참고하자

https://imweb.me/faq?mode=view&category=29&category2=47&idx=71637

로그인

: 구글 로그인으로 유저의 이메일 정보를 받아서 백엔드에 전달하고 JWT토큰을 발급받는다.
user에 유저 정보가, accessToken에 구글로부터 발급받은 토큰정보가 들어있다.<YOUR_ANDROID_CLIENT_ID>에 OAuth에서 받은 클라이언트 ID 를 적어주면 된다.

import * as Google from "expo-google-app-auth";

const signInAsync = async () => {
    console.log("LoginScreen.js 6 | loggin in");
    try {
      const { type, user,accessToken } = await Google.logInAsync({
        iosClientId: `<YOUR_IOS_CLIENT_ID>`,
        androidClientId: `<YOUR_ANDROID_CLIENT_ID>`,
      });

    if (type === "success") {
        // Then you can use the Google REST API
        console.log("LoginScreen.js 17 | success to get google api");
       console.log(user);

        axios.post(`${BASE_URL}/auth/sign-in`,{email:user.email})
        .then(function (response) {

            console.log(response.data);
          if(response.data.isSuccess){
           
            console.log(response.data);
            const result = response.data.result;
            const userInfo={userId:result.userId,token:result.accessToken};

            //로컬에 토큰과 유저 아이디 저장시키기
            storeLoginData(userInfo);
            
            navigation.navigate("Signin",{token:userInfo.token});
            
            if(result.new){
                //회원가입 화면으로 리다이렉트
                navigation.navigate("Signin");
            }
            else{
                // 일반 홈화면으로
                navigation.navigate("Home");
            }
            
          
          }
          else{
              console.log('로그인 요청 실패')
          }
        })
        .catch(function (error) {
          console.log(error);
        });
        

  
      
    }
    } catch (error) {
      console.log("LoginScreen.js 19 | error with login", error);
    }
  };

회원가입

: 모든 정보를 입력하고 submit 버튼을 누르면 유저가 작성한 정보들(닉네임,프로필사진)을 백엔드로 보낸다.

const submit =()=>{

  axios.put(`${BASE_URL}/auth/sign-up`,{nickName:nickname,profile:imageUri},{headers: {
      "X-ACCESS-TOKEN":  token //the token is a variable which holds the token
     } })
      .then(function (response) {

          console.log(response.data);
        if(response.data.isSuccess){
         
          console.log(response.data);
          navigation.navigate('Tutorial')
        
        }
        else{
            console.log('등록 요청 실패')
        }
      })
      .catch(function (error) {
        console.log(error);
      });
      

}
profile
하루하루 나아가는 새싹 개발자 🌱

0개의 댓글