IT/Flutter

[sociallogin] google login구현_ios

성준하이 2021. 11. 25. 20:47
반응형

https://thenicesj.tistory.com/81

 

소셜로그인 android/ios (naver / kakao / google) in flutter

naver 로그인 구현 android https://thenicesj.tistory.com/18 [sociallogin] naver login구현_android 요즘엔 회원가입 로그인 절차보다 소셜로그인에 많이 의존을 하곤 한다. 실제로 소셜 로그인으로 했을때 접..

thenicesj.tistory.com

 

  • ios 또한 역시 gcp에서 먼저 시작을 한다.

https://console.cloud.google.com/

 

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

 

  • 사용자 인증정보 OAuth2.0 새로 만들어주고 (기존 android는 그대로 두고) , 만들때 ios로 설정을 한다.
  • 이름 설정해주고 번들id도 설정한다

(ios에서 번들 아이디는 xcode에서 프로젝트의 ios폴더를 열고 runner에서 general에 나와있다. 사진참조)

만들기!!

 

  • ios는 패키지 예제 사이트를 참조하자

https://pub.dev/packages/google_sign_in

 

google_sign_in | Flutter Package

Flutter plugin for Google Sign-In, a secure authentication system for signing in with a Google account on Android and iOS.

pub.dev

  • 들어가보면 [my_project]/ios/Runner/Info.plist file 에 설정해줘야하는게 있다.
    해당 파일 맨 아래 추가하고 gcp에서 만든 client-id를 넣어줬다.

 

  • 그리고 android 에서 json받기 처럼 plist받은 후 이름을 GoogleService-Info.plist로 바꿔서
    Runner폴더에 넣어주고 cache restart

그다음 여기서부터가 좀 어렵다.

 

  • 방금 그 googleservice-info파일에서 두번째 값을 보면 reverse client id를 복사하고
  • xcode를 열어서 현재 프로젝트의 ios폴더를 루트로 열어준다.

일단 테스트는 프로젝트 명이 ios_google이었고 그 안에 android, lib, ios등의 디렉토리가 존재하며 

xcode가 열어야할 폴더는 studioprojects/ios_google/ios 폴더!

 

그 안에서 사진과 같이 1-5번 순서대로 클릭하고 5번 자리에 방금 복사한 reverse client id를 복사해준다!

 

그다음 다시 android studio에서 돌려보면 정상 작동을 확인할수 있다.

반응형