구글로 가입하기

10 분

구글로 로그인하기 튜토리얼

소개

구글로 로그인하기 기능을 사용하면 사용자가 구글 계정을 사용하여 앱에 로그인할 수 있습니다.

전제 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

Back4App에서 생성된 앱
다음 링크를 참조하세요: 새 앱 만들기 튜토리얼 Back4App에서 앱을 만드는 방법을 배우세요.
Back4App 앱을 위한 서브도메인 설정하기
다음 링크를 참조하세요: 웹 호스팅 및 실시간 쿼리 활성화 Back4App에서 서브도메인을 만드는 방법을 배우세요.
구글 개발자 계정이 필요합니다.

1 - 새로운 Back4App 앱 만들기

우선, Back4App에 기존 앱이 생성되어 있는지 확인하는 것이 필요합니다. 그러나 새로운 사용자라면 이 튜토리얼을 확인하여 앱을 만드는 방법을 배울 수 있습니다.

2 - 새로운 클라이언트 식별자 만들기

당신의 Google 개발자 계정에 로그인하고 Google API 콘솔. 자격 증명을 클릭하고 OAuth 2.0 클라이언트 ID

동의 화면이 없는 경우, Google에서 하나를 만들도록 요청할 것입니다. 동의 화면 구성, 클릭하면 다음 페이지로 리디렉션됩니다:

스크린 동의 구성을 완료하고 저장

필요한 플랫폼을 선택하세요. 이 예제에서는 Javascript(웹 애플리케이션)를 사용하고 있지만, 사용하려는 것을 선택해야 합니다.

허가된 JavaScript 출처, URL을 서브도메인으로 교체하세요. 허가된 리디렉션 URI, 서브도메인 뒤에 /redirect. 아래 이미지와 같이:

참고: 서브도메인이 아직 활성화되지 않았다면, 다음 가이드를 확인하여 활성화하는 방법을 알아보세요: 서브도메인 만들기

그 후 클라이언트 ID와 비밀 키를 가져와야 합니다:

3 - 코드 가져오기

다음 URL을 방문하여 REDIRECT_URI와 CLIENT_ID를 생성한 값으로 변경하세요:

https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&access_type=offline&include_granted_scopes=true&response_type=code&state=state_parameter_passthrough_value&redirect_uri=REDIRECT-URL&client_id=CLIENT_ID

인증 토큰을 검색하고 나중에 사용자 ID를 가져오는 데 필요한 범위는 다음과 같습니다:

https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile

Google 계정으로 로그인하면 리디렉션된 웹사이트의 URL에 코드가 포함됩니다:

URL의 코드 부분만 복사하고 다음 CURL 명령을 실행하여 값을 바꿉니다.YOUR_CODE, CLIENT_ID, CLIENT_SECRET, 그리고 REDIRECT_URI 애플리케이션의 값으로 대체합니다.

1   curl -X POST \
2     https://oauth2.googleapis.com/token \
3     -F 'grant_type=authorization_code' \
4     -F 'code=YOUR_CODE' \
5     -F 'client_id=CLIENT_ID' \
6     -F 'client_secret=CLIENT_SECRET' \
7     -F 'redirect_uri=REDIRECT_URI'

실행하면 액세스 토큰을 검색할 수 있습니다:

기억하세요: 코드는 한 번만 사용할 수 있습니다. 오류가 발생하거나 토큰을 사용하지 않으면 코드를 다시 생성해야 다시 실행할 수 있습니다.

이제 구글 사용자 ID를 가져올 시간입니다. 이것은 숫자 문자열로, 4단계에서 id로 전달할 것입니다. 이를 위해, 다음 명령어를 실행하고 YOUR TOKEN 문자열을 이전 명령어에서 받은 토큰으로 교체하세요.

1   curl -X GET https://www.googleapis.com/userinfo/v2/me?access_token=YOUR_TOKEN

4 - 개발 시작

구글로 로그인 설정이 완료되었으므로, 개발 프로세스를 시작할 수 있습니다. AUTHDATA의 형식은 다음과 같습니다:

1   {
2     "google": {
3       "id": "user's Google id (string)",
4       "id_token": "an authorized Google id_token for the user (use when not using access_token)",
5       "access_token": "an authorized Google access_token for the user (use when not using id_token)"
6     }
7   }

여기 iOS SDK를 위한 방법이 있습니다:

1   PFUser.logInWithAuthType(inBackground: "google", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in
2    
3   }

그리고 여기 안드로이드 SDK를 위한 방법이 있습니다:

1   Map<string, string> authData = new HashMap<string, string>(); 
2   authData.put("access_token", tokenString);
3   authData.put("id", user);
4   ParseUser.logInWithInBackground("google", authData){
5
6   }

기억하세요, 이것은 모든 사용자에 대해 매번 로그인할 때마다 수행해야 합니다.